Part A: Work with Client Sessions and data persistence using MongoDB to add user registration and Login/Logout functionality & tracking (logging) Part B: Update the password storage logic to include “hashed” passwords (using bcrypt.js) You can view a sample solution online here: https://as6-322-sample-sites.vercel.app/For this assignment, we will be allowing users to “register” for an account on your National Historic Sites App. Once users are registered, they can log in and gain access to the add / edit & delete functionality created in assignment 5. By default, this functionality will be hidden from the end user and unauthenticated users will only see the “sites” / “site” and “about” views / top menu links. Once this is complete, we will add bcrypt.js to our code to ensure that all stored passwords are “hashed” NOTE: If you are unable to start this assignment because Assignment 5 was incomplete – email your professor for a clean version of the Assignment 5 files to start from. If you have not already done so, create a new account on https://www.mongodb.com/cloud/atlas to host our new MongoDB database: For our app to be able to register new users and authenticate existing users, we must create a convenient way to access this stored information. To accomplish this, we will need to add a new module called “auth-service“. This module will be responsible for storing and retrieving user information (user & password) using our newly created MongoDB database: Each of the below functions are designed to work with the User Object (defined by userSchema). Once again, since we have no way of knowing how long each function will take, every one of the below functions must return a promise that passes the data via its “resolve” method (or if an error was encountered, passes an error message via its “reject” method). When we access these methods from the server.js file, we will be assuming that they return a promise and will respond appropriately with .then() and .catch() (or with async / await and try / catch). return new Promise(function (resolve, reject) { let db = mongoose.createConnection(process.env.MONGODB); db.on(‘error’, (err)=>{ reject(err); // reject the promise with the provided error }); db.once(‘open’, ()=>{ User = db.model(“users”, userSchema); resolve(); }); }); users[0].loginHistory.pop()} Once the code for auth-service.js is complete, we need to add its initialize method to the promise chain surrounding our app.listen() function call within our server.js file, for example: Your code should currently look something like this:siteData.initialize().then(function(){ app.listen(HTTP_PORT, function(){ console.log(`app listening on: ${HTTP_PORT}`); });}).catch(function(err){ console.log(`unable to start server: ${err}`);}); Since our server also requires authData to be working properly, we must add its initialize method (ie: authData.initialize) to the promise chain: siteData.initialize().then(authData.initialize).then(function(){ app.listen(HTTP_PORT, function(){ console.log(`app listening on: ${HTTP_PORT}`); });}).catch(function(err){ console.log(`unable to start server: ${err}`);}); Now that we have a back-end to store user credentials and data, we must download and “require” the “client-sessions” module using NPM and correctly configure our app to use the middleware:app.use((req, res, next) => { res.locals.session = req.session; next();}); With our app now capable of respecting client sessions and communicating with MongoDB to register/validate users, we need to create routes that enable the user to register for an account and login / logout of the system (above our 404 middleware function). Once this is complete, we will create the corresponding views (Step 6). req.session.user = { userName: // authenticated user’s userName email: // authenticated user’s email loginHistory: // authenticated user’s loginHistory } res.redirect(‘/sites);}) Lastly, to complete the register / login functionality, we must update/create the following .ejs files (views) within the views directory. Account: Add Site User History Log Out Account Login Register only if there is an errorMessage rendered with the view. only if there is an errorMessage rendered with the view.Proceed to Log in only if there is a successMessage rendered with the view (this will be rendered instead of the form). We will be using the “bcryptjs” 3rd party module, so we must go through the usual procedure to obtain it (and include it in our “auth-service.js” module). Since all our new users will have encrypted (hashed) password, we will need to remove all our existing test users. This can be done easily by logging into your MongoDB Atlas account and clicking on the “collections” for your existing cluster. Now that we have the bcryptjs module included and our Users collection has been cleaned out, we can focus on updating the other two functions in our auth-service.js module. We will be using bcrypt to encrypt (hash) passwords in registerUser(userData) and validate user passwords against the encrypted passwords in checkUser(userData):bcrypt.hash(“myPassword123”, 10).then(hash=>{ // Hash the password using a Salt that was generated using 10 rounds// TODO: Store the resulting “hash” value in the DB}).catch(err=>{console.log(err); // Show any errors that occurred during the process}); bcrypt.compare(“myPassword123”, hash).then((result) => {// result === true if it matches and result === false if it does not match});If the passwords do not match (ie: result === false) reject the returned promise with the message “Incorrect Password for user: userName” where userName is the userData.userName value To see a completed version of this app running, visit: https://as6-322-sample-sites.vercel.app/ /********************************************************************************* WEB322 – Assignment 06** I declare that this assignment is my own work in accordance with Seneca’s* Academic Integrity Policy:** https://www.senecacollege.ca/about/policies/academic-integrity-policy.html** Name: ______________________ Student ID: ______________ Date: ______________** Published URL:*********************************************************************************/
Build upon Assignment 4 by refactoring our code to use a Postgres database to manage our National Historic SitesData, as well as enable the creation, modification and deletion of Sites in the collection.If you require a clean version of Assignment 4 to begin this assignment, please email your professor. NOTE: Please reference the sample: https://as5-322-sample1.vercel.app/ when creating your solution. Once again, the UI does not have to match exactly, but this will help you determine which elements / syntax should be on each page and you must implement the functionalities shown from the sample app. You may copy any HTML / CSS code from here if it helps with your solution. Additionally, since this sample is shared with all students in the class, please do not add any content to the Site collection that may be considered harmful or disrespectful to other students. Since the major focus of this assignment will be refactoring our code to use a Postgres database, let’s begin with this. Follow the course notes PostgreSQL (Postgres) to set up a database on https://neon.tech and obtain the (pooled) connection string, from which extract the PGHOST, PGDATABASE, PGUSER, PGPASSWORD values based on the following format: “postgresql://PGUSER:PGPASSWORD@PGHOST/PGDATABASE?sslmode=require” Now, with your assignment folder open, add the file “.env” in the root of your solution and add the text: DB_USER=”PGUSER”DB_DATABASE=”PGDATABASE”DB_PASSWORD=”PGPASSWORD”DB_HOST=”PGHOST” Where: PGUSER, PGDATABASE, PGPASSWORD and PGHOST are the values that you recorded from Neon.tech (above) To actually connect to the database and use the .env file, we must install the Sequelize,pg / pg-hstore and dotenv modules from NPM: npm install sequelize pg pg-hstore dotenv Finally, before we write our Sequelize code, open the file: /modules/data-service.js and add the “dotenv” module at the top using the code: require(‘dotenv’).config(); This will allow us to access the DB_USER, DB_DATABASE, etc. values from the “.env” file using the “process.env” syntax, ie: process.env.DB_USER, process.env.DB_DATABASE, etc. Beneath this line, add the code to include the “sequelize” module: const Sequelize = require(‘sequelize’); and create the “sequelize” object only using let sequelize = new Sequelize( … ); – see: “Getting Started” in the Relational Database (Postgres) Notes. Be sure to include all of the correct information using process.env for “database”, “user”, “password” and “host”. With our newly created “sequelize” object, we can create the two “models” required for our Assignment according to the below specification (Column Name / Sequelize Data Type): NOTE: We also wish to disable the createdAt and updatedAt fields – see: Models (Tables) Introduction Now that the models are defined, we must create an association between the two: Site.belongsTo(ProvinceOrTerritory, {foreignKey: ‘provinceOrTerritoryCode’}) With our models correctly defined, we have everything that we need to start working with the database. To ensure that our existing data is inserted into our new “ProvincesAndTerritories” and “Sites” tables, copy the code from here: https://seneca-my.sharepoint.com/:t:/g/personal/wei_song_senecapolytechnic_ca/ES1upIlu-QFKlr04iPDHsXQB72ADpAkX3KRnN-e6YqsG6w?e=xLWRGY and insert it at the bottom of the /modules/data-service.js file (beneath all module.exports) (NOTE: this code snippet assumes that you have the below code from Assignment 3 still in place):const siteData = require(“../data/NHSiteData”); const provinceAndTerritoryData = require(“../data/provinceAndTerritoryData”); With the code snippet from the above URL in place, open the integrated terminal and execute the command to run it: node modules/data-service.js This should show a big wall of text in the console, followed by “data inserted successfully”! Now that all of our sites exist on the database, we can refactor our existing code in the data-service.js module to retrieve them. This can be done by following the below steps: const provinceAndTerritoryData = require(“../data/provinceAndTerritoryData”);let sites = []; ‘$ProvinceOrTerritory.provinceOrTerritory$’: { [Sequelize.Op.iLike]: `%${provinceOrTerritory}%` }}}); As before, if no sites were found, reject the Promise with an error, ie: “Unable to find requested sites”NOTE: We have once again included the option include: [ProvinceOrTerritory] to include ProvinceOrTerritory Data. ‘$ProvinceOrTerritory.region$’: region}}); As before, if no sites were found, reject the Promise with an error, ie: “Unable to find requested sites”NOTE: We have once again included the option include: [ProvinceOrTerritory] to include ProvinceOrTerritory Data. Since we are now using a database to manage our data, instead of JSON file(s), the next logical step is to enable users to Create / Update and Delete site data. To begin, we will first create the logic / UI for creating sites and will focus on editing and deleting in the following steps. To begin, we should create a simple UI with a form according to the following specification NOTE: Do not forget to run the command npm run tw:build after creating the form, as new CSS was likely used. As you have noticed from the above steps, a small update is required to our navbar to support linking to the view & highlighting the navbar item. To achieve this, add the following navbar item where appropriate (ie: in the regular & responsive navbar HTML elements)Add to Collection Since it’s possible that we may encounter database errors, we should have some kind of “500” error message to show the user instead of rendering a regular view. To get started, make a copy of your “404.ejs” file and update it to show the text “500” as well as any other cosmetic updates you would like to use. To correctly serve the “/addSite” view and process the form, two routes are required in your server.js code (below).Additionally, since our application will be using urlencoded form data, the “express.urlencoded({extended:true})” middleware should be added Once the Promise has resolved with the sites, the “addSite” view must be rendered with them, ie: res.render(“addSite”, { provincesAndTerritories: provincesAndTerritories }); In our new routes, we made some assumptions about upcoming functionality to be added in the “data-service.js” module, specifically: “addSite(siteData)” and ” getAllProvincesAndTerritories ()”. To complete the functionality to add new sites, let’s create these now:NOTE: do not forget to use “module.exports” to make these functions available to server.js We should now be able to add new sites to our collection. Additionally, if we accidentally create a site with a duplicate id, our users will see the “500” status code. In addition to allowing users to add sites, we should also let them edit existing sites. Let’s try to follow the same development methodology used when creating the functionality for adding new sites. This means starting with the view: However, things get more complicated when we wish to correctly set the “selected” attribute of the “provinceOrTerritoryCode” select control, ie:{ %>(once again this assumes that a “provincesAndTerritories” collection will be added to the view along with a “site” object later) To correctly serve the “/editSite” view and process the form, two routes are required in your server.js code (below). In our new routes, we made some assumptions about upcoming functionality to be added in the “data-service.js” module, specifically: “editSite(id, siteData)”. To complete the functionality to edit sites, let’s create this now:NOTE: do not forget to use “module.exports” to make the function available to server.js At the moment, we should be able to edit any of our Sites by going directly to the route in the browser, ie: “/editSite/AB001” However, it makes more sense from a usability perspective to allow users the ability to navigate to this route using the UI. To achieve this, add an “edit” link (rendered using the tailwind button classes, ie: “btn btn-success”, etc) in the site.ejs template that links to: “/editSite/id” where id is the “siteId” value of the current site, ie: Add text “Is WorldHeritageSite” and the Boolean value of the “worldHeritageSite” field of site object in the site.ejs template. So when the value is true, the “Is WorldHeritageSite” checkbox on the “Edit Site” page should be checked. We should now be able to edit sites to our collection! The final piece of logic that we will implement in this assignment is to enable users to remove (delete) an existing site from the database. To achieve this, we must add an additional function on our data-service.js module: NOTE: do not forget to use “module.exports” to make the function available to server.js With this function in place, we can now write a new route in server.js : Finally, let’s add a button in our UI to enable this functionality by linking to the above route for the correct site. One place where it makes sense is in our “editSite.ejs” view. Here, we give the user the choice to either update the site or delete it.To achieve this, add a “Delete Site” link (rendered using the tailwind button classes, ie: “btn btn-error”, etc) that links to: “/deleteSite/id” where id is the “siteId” value of the current site, ie: We should now be able to remove sites from our collection! Update sites.ejs to show the count of sites by adding ( … ) element (which contains the count of sites displayed on the page) to the element in the daisyUI ‘Hero’ component, e.g.: Double check all steps for Configuring your App for Vercel, e.g., Explicitly Requiring the “pg” Module in data-service.js: require(‘pg’); // explicitly require the “pg” moduleconst Sequelize = require(‘sequelize’); Finally, once you have tested your site locally and are happy with it, you’re ready to update your deployed site by pushing your latest changes to GitHub. However, before you do that, you should add .env to your .gitignore file to prevent your environment variables from being included: File: .gitignorenode_modules.env Additionally, you should add those environment variable values to your app on Vercel.com by logging in and proceeding to the project “Settings” for your app and navigating to the “Environment Variables” tab. From there you can add or remove environment variables, e.g.: For more information on setting up environment variables on Vercel, see: Note: An alternative platform for deploying your assignment apps is Render. Please find more about Render from our course website Alternative (Render). /********************************************************************************* WEB322 – Assignment 05** I declare that this assignment is my own work in accordance with Seneca’s* Academic Integrity Policy:** https://www.senecacollege.ca/about/policies/academic-integrity-policy.html** Name: ______________________ Student ID: ______________ Date: ______________** Published URL:*********************************************************************************/
Build upon Assignment 3 by refactoring our code to use the EJS template engine in order to render our data (instead of sending the JSON back to the client). Additionally, we will incorporate a random quote from the “Quotable” APIIf you require a clean version of Assignment 3 to begin this assignment, please email your professor. NOTE: Please reference the sample: https://as4-322-sample.vercel.app when creating your solution. The UI does not have to match exactly (e.g., the font, size, theme, the sites shown in the home page cards, etc.), but the basic functionalities and UI components must be implemented as shown in the sample app using the code or approaches discussed in class or as specified, e.g., navbar, card, layouts of the page and the content in the card and table, etc… Since the major focus of this assignment is using EJS, the first step will involve correctly installing it and configuring it in our server.js file, ie: Once this is complete, we can now change all of our “.html” files (ie: “home.html“, “about.html“, “404.html“) to use the .ejs extension instead. Unfortunately, this means that any code that we have in our server.js to “send” the html files, ie:res.sendFile(path.join(__dirname, “/views/home.html”));will no longer work (since the file should now be “home.ejs”). To remedy this, change all of your “res.sendFile()” functions to “res.render()“. For example, in the above case (for home.html) the new code would be:res.render(“home”); If you test your server now, you should not notice any changes in the browser (ie: the “about”, “home” and “404” pages are all rendered correctly). However, changing the filenames from .html to .ejs means that our code to “build” the main.css file using the command: “npm run tw:build” results in the following message:“warn – No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.” This is because in our tailwind configuration, we’re looking for .html files. As a result, the build process does not find any utility classes and does not correctly generate our main.css file.To fix this, we will change the line in tailwind.config.js:content: [`./views/*.html`], // all .html files to instead read: content: [`./views/**/*.ejs`], // all .ejs files This will ensure that all .ejs files in the “views” folder (including sub-directories) will be found during our tailwind build step. Since we are using a template engine that supports “partial” views, we should take this opportunity to move some common HTML, used across all pages, into a “partial” view. In our case, this is the navbar: Since every one of our view files share the same navbar structure, copy the complete navbar code from one of your views (ie: “home.ejs”) – in the demo, this is the … elements. Paste this code in your “navbar.ejs” file. Once this is complete, you can replace the navbar code in your views with the include statement for the “navbar” partial: You should be able to run your server now and see that it is once again running as before (note: you may have to run npm run tw:build each time after you add daysiUI components or update values of the class attribute). However, you will notice that the navbar element for “about” is not highlighting correctly. To correct this, we should add a “page” parameter to our partial view code that matches the link in the navbar that we wish to highlight, ie: for the “about” view. NOTE: We must always include some value for “page”, even if there’s no corresponding link in the navbar (ie: we can use {page: ”} for 404, etc). To make sure the correct element in the navbar is highlighted within the partial view, we need to update each of our … elements to conditionally add the ‘active’ class depending on the value of the “page” parameter. For example: About becomes About and similarly, remove the Region dropdown Region … … and change it to View Site Collection Currently, the “/sites” route still returns the JSON data only. For this assignment, we will update this so that it shows a table of Site data instead (see: https://as4-322-sample.vercel.app/sites). To begin, create a new “sites.ejs” file within the views folder. As a starting point for the HTML in this file, you can copy / paste the HTML from an existing view such as “404.ejs”. Next, change the header (“hero” element) text to something more appropriate (ie: “Site Collection”) and ensure that the “navbar” partial uses {page:”/sites”}. To begin testing this route, change the server.js code defining your GET “/sites” route so that it renders the new “sites.ejs” file with the data instead of sending it directly (assuming it’s stored in the variable “sites”), ie: change res.send(sites); to res.render(“sites”, {sites: sites}); // or res.render(“sites”, {sites}); This will ensure that the “sites” view is rendered with the sites data stored in a “sites” variable. Now that the view is rendering with the “sites” data, we must display it in a table with the following data in each row: HINT: See “Iterating over Collections” for help generating the … elements for each Site in the “sites” array When testing your site, you should now see all of your Site data rendered in a table! However, the heading (“hero” element) is still a little plain. To fix this, add some hard-coded links to filter your table by specific regions (e.g. “Atlantic Region”, “Central Canada”, “Prairie Provinces”, etc) or by specific province or territory (e.g. “Ontario”, “Quebec”, “Yukon”, etc) – (see: https://as4-322-sample.vercel.app/sites) Currently, the “/sites/id” (where id matches the “siteId” of a specific site), still renders the JSON formatted data. As in step 3, we must update this to show detailed Site data instead (see: https://as4-322-sample.vercel.app/sites/AB002). To begin, create a new “site.ejs” file within the views folder. As a starting point for the HTML in this file, you can copy / paste the HTML from an existing view such as “about.ejs”. Next, change the header (“hero” element) text to contain empty and (we will dynamically add these later) and ensure that the “navbar” partial uses {page:””} (since there’s no matching page in the navbar). To begin testing this route, change the server.js code defining your GET “/sites/:id” route so that it renders the new “site.ejs” file with the data instead of sending it directly (assuming it’s stored in the variable “site”), ie: change res.send(site); to res.render(“site”, {site: site}); // or res.render(“site”, {site}); This will ensure that the “site” view is rendered with the site data stored in a “site” variable. If we test the server now, we will see that each individual site renders the same page without any specific site data. To fix this, ensure that the following data from the “site” object is rendered on the page – (see: https://as4-322-sample.vercel.app/sites/AB002) Below the “hero” element, add a responsive grid system containing 2 columns and rendering the data as shown on the sample page: document.addEventListener(“DOMContentLoaded”, ()=>{ /* TODO: “fetch” the data at: https://quotable.io/random and update an element in the DOM with the “content” and “author” */ }); At this point, most of the updates to the site have been completed – you should now be able to view the list of sites in a table, featuring images and links to individual sites, which are also rendered as HTML. However, there are some usability tweaks that we should add, including: Since we no longer require the “Region” dropdown in the navbar, it can be removed. Instead, add a “View Site Collection” menu item that links to “/sites” before the “About” menu item. Also, do not forget to dynamically add the “active” class: View Site Collection NOTE: Do not forget to update both the regular and responsive navbar, as these links are duplicated. There are a number of situations where it is appropriate to show a 404 error, ie: when sites with a specific region, provinceOrTerritory, or id aren’t found, or a route hasn’t been defined. Because of this, it makes sense to show a different 404 message to the user depending on the type of error they have encountered. To achieve this, we should render the 404 view with a “message” property. For example: instead of res.status(404).render(“404”); use something like: res.status(404).render(“404”, {message: “I’m sorry, we’re unable to find what you’re looking for”}); Now, in your “404.ejs” file, you can reference the “message” property using . Finally, once this is complete, be sure to render the “404” error with an appropriate error message (ie: the message returned from a rejected promise when attempting to find a specific Site) in the following situations: Finally, once you have tested your site locally and are happy with it, update your deployed site by pushing your latest changes to GitHub. /********************************************************************************* WEB322 – Assignment 04** I declare that this assignment is my own work in accordance with Seneca’s* Academic Integrity Policy:** https://www.senecacollege.ca/about/policies/academic-integrity-policy.html** Name: ______________________ Student ID: ______________ Date: ______________** Published URL:*********************************************************************************/
Build upon Assignment 2 by adding a custom landing page with links to sites, as well as an “about” page and custom 404 error page. Additionally, we will be updating our server.js file to support more dynamic routes, status codes and static content (css). Finally, we will publish the solution using Vercel.If you require a clean version of Assignment 2 to begin this assignment, please email your professor. NOTE: Please reference the sample: https://as3-322-sample.vercel.app/ when creating your solution. The UI does not have to match exactly (e.g., the font, size, theme, the sites shown in the home page cards, etc.), but the basic functionalities and UI components must be implemented as shown in the sample app using the code or approaches discussed in class, e.g., navigation bar with region dropdown, card, layouts of the page and the content in the card, etc… For this assignment, we will be adding multiple pages, including a landing page with links to some of your sites. To make these appealing to the end user, we will be leveraging our knowledge of Tailwind CSS. With your Assignment 2 folder open in Visual Studio Code, follow the follow the steps identified in Tailwind CSS & daisyUI to set up Tailwind CSS, ie: Now that we have our primary “main” css file in place, we can focus on creating the “views” for our application. At the moment, this is home.html (“/”), about.html (“/about”) and 404.html (no matching route). These must be created according to the following specifications: NOTE: Before you begin, do not forget to mark the “public” folder as “static”, ie: app.use(express.static(__dirname + ‘/public’)) in your server.js file File: views/home.html File: views/about.html This file should follow the same layout as views/home.html, ie: reference main.css, have a property and identical navbar. However, the navbar must have the text “About” highlighted by using the “active” class, ie: About Additionally, this view should feature: File: views/404.html Once again, this file should follow the same layout as views/home.html, ie: reference main.css, have a property and identical navbar. Additionally, this view should feature some kind of 404 message / image for the user. The sample uses a “hero” daisyUI component To support dynamic routes, status codes and our custom 404 page, we must make the following changes to our server.js code from Assignment 2: Finally, once you have tested your site locally and are happy with it, it’s time to publish it online. Check the “Vercel Guide” for more information about the deployment process. /********************************************************************************* WEB322 – Assignment 03** I declare that this assignment is my own work in accordance with Seneca’s* Academic Integrity Policy:** https://www.senecacollege.ca/about/policies/academic-integrity-policy.html** Name: ______________________ Student ID: ______________ Date: ______________** Published (web app) URL:*********************************************************************************/
Create and publish a web app that uses multiple routes which serve static content (text / json) as well as create a “data service” module for accessing data. As with the previous assignment, we will first be creating the files and directories for our solution. To begin: Now we now have the data for the assignment. The purpose of the “data-service.js” file is to provide easy access to the Site data for other files within our assignment that require it. To start, add the following two lines to the beginning of the “data-service.js” file: const siteData = require(“../data/NHSiteData”);const provinceAndTerritoryData = require(“../data/provinceAndTerritoryData”); This will automatically read both files and generate two arrays of objects: “siteData” and “provinceAndTerritoryData”. Next, create a variable called “sites”, initialized to an empty array, ie: let sites = []; This will be the completed array of Site objects, after processing the above “siteData” and “provinceAndTerritoryData” arrays. The remainder of this file will contain functions, according to the following specification: {“siteId”: “BC010”,“site”: “Butchart Gardens”,“description”: “Internationally known gardens, including remarkable Sunken Garden in a former limestone quarry; unique combination of 3 aspects of Canadian gardening history: early 20th-century estate garden, early twentieth century beautification movement, and the Victorian bedding out system”,“date”: 1904,“dateType”: “established”,“image”: “https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Sunken_Garden.jpg/360px-Sunken_Garden.jpg”,“location”: “Brentwood Bay”,“latitude”: “48.56528”,“longitude”: “-123.46944”,“designated”: 2004,“provinceOrTerritoryCode”: “BC”} However, each of these objects must also include a new “provinceOrTerritoryObj” property. The value of the “provinceOrTerritoryObj” property should be the corresponding provinceOrTerritory object from the provinceAndTerritoryData.json file, whose “code” value matches the “provinceOrTerritoryCode” for the “siteData” object. For example, in the above “siteData” object, we have a “provinceOrTerritoryCode” value of “BC”. Therefore, we must add an additional “provinceOrTerritoryObj” property with the value of { “code”: “BC”, “name”: “British Columbia”, “type”: “province”, “region”: “West Coast”, “capital”: “Victoria” }since the “code” value for the object is also “BC” within the provinceAndTerritoryData.json file. This will result in the following object being added (pushed) to the “sites” array:{“siteId”: “BC010”,“site”: “Butchart Gardens”,“description”: “Internationally known gardens, including remarkable Sunken Garden in a former limestone quarry; unique combination of 3 aspects of Canadian gardening history: early 20th-century estate garden, early twentieth century beautification movement, and the Victorian bedding out system”,“date”: 1904,“dateType”: “established”,“image”: “https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Sunken_Garden.jpg/360px-Sunken_Garden.jpg”,“location”: “Brentwood Bay”,“latitude”: “48.56528”,“longitude”: “-123.46944”,“designated”: 2004,“provinceOrTerritoryCode”: “BC”,“provinceOrTerritoryObj”: {“code”: “BC”,“name”: “British Columbia”,“type”: “province”,“region”: “West Coast”,“capital”: “Victoria”}} As an additional example, consider the following object from a “siteData” array:{“siteId”: “QC001”,“site”: “Acton Vale Railway Station (Grand Trunk)”,“description”: “A small passenger terminal with dormer, turret and bellcast roof; symbolic of the expansion of the Grand Trunk Railway”,“date”: 1900,“dateType”: “completed”,“image”: “https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Gare_d%27Acton_Vale_2.JPG/320px-Gare_d%27Acton_Vale_2.JPG”,“location”: “Acton Vale”,“latitude”: “45.6482917”,“longitude”: “-72.5640139”,“designated”: 1976,“provinceOrTerritoryCode”: “QC”} This has a “provinceOrTerritoryCode” of “QC”. From the “provinceAndTerritoryData.json” file, the object of the province or territory with code “QC” is { “code”: “QC”, “name”: “Quebec”, “type”: “province”, “region”: “Central Canada”, “capital”: “Quebec City” }. Therefore, the new object to be added to the “sites” array should be:{“siteId”: “QC001”,“site”: “Acton Vale Railway Station (Grand Trunk)”,“description”: “A small passenger terminal with dormer, turret and bellcast roof; symbolic of the expansion of the Grand Trunk Railway”,“date”: 1900,“dateType”: “completed”,“image”: “https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Gare_d%27Acton_Vale_2.JPG/320px-Gare_d%27Acton_Vale_2.JPG”,“location”: “Acton Vale”,“latitude”: “45.6482917”,“longitude”: “-72.5640139”,“designated”: 1976,“provinceOrTerritoryCode”: “QC”,“provinceOrTerritoryObj”: {“code”: “QC”,“name”: “Quebec”,“type”: “province”,“region”: “Central Canada”,“capital”: “Quebec City”}} HINT: Consider using the .find() and .forEach() Array methods for your solution This function simply returns the complete “sites” array This function will return a specific “site” object from the “sites” array, whose “siteId” value matches the value of the “id” parameter, ie: if getSiteById(“ON016”) was invoked, the following site object would be returned:{“siteId”: “ON016”,“site”: “Public Grounds of the Parliament Buildings”,“description”: “The focal point for national celebrations in Ottawa; the grounds were originally designed by Calvert Vaux, and since supplemented by 18 monuments and memorials”,“date”: 1875,“dateType”: “initial completion”,“image”: “https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/East_Block_and_Langevin_Block.jpg/320px-East_Block_and_Langevin_Block.jpg”,“location”: “Ottawa”,“latitude”: “45.424807”,“longitude”: “-75.699234”,“designated”: 1976,“provinceOrTerritoryCode”: “ON”,“provinceOrTerritoryObj”: {“code”: “ON”,“name”: “Ontario”,“type”: “province”,“region”: “Central Canada”,“capital”: “Toronto”}} HINT: Consider using the .find() Array method for your solution The purpose of this function is to return an array of objects from the “sites” array whose “name” value of the embedded “provinceOrTerritoryObj” object matches the “name” parameter. However, it is important to note that the “name” parameter may contain only part of the “name” value of the embedded “provinceOrTerritoryObj” object and must be case insensitive. For example: getSitesByProvinceOrTerritoryName(“Ontario”); would return all the sites from your “sites” array whose “name” value of the embedded “provinceOrTerritoryObj” object contains the string “Ontario” (ignoring case). For example, if your “sites” array contained the following objects, they would be returned (28 site objects):[{“siteId”: “ON001”,“site”: “Adelaide Hunter Hoodless Homestead”,“description”: “The childhood home of activist and organizer Adelaide Hunter Hoodless, educational reformer and co-founder of the Women’s Institute, the National Council of Women of Canada and the Victorian Order of Nurses”,“date”: 1839,“dateType”: “completed”,“image”: “https://upload.wikimedia.org/wikipedia/commons/5/5a/Hoodless_Homestead_NHS.jpg”,“location”: “Brant County”,“latitude”: “43.23694”,“longitude”: “-80.29667”,“designated”: 1995,“provinceOrTerritoryCode”: “ON”,“provinceOrTerritoryObj”: {“code”: “ON”,“name”: “Ontario”,“type”: “province”,“region”: “Central Canada”,“capital”: “Toronto”}},{“siteId”: “ON002”,“site”: “Algoma Central Engine House”,“description”: “A well-preserved example of a brick engine house, and the first in Canada to have an internal turntable”,“date”: 1912,“dateType”: “completed”,“image”: “https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Algoma_Central_Engine_House_23.JPG/320px-Algoma_Central_Engine_House_23.JPG”,“location”: “Sault Ste. Marie”,“latitude”: “46.5281611”,“longitude”: “-84.3505389”,“designated”: 1992,“provinceOrTerritoryCode”: “ON”,“provinceOrTerritoryObj”: {“code”: “ON”,“name”: “Ontario”,“type”: “province”,“region”: “Central Canada”,“capital”: “Toronto”}},{“siteId”: “ON003”,“site”: “Algonquin Provincial Park”,“description”: “The first provincial park in Canada, noted for its pioneering role in park management, visitor interpretation programs and the development of park buildings and structures, as well as its role in inspiring artists such as the Group of Seven”,“date”: 1893,“dateType”: “established”,“image”: “https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Algonquin_Cache_Lake_Lookout.JPG/320px-Algonquin_Cache_Lake_Lookout.JPG”,“location”: “Nipissing”,“latitude”: “45.58417”,“longitude”: “-78.35833”,“designated”: 1992,“provinceOrTerritoryCode”: “ON”,“provinceOrTerritoryObj”: {“code”: “ON”,“name”: “Ontario”,“type”: “province”,“region”: “Central Canada”,“capital”: “Toronto”}},… …] HINT: Consider using the .filter() Array method as well as the .toUpperCase() / .toLowerCase() and .includes() String methods for your solution The purpose of this function is to return an array of objects from the “sites” array whose “region” value matches the “region” parameter. However, it is important to note that the “region” parameter may contain only part of the “region” string, and case is ignored. For example: getSitesByProvinceOrTerritoryName(“Prairie Provinces”);orgetSitesByProvinceOrTerritoryName(“prairie provinces”); would return all the sites from your “sites” array whose “region” property contains the string “Prairie Provinces” or “prairie provinces” (ignoring case), i.e., all Prairie Provinces’ sites from “sites” array would be returned. Once you have completed the above four functions, test them at the bottom of your file by first invoking the “initialize()” function, then the others (since they all need the “sites” array to be filled with data). NOTE: You should be able to run this file using the command “node modules/data-service.js” If the correct data is returned and you’re satisfied that everything is working correctly, you can delete your testing code. Now, we can begin to refactor our functions to use “Promises“. Finally, we must make sure this file functions as a “module“, either by manually adding all 5 functions to the “module.exports” object individually, or by assigning them at once using an object literal shorthand, ie: module.exports = { initialize, getAllSites, getSiteById, getSitesByProvinceOrTerritoryName, getSitesByRegion } The final part of this assignment is to create a “simple web server” that makes our data available. For now, this will simply involve returning the data – we will focus on “rendering” actual HTML pages in future assignments. To begin:From this point on, we can begin creating a simple web server using Express.js that features simple GET routes. However, before the server starts (ie: the app.listen() function is invoked), we must ensure that the “sites” array has been successfully built within our “data-service” module. Therefore, we must invoke the siteData.initialize() function and make sure it has completed successfully (ie “resolves”) before we execute our app.listen() function. NOTE: Even though we do not have any routes configured, we should be able to start the server using the command “node server.js” Finally, ensure that the following routes are configured in your server.js file: With your routes complete, you should be ready to hand in our assignment. To see a completed version of this app running, visit: https://as2-322-sample.vercel.app/ /********************************************************************************* WEB322 – Assignment 02** I declare that this assignment is my own work in accordance with Seneca’s* Academic Integrity Policy:** https://www.senecacollege.ca/about/policies/academic-integrity-policy.html** Name: ______________________ Student ID: ______________ Date: ______________*********************************************************************************/
In this assignment, students will create a Node.js application that uses the built-in “fs” and “readline” modules to interact with files and directories. This program will read data from a file or directory specified by the user, analyze the content, and generate a report in the console. To begin this assignment, make sure you have installed both Visual Studio Code and Node (ie: you should be able to run programs written in JavaScript from the Integrated Terminal in Visual Studio Code using the command “node filename.js“) (Assignment Folder) planets – Earth.txt – Jupiter.txt – Mars.txt– Mercury.txt – Neptune.txt – Saturn.txt – Uranus.txt– Venus.txt a1.js milky-way.txt solar.txt With our files / folders in place, we can begin editing a1.js. The first thing we must do is to read the files and folder(s) in the CURRENT (i.e. assignment folder) and list them in terminal. This can be done using the built-in “fs” module as mentioned in the notes. If the user run the a1.js using Node .js, we must process to read the current (‘.’) directory to get the files and folders in the current directory and show a menu in terminal so the user can work with the menu in next step. The following is what we should show in terminal:NOTE: If the directory cannot be read, output the error to the console using “console.log(err.message);” The second thing we must do is determine whether the user wishes to analyze a file or directory. This can be done using the “readline” module as mentioned in the notes. The prompts for the user should be the following (sample user responses in red):NOTE: For now, we will simply allow the user to enter a file or directory NAME from the menu created in the last step (one case at a time): If the user enter a file name (e.g. “solar.txt” or “milky-way.txt”), then we must process the file name that the user entered (“solar.txt” from the example above) to generate the following report.NOTE: If the file cannot be read, output the error to the console using “console.log(err.message);” Assuming that the following report was generated from the provided “solar.txt” file, the user should see the below information in the console (instead of the “TODO” output created in Step 3): HINTS: To determine a path is file of directory, we use: To get the contents of the file as a string without any newline characters, the following code may be used: Similarly, to get an array of words from the file contents (string), the below code can be used: If the user enters a directory name (e.g. “planets” for directory planets), then we must show all files and folders in this sub directory (similar to Step 2) and show them in one line and separated with comma (,). The sample output in terminal: Using Node.js process ‘exit’ event (handler) to output the current directory in operating system to terminal when the Node.js process is about to exit, i.e., show the following (as example) in terminal when the program stops after analyzing a file, showing files in a directory, or showing an error message: Hard coding will result in penalties or a zero-mark for the assignment. So, make sure that there is not hard coded code in your assignment 1. For example, if we change the file and directory names in the project (as shown below), the a1.js must keep working: (Assignment Folder) innerPlanets – Earth.txt – Mars.txt– Mercury.txt– Venus.txt outerPlanets – Jupiter.txt– Neptune.txt – Saturn.txt – Uranus.txta1.js space.txt
This assignment is designed to have you practice working with HTML Forms via HTML, CSS, and JavaScript. We will continue to iterate on your previous Assignment 4 and 5 Music App. You are asked to update the design of your fictional Music App. This time, you will add some HTML Forms, including: You must do all the work for this assignment on your own. You may consult your notes, use the web for inspiration, but you should not copy code directly from other sites, use AI, or work with other students. If you need help, ask your professor. Newsletter Sign-up Form A common requirement of many websites today is the ability to have users sign up for a newsletter. This is a simple form that allows a user to enter their Email address and subscribe. Here are a few examples for you to consider: Create a footer in your main page and include a simple form that allows the user to sign up for a newsletter. Make sure that the user can’t submit invalid data. To simulate submitting a form, you should POST to https://httpbin.org/post (see https://httpbin.org for info). Requesting a New Artist Add a new page, and links from the main page, to allow a user to Request a New Artist. On this page, create a form that allows the user to specify the artist they would like to see added to the app. This should include: Make sure your form uses proper labels, types, attributes, names, don’t allow the user to input invalid data, etc. Also make sure your form is styled properly so it is easy to read and use. You will be marked on the design and effectiveness of your form. To simulate submitting a form, you should POST to https://httpbin.org/post (see https://httpbin.org for info). Use a copy of the website starter project in the assignment-4 ZIP file. Install all dependencies by running the following command in the root of the assignment (e.g., in the same directory as package.json): npm install Your code should all be placed in the src/ directory. You can start a local web server to test your code in a browser by running the following command: npm start This will start a server on http://localhost:8080, which you can open in your web browser To stop the server, use CTRL + C When you are finished, run the following command to create your submission ZIP file: npm run prepare-submission This will generate submission.zip, which you can hand in on Blackboard.
This assignment is designed to have you practice building more complex HTML and CSS layouts. We will continue to iterate on your previous Assignment 4 Music App static and dynamic web content. You are asked to update the design of your fictional Music App. This time, instead of displaying your products in an HTML table, you will create visual product “cards” that show an image, song name, year, and duration. You must do all the work for this assignment on your own. You may consult your notes, use the web for inspiration, but you should not copy code directly from other sites, or other students. If you need help, ask your professor.Assignments are to be submitted by the due date posted on the blackboard. All late submissions will be assessed a penalty of 25% of the total possible grade for the assignment, regardless of the number of hours late up to but not beyond 72 hours. After 72 hours, the assignment will be assessed as zero(0). Assignments should be submitted on time, on a regular basis, to enable you to stay on track within the class. THERE ARE NO EXCEPTIONS TO THE LATE MARK PENALTY. Cards Cards on the web, much like trading- or playing cards, are rectangular areas that allow you to visually present a lot of related data. We often see them used in online stores, social media, and anywhere that we want to mix images, titles, and text in a rectangle. Here are some real-world examples from Spotify, Amazon, SoundCloud, and airbnb: There are lots of resources you can use to learn more about creating a card, for example: Update Your Store to Use Cards Modify your solution to Assignment 4 in order to replace the HTML table with rows of cards. To do this, you should follow these steps: Use CSS classes on your card’s elements in order to apply colours, fonts, margins, padding, borders, etc. until you have something that you think looks good. Make sure you optimize the images so they are not too big to download (i.e., don’t use a 5000×6000 image in a card that uses 400×200). You can use https://squoosh.app/ for images that you download. Or you can also use a trick with https://unsplash.com/ images to resize them automatically via the URL. For example, this bike image https://unsplash.com/photos/tG36rvCeqng. Here’s the full-sized image https://images.unsplash.com/photo-1485965120184-e220f721d03e (it’s 3.8M in size, and 4440×2960). We can reduce that image by adding some parameters to the image URL: ?auto=format&fit=crop&w=750&q=80 to crop and resize it to 750 pixels wide, and reduce the quality a bit to 80%, like this: https://images.unsplash.com/photo-1485965120184-e220f721d03e?auto=format&fit=crop&w=750&q=80 See https://unsplash.com/documentation#dynamically-resizable-images for more details. function createSongCard(song) {// Create a to hold the cardconst card = document.createElement(‘div’);// Add the .card class to the card.classList.add(“card”); // Create a song image, use the .card-image classconst songImg = document.createElement(‘img’);songImg.src = song.imageUrl;songImg.classList.add(“card-image”);songImg.appendChild(songImg); // … rest of your card building code here // Return the card’s element to the callerreturn card;} Unlike in previous assignments, the CSS and visual styling of your assignment does matter this time. Take your time to make something visually pleasing and functionally complete. Use your copy of the website starter project in the assignment-4 ZIP file. Install all dependencies by running the following command in the root of the assignment (e.g., in the same directory as package.json): npm install Your code should all be placed in the src/ directory. You can start a local web server to test your code in a browser by running the following command: npm start This will start a server on http://localhost:8080, which you can open in your web browser To stop the server, use CTRL + C When you are finished, run the following command to create your submission ZIP file: npm run prepare-submission This will generate submission.zip, which you can hand in on Blackboard.
You are asked to create an educational/informational website about one of your favourite Books, Television Shows, or Movies. You will pick a Book/TV Show/Movie and research it online. You will then create a multimedia website that uses resources about your chosen musical artiste/genre (e.g., images, audio, and video) from open web archives. The web is full of both proprietary and open-licensed resources. The former cannot be reused by you: you can’t take an image or logo from someone else’s site and use it on your own. This is a copyright violation. However, there are also many open resources that you can copy and reuse. Learning how to find and use these correctly is important when building your own web content. A high value will be placed on academic integrity and adherence to copyright law in your work on this assignment. Please take it seriously. Assignments are to be submitted by the due date posted on the blackboard. All late submissions will be assessed a penalty of 25% of the total possible grade for the assignment, regardless of the number of hours late up to but not beyond 72 hours. After 72 hours, the assignment will be assessed as zero(0). Assignments should be submitted on time, on a regular basis, to enable you to stay on track within the class. THERE ARE NO EXCEPTIONS TO THE LATE MARK PENALTY. Step 1. Choose a Book/TV Show/Movie Pick a Book/TV Show/Movie that you like. It can be modern or historical, popular, or obscure. Ideally you should choose something that has meaning to you so that you can bring your own experience into play. You must work on your own (i.e., you can’t partner with other students in the course or other sections). Given the number of possible options, it would be surprising if two students chose the same one. Step 2. Research Research your chosen Book/TV Show/Movie. Learn as much as you can. Take notes to help you with the creation of your website. You may NOT copy any text word-for-word, only use it as background material. Use at least 4 separate web resources in your research (i.e., you can’t use Wikipedia and be assume you’ve done enough). Try to find reputable sources of information. Take notes as you do your research on these sites and keep track of all the sites/URLs you use. You will need to properly cite these in your about.html page (see below). Step 3. Write a Research Summary Write a 750-to-1000 word summary of your research. Your goal is to educate a general audience about your chosen artist/genre, who likely won’t know anything. Give the reader an overview and summary, but also include specific details, quotes, etc. You should define any terms you use, and help your reader understand the concepts you discuss. You may NOT copy/paste any text or use AI. All words must be written by you. Step 4. Convert to Markup Convert your text to HTML5 markup. Make use of any and all appropriate HTML elements https://developer.mozilla.org/en-US/docs/Web/HTML/Element. For example, if you use lists or acronyms, quotes or technical terms, dates or definitions, etc. you should make use of the associated HTML5 elements. You will be graded on the appropriate use of HTML5 elements—you can’t make everything a or . In your final markup, you should try to use most of the following HTML5 semantic elements below (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element): You will be marked on your knowledge and use of these elements, and how well you have used them to markup your text. You may NOT submit a series of plain text paragraphs with no other elements. Spend some time choosing and implementing your markup. Step 5. Add Media Find supporting media resources to help educate the reader on your topic. Media helps tell a story and is one of the secret powers that the web has over other print media. Here’s an example web page from the Globe and Mail newspaper that uses a mix of text and media well: https://www.theglobeandmail.com/canada/article-the-last-lighthouse-keeper-why-a-nova-scotian-couple-refused-to-leave/ In this site you see all of the following HTML5 and media being used: Your site doesn’t need to be this elaborate, but hopefully you get some ideas to help guide your use of text and media. You can use any open licensed media resource that allows reuse but may not use copyright materials. How do you know if something is copyright? Everything is copyright by default! Unless you are told you can reuse something that you find, assume that you can’t. Open licensed materials will be marked as such. Here are some links to help you find open licensed media: You are asked to include the following open licensed resources on your page: Use appropriate HTML to include these resources in your site along with the text you have written. You may link to external URLs where applicable (i.e., you don’t have to download and use resources if they are publicly hosted). Make sure you do the following: Step 6. Add A Basic Stylesheet This assignment is not about the page’s style (fonts, colours, etc). We will focus on style when we look at CSS later in the course. However, you are encouraged to use one of the various “class-less” CSS stylesheets described here: https://css-tricks.com/no-class-css-frameworks/ These stylesheets can be included in the of your document, for example: Try experimenting with some of these stylesheets to find one that makes your page look good to you. Use the website starter project in the assignment ZIP file. Install all dependencies by running the following command in the root of the assignment (e.g., in the same directory as package.json): npm install Your code should all be placed in the src/ directory. You will find 3 HTML files there now, which should be updated by you as follows: NOTE: you are welcome to create other pages if you need them. Just remember to link all of your pages together. You can start a local web server to test your code in a browser by running the following command: npm start This will start a server on http://localhost:3000, which you can open in your web browser To stop the server, use CTRL + C When you are finished, run the following command to create your submission ZIP file: npm run prepare-submission This will generate submission.zip, which you can hand in on Blackboard.
This assignment will help you learn and practice JavaScript Arrays and Objects, as well as working with real data.Please do this assignment on your own. You should not work in partners, use AI, and all code must be written by you. Gaining experience with JavaScript and the web takes a lot of personal practice, and working on these problems yourself will help build your skill.To hand in your work, see the “Submitting your Assignment” section below.Please read and follow all instructions below carefully. If you have problems or questions, talk to your professor.Assignments are to be submitted by the due date posted on the blackboard. All late submissions will be assessed a penalty of 25% of the total possible grade for the assignment, regardless of the number of hours late up to but not beyond 72 hours. After 72 hours, the assignment will be assessed as zero(0). Assignments should be submitted on time, on a regular basis, to enable you to stay on track within the class. THERE ARE NO EXCEPTIONS TO THE LATE MARK PENALTY. Just as we did with assignment 1, this assignment once again uses “Unit Testing”, and relies on a number of dependencies, which must be installed on your computer.If you haven’t already watched it, please see this walk-through and discussion of how to setup and run the tests: https://www.youtube.com/watch?v=8RuLrmVDOw8In order to install these dependencies, you must first install Node.js on your computer. See installation instructions at:https://nodejs.org/en/You can install the LTS (Long Term Support) version of node.js, which is currently 18.x.Open a command line terminal (e.g., cmd.exe) and navigate (i.e., cd) to the directory where you have unzipped the assignment files. When you type dir (Windows) or ls (Linux/macOS) you should see the package.json file.In this directory, install the assignment dependencies using the Node.js Package Manager command, named npm. The npm command is installed along with node.js. In your terminal, type the following:npm installThis will download and save all the necessary dependency files to a folder named node_modules/ in the current directory. You should see a node_modules folder next to your package.json.If you have trouble getting “npm install” to work:If you need help, ask your classmates and/or talk to your professor.The assignment has a number of components:You are asked to complete the code in the file src/observations.js. The tests use data in src/data.js, which you’ll use in many of your solutions. A basic file layout has already been created with various functions and variables. Also, detailed comments have been left above each function you need to implement.In addition, unit tests have been written for each function. They are named src/problem-00.test.js, src/problem-01.test.js and so on.These tests will help you determine if your code is working correctly: running the tests should produce the output that the tests expect, and that tests will either pass or fail.To run the tests, use the npm command:npm testYour goal is to get all of the tests to pass correctly. If a test fails, pay attention to the error messages that get produced, what was expected vs. what was actually returned, and make corrections to your code.If you are going to run your tests over and over as you make changes to src/observations.js, you can run the tests so they automatically watch for changes, and re-run whenever you save your file:npm run test-watchYou can stop the tests from running using CTRL + c.Next, you can run a single test instead of all tests:npm test problem-00This will only run the tests in problem-00.test.js, making it easier to work on only one problem at a time.You can also watch a particular test, and re-run it when the code is saved:npm run test-watch problem-00In addition to running unit tests, you can also run a linter called eslint. Linting helps to find and remove common errors in code, for example, missing a semi-colon, or forgetting to declare a variable.To run eslint, use the npm command:npm run eslintIf there are no problems, there will be no output. If there is any output, pay attention to what it says, so you can make corrections. For example:assignment1/assignment1.js 18:9 error ‘x’ is defined but never used no-unused-varsHere, we see a lint error, which has various information:Your code should have no lint errors when you submit it.Source code needs to be properly structured, use consistent indenting, semi-colons, etc. Doing so makes it easier to understand, read, and debug your code.Your code must be properly and consistently formatted. You can do it by hand, or, you can use Prettier (https://prettier.io/) to do it automatically.There are two ways to use Prettier. First, using the npm command:npm run prettierThis will rewrite your files to use proper formatting. NOTE: running this command will overwrite your file, so make sure you have saved your work before you run it.The second way to run Prettier is using the Prettier extension, and format-on-save. If you install the recommended extensions and settings for this project, saving your file will result in Prettier automatically fixing your code for you.Debugging Code and Tests You can also use VSCode’s built in debugging tools to run and debug your code, or the test code, within the editor, step through code, inspect variables, examine call stacks, etc. See the instructions at: https://github.com/microsoft/vscode-recipes/tree/master/debugging-jest-tests#debugging-all-testsWhen you have completed your assignment, you need to prepare your submission. To do so, use the npm command:npm run prepare-submissionYou can upload the resulting submission.zip file to Blackboard for submission.
This assignment will help you learn and practice JavaScript syntax, and use built-in and user-defined functions. It will also help you set up your web development environment and learn some industry standard tooling for JavaScript.You must do this and all future assignments on your own. You should not work in partners/groups, not use ChatGPT, Copilot, or other AI coding assistants, and all code must be written by you. Gaining experience with JavaScript and the web takes a lot of personal practice and working on these problems yourself will help build your skill.If you get stuck, please speak with your professor. Do not copy other student work. It is important that you learn and understand the concepts in the assignment.NOTE: you can also watch a video on YouTube that shows how to setup and work on this assignment, see: https://www.youtube.com/watch?v=8RuLrmVDOw8To hand in your work, see the “Submitting your Assignment” section below.Assignments are to be submitted by the due date posted on the blackboard. All late submissions will be assessed a penalty of 25% of the total possible grade for the assignment, regardless of the number of hours late up to but not beyond 72 hours. After 72 hours, the assignment will be assessed as zero(0). Assignments should be submitted on time, on a regular basis, to enable you to stay on track within the class. THERE ARE NO EXCEPTIONS TO THE LATE MARK PENALTY. This assignment uses a technique called “Unit Testing,” and relies on a number of dependencies, which must be installed on your computer. A dependency is a library, tool, or other piece of software that is needed in order to build, test, and run another piece of software.JavaScript and web projects often rely on hundreds or thousands of dependencies, and getting used to installing and using them is an important step.In order to install these dependencies, you must first install Node.js on your computer. See installation instructions at:https://nodejs.org/en/You can install the LTS (Long Term Support) version of node.js, which is currently 18.17.1, although any 18.x.x version should work.Open a command line terminal (e.g., cmd.exe) and navigate (i.e., cd) to the directory where you have unzipped the assignment files. When you type dir (Windows) or ls (Linux/macOS) you should see the src directory, package.json file, etc.In this directory, install the assignment dependencies using the Node.js Package Manager command, named npm. The npm command is installed along with node.js. In your terminal, type the following:npm installThis will download and save all the necessary dependency files to a folder named node_modules/ in the current directory. You should see a node_modules folder next to your package.json.If you have trouble getting “npm install” to work:If you need help, ask your professor for help.You will need a proper code editor to develop for the web. The most popular choice is Microsoft Visual Studio Code (aka, VSCode). VSCode runs on Windows, Linux, and macOS. You can download and install it for free from:https://code.visualstudio.com/NOTE: VSCode is not the same as Visual Studio. You should have both installedA number of extensions are available that will work automatically with the scripts and configuration in this project, and are recommended:When you open this project’s folder, VSCode should offer to install these recommended extensions. Once these are installed VSCode will automatically show you errors as you type, automatically format your code when you save, and show you spelling mistakes in your code comments and names.If you want to use a different editor, that’s fine. Confirm with your professor that it will work for our needs. You may not use Notepad, for example.The assignment has a mix of project configuration and source code. All of the config files are in the project root, and the source code is contained in the src/ directory (this is a common pattern). Your code goes in the src/solution.js file. The other files in this directory are unit tests, which you should read, but don’t need to modify.You are asked to complete the code in the file src/solutions.js. A basic file layout has already been created with various functions and variables. Also, detailed comments have been left above each function you need to implement.In addition, unit tests have been written for each function. They are named src/problem-00.test.js, src/problem-01.test.js and so on. A Unit Test tests the smallest possible unit of a software system or component, and we write many small Unit Tests to prove that our implementation works as we expect.For example, we expect 2 + 2 to return 4, not 5. We can write a unit test for this to confirm that our code does what we expect. See http://softwaretestingfundamentals.com/unit-testing/ for more info about unit tests.These tests will help you determine if your code is working correctly: running the tests should produce the output that the tests expect, and the tests will either pass or fail.To run the tests, use the npm command:npm testYour goal is to get all of the tests to pass correctly. If a test fails, pay attention to the error messages that get produced, what was expected vs. what was actually returned, and make corrections to your code in assignment1.js.If you are going to run your tests over and over as you make changes to src/solutions.js, you can run the tests so they automatically watch for changes, and re-run whenever you save your file:npm run test-watchYou can stop the tests from running using CTRL+cNext, you can run a single test instead of all tests:npm test problem-00This will only run the tests in problem-00.test.js, making it easier to work on only one problem at a time.You can also watch a particular test, and re-run it when the code is saved:npm run test-watch problem-00In addition to running unit tests, you can also run a linter called eslint. Linting helps to find and remove common errors in code, for example, missing a semi-colon, or forgetting to declare a variable.To run eslint, use the npm command:npm run eslintIf there are no problems, there will be no output. If there is any output, pay attention to what it says, so you can make corrections. For example:assignment1/assignment1.js 18:9 error ‘x’ is defined but never used no-unused-varsHere, we see a lint error, which has various information:Your code should have no lint errors when you submit it.Source code needs to be properly structured, use consistent indenting, semi-colons, etc. Doing so makes it easier to understand, read, and debug your code.Your code must be properly and consistently formatted. You can do it by hand, or, you can use Prettier (https://prettier.io/) to do it automatically.There are two ways to use Prettier. First, using the npm command:npm run prettierThis will rewrite your files to use proper formatting. NOTE: running this command will overwrite your file, so make sure you have saved your work before you run it.The second way to run Prettier is using the Prettier extension, and format-on-save. If you install the recommended extensions and settings for this project, saving your file will result in Prettier automatically fixing your code for you. Debugging Code and Tests You can also use VSCode’s built in debugging tools to run and debug your code, or the test code, within the editor, step through code, inspect variables, examine call stacks, etc. See the instructions at: https://github.com/microsoft/vscode-recipes/tree/master/debugging-jest-tests#debugging-all-testsYour assignment is complete when all tests are passing, and there are no more linting errors. When you have completed your assignment, you need to prepare your submission. To do so, use the npm command:npm run prepare-submissionThis will do a number of things automatically for you:You can upload submission.zip to Blackboard for submission.You may be wondering about some of the other files in this project. While you don’t need to modify them, or use them directly, here is what each one does:node_modules/ – the installed dependencies necessary to run prettier, eslint, etc., installed when your run npm install..eslintrc.js – configuration for eslint, see https://eslint.org/docs/user-guide/configuring.prettierrc.js – configuration settings for prettier, see https://prettier.io/docs/en/configuration.htmlpackage.json – node.js package info, dependencies, build scripts, see https://docs.npmjs.com/files/package.jsonpackage-lock.json – a generated file with dependency version information, see https://docs.npmjs.com/files/package-lock.json
Your goal in this assignment is similar to the goal of the previous assignment (Homework 4) in which you trained FCNs to classify images in the FashionMNIST data set. In this assignment, however, you will have a budget of weights that you can incorporate into your neural network model and you will compare FCNs vs. Convolutional Neural Networks (CNNs). Figure 1 First 64 Images in FashionMNIST Dataset. Some comments and hints Here are some useful comments and facts to guide you along the way. 1. Many of the components of the previous assignment and the setup in the template HW4_HelperTemplate.ipynb will hold for this assignment as well. Changes that you will need to make will be in the network setup and input data into your network. 2. The hyperparameter tuning that you performed in the previous assignment should also be useful to guide you in creating the FCN 100K baseline. 3. You do not need to use a precise number of weights in your network variants. An approximate order of magnitude will be fine as well (e.g. 87,800 could be considered as 100K). Tasks Since this is the last assignment in the course, the definition of the tasks is more open-ended to allow you to design the neural networks in a less supervised way. 1. With the constraint of incorporating up to 100K weights in the design of your FCN model, perform hyperparameter tuning to achieve FCN model whose testing classification accuracy is above 88% on the testing set. 2. Reduce by half the number of weights in the FCN 100K model to create FCN 50K, and also double the number of weights to create FCN 200K. Train these models similarly to FCN 100K and study the accuracy of these models by comparing the different FCN variants. 3. Implement and train a CNN 100K model with convolutional, pooling, and FC layers with up to 100K weights. Perform hyperparameter tuning and compare the testing classification accuracy of the model with FCN variants. 4. Reduce the number of weights in the CNN 100K model to create CNN 50K, CNN 20K, and CNN 10K. Train these models similarly to CNN 100K and compare their testing classification accuracy with all CNN and FCN variants. In addition to accuracy, you may want to include efficiency, in terms of the number of weights and training time, in your discussion. 5. Bonus (+2 points): Pick a CNN variant from above and then pick several input samples from different classes. Visualize some of the feature maps of the convolutional layers for these samples (e.g. display the feature maps in a grid of nxn). Explain your observations.
Your goal in this assignment is to train Fully Connected Deep Neural Networks (FCNs / DNNs) to classify images in FashionMNIST data set. FashionMNIST is similar to MNIST that you worked with in assignment 3. As in MNIST, each sample is a grayscale 28 × 28 image and the training set consists of 60K images and the testing set consists of 10K images. Images depict articles of clothing that belong to a class from one of 10 classes. It is a fundamental benchmark dataset in machine learning as well. In comparison to MNIST, FashionMNIST classification is more challenging. This warrants more powerful and nonlinear models. Here you will implement FCNs toward this aim. Figure 1 First 64 Images in FashionMNIST Dataset. Some comments and hints Here are some useful comments and facts to guide you along the way. 1. You are provided a code template (HW4_HelperTemplate.ipynb) for FCN for FashionMNIST. Your goal will be to complete the template into a working model and decide on the architecture of your model (i.e. number of layers and neurons in each layer). Keep in mind that the more layers you will be adding the more weights you will have to train which will result into a higher computational complexity which is not necessarily beneficial for classification accuracy and for your experiments. Once you have completed this you will perform hyperparameter tuning and analyze the classification for this dataset. 2. In the provided template, the dataset is loaded with torchvision, which contains multiple datasets such as MNIST, FashionMNIST, and has useful transformations (e.g. normalization) and loads data as Pytorch tensors. The training data is split into Training and Validation datasets and loaded into DataLoader as batches. DataLoader allows for easy iteration over the batches and samples within it. Batches are useful for setting when weights updates will occur and also if you are using GPU to speed up computation. You will need to define the batch size you want for your training and test sets. 3. The input data (features) are saved as 28 × 28 images. You will need to reshape images into a vector of 784 which will be input into your network. 4. For implementation of different optimizers, regularization, initialization and normalization, refer to example codes and pytorch library tutorials (https://pytorch.org/tutorials/) for examples. Tasks 1. Design your FCN model to have an adjustable number of hidden layers and neurons in each layer with relu activation. The first (input) layer should be of dimension 784 and the last (output) layer of 10 corresponding to 10 classes. Use Cross Entropy loss to perform the classification and SGD optimizer with learning rate as an adjustable parameter. Set the number of epochs as an adjustable parameter and train the network. Inspect the training loss curve and include validation of accuracy, on the validation set, at each epoch. Perform testing at the end of training. In summary, your parameters should allow you to vary the number of training batches, number of layers, number of neurons in each layer, learning rate, number of training epochs. You can add more parameters as you see fit. 2. Find a configuration of the FCN (by varying the adjustable parameters) that trains in reasonable time (several minutes is reasonable) and results in reasonable training loss curve and testing accuracy (at least above 85% testing accuracy). These parameters will be your baseline configuration/parameters. 3. Perform hyperparameter tuning from the baseline, trying the following configurations. Report your results in terms of tables, plots of loss curves and accuracy curves. (a) Consider different optimizers including RMSProp, Adam and SGD with different learning rates. You can find the corresponding functions in the torch.optim library. Log your training loss, validation and test accuracy. Compare these optimizers, and observe which optimizer is most suitable for your FCN. Try to explain why. (b) Analyze the overfitting/underfitting situation of your model. Include Dropout regularization and discuss whether this improves performance. (c) Consider different Initializations, such Random Normal, Xavier Normal, Kaiming (He) Uniform. Discuss how these initialization affect the training process and the accuracy. (d) Include normalization such as Batch Normalization. Discuss the effect of the normalization on the training process or testing accuracy. 4. Bonus (+2 points): Perform hyperparameter tuning of FCN to achieve testing accuracy of > 90% for FashionMNIST and > 98% for MNIST. Report your configurations and try to explain them. Apply the most successful classifier from assignment 3 to FashionMNIST (on full dimension of 784 features) and compare with results above.
Basic of Econometrics I Overview This lecture covers: Basics of Ordinary Least Squares (OLS) Understanding and identifying Omitted Variable Bias (OVB) The importance of including Control Variables Interpreting Regression Output Tables Ordinary Least Squares (OLS) What is OLS? OLS estimates the relationship between a dependent variable y and one or more independent variables x. Simple linear regression model: yi = β0 + β1xi + ui βo: intercept, β1: slope, ui: error term The goal is to find the line that best fits the observed data. OLS Estimation OLS chooses and to minimize the sum of squared residuals: Closed-form. solutions: Omitted Variable Bias (OVB) What is Omitted Variable Bias? OVB occurs when a relevant variable is left out of the regression model. This omitted variable must: Affect the dependent variable (y) Be correlated with an included independent variable (x) Example of OVB Suppose we regress income on years of education. If ability is omitted and is positively correlated with both education and income, then the OLS estimate of education is upward biased. Control Variables Why Use Control Variables? Control variables help account for omitted variable bias. By including them, we hold other factors constant, isolating the effect of the variable of interest. Example: yi = β0 + β1xi + β2zi + ui Example with Control Variables Example: Regressing income on education without experience may bias results. Including experience as a control improves estimate accuracy.
32555 - Fundamentals of Software Development Subject description This subject provides a foundation in modern software development, covering the theoretical and practical aspects of software modelling and development methods, tools, and techniques. You will learn how to analyse, design, develop, and evaluate software programs that implement realistic but manageably small-scale software requirements. Teaching is delivered through pre-recorded lectures and demos, hands-on workshops, and mini-lectures in these workshops. You are encouraged to practice peer learning and collaboration within and outside the classroom; however, you must complete the individual tasks and your part of the group tasks independently. By completing this subject, you will understand the importance of foundational software development practices and be able to apply programming skills to build software that meets the defined criteria. Availabilities Click on Select availability in the top right of screen and choose from the location, attendance mode and session options. Learning outcomes Upon completion of this subject, graduates will be able to: 1. Analyse and document system requirements based on user needs and context. (B.1) 2. Use a range of modelling and programming techniques and tools to propose software system for users. (C.1) 3. Design a software system to meet the specified user requirements. (C.1) 4. Create software programs to address the specified user requirements. (D.1) 5. Apply appropriate testing techniques to ensure the quality of the software system. (D.1) Learning and teaching activities Students will learn foundation level software development practices through online lectures and hands-on workshops (tutorials and labs). Students will prepare for the workshops by listening to online lectures and studying related material to effectively participate in the workshop activities. In workshops, the software modelling and development methods, tools, and techniques will be demonstrated by the tutors before being applied by students to different scenarios. Feedback is regularly provided throughout the teaching sessions in several different formats: discussions of the workshop questions, feedback on the software models and programs developed in the laboratory and as a part of the formal assessment tasks. As the subject progresses, students gain sufficient foundational level competence to complete software development tasks within a small range of acceptable solutions.
Project #1 – Interpretation of financial statements and the accounting cycle to capture economic events Question 1 This case involves interpretation of Walmart 2025 annual report. https://corporate.walmart.com/content/dam/corporate/documents/newsroom/2025/04/24/walmart-releases-2025-annual-report-and-proxy-statement/walmart-inc-2025-annual-report.pdf Refer to the consolidated financial statements for financial year ended 31 January 2025. Required (a) Refer to the company’s consolidated income statement. (i) What is company’s consolidated net profit after tax in 2024? What is company’s consolidated net profit after tax in 2025? (ii) Based on net profit after tax, did the company’s financial performance improve from 2024 to 2025? Briefly explain (maximum 150 words) why did the company’s net income after tax change from 2024 to 2025. Focus on the information on the consolidated income statement and notes to the accounts. You are not required to search for information beyond the annual report. You should use the consolidated net profit after tax (Do NOT use consolidated net income attributable to Walmart). (b) Refer to the company’s consolidated statement of financial position (use the information in the “group” column). Your response should not exceed 70 words. (i) Write out the accounting equation as at 31 January 2024 (i.e. Assets = Liabilities + Equity). How did the company finance its assets as at 31 January 2024? (ii) Write out the accounting equation as at 31 January 2025 (i.e. Assets = Liabilities + Equity). How did the company finance its assets as at 31 January 2025? (c) Refer to the company’s consolidated statement of cash flow. Consider its (i) cash flow from operations, (ii) cash flow from investing activities and (iii) cash flow from financing activities. Briefly comment (maximum 150 words) on the company’s overall cash flow generation in 2025. Is the overall cash flow generation healthy or weak in 2025? (d) Using financial statements for year ended 31 January 2025, what is the financial impact (consider the impact (magnitude in dollars) on the net income after tax, statement of financial position and cash flow generation) :- (i) if the company write off the entire prepaid expenses to the income statement? (ii) 60% of the net accounts receivables defaulted before the financial year end? Assume no previous provision for doubtful debts were made. Ignore tax effects. Note: You should use the accounting equation to help you to quantify the dollar impact on the financial statements. Question 2 (Prepare financial statements for 2 consecutive years) On 1 January 20x1, Company XYZ was incorporated. This question contains two parts. Part One On 1 January 20x1, XYZ has a share capital of $500,000 and cash of $500,000. The following transactions occurred for year ended 31 December 20x1:- 1) On 2 January 20x1, XYZ purchased inventory of $100,000 (paid in cash). 2) On 3 March 20x1, XYZ made a credit sales of $170,000. 3) Refer to item (2). The cost of sales is $60,000 4) From the previous months sales made in 20x1, XYZ collected $90,000 cash from its customers. 5) On 31 December 20x1, XYZ paid $120,000 for two-years rent in advance (covering the period 1 January 20x2 to 31 December 20x3). Assume each transaction is independent. Ignore the tax effects of the above transactions. Required (a) Prepare the journal entries to reflect the above transactions. (b) Prepare the statement of profit or loss for year ended 31 December 20x1 and the statement of financial position as at 31 December 20x1 to incorporate the above transactions. Part Two In the subsequent year (i,e, for year ended 31 December 20x2), the following transactions occurred in XYZ: - 1) From the previous year sales made in prior year 20x1, XYZ collected $80,000 cash from its customers. 2) On 1 January 20x2, XYZ borrowed $200,000 from a bank. Interest rate is 10% per year. 3) On 5 November 20x2, XYZ declared and paid a cash dividend of $48,000. 4) On 31 December 20x2, XYZ made an adjusting entry related to the prepaid rent. 5) On 31 December 20x2, XYZ accrued the interest expense to the bank loan. Assume each transaction is independent. Ignore the tax effects of the above transactions. Required (a) Prepare the journal entries to reflect the above transactions. (b) Prepare the statement of profit or loss for year ended 31 December 20x2 and the statement of financial position as at 31 December 20x2 to incorporate the above transactions. Question 3 (adapted from 2020 final test) Company GEM is a technology consulting company listed in Singapore. The accounts assistant of Company GEM prepared the following unadjusted income statement for the period 1 January 20x1 to 31 December 20x1 and the unadjusted balance sheet as at 31 December 20x1. Profit and loss account from 1-1-20X1 to 31-12-20x1 (unadjusted) Service Revenue 700,000 Office rental expense (380,000) Depreciation expense (50,000) Net profit 270,000 Statement of Financial Position as at 31-12-20x1 (unadjusted) Cash 200,000 Accounts receivable 100,000 Prepaid insurance 45,000 Gross Property, Plant and Equipment 390,000 Accumulated depreciation (140,000) Total Assets 595,000 Accounts payable 200,000 Unearned revenue 80,000 Ordinary Share capital 100,000 Retained earnings 215,000 Total liabilities and equity 595,000 The Chief Financial Officer of Company GEM reviewed the above unadjusted accounts and found that the following adjustments were not reflected in the unadjusted accounts:- 1) The prepaid insurance of $45,000 was purchased on 1 January 20x1 and it covered a three-years period with effect from 1 January 20x1. No amortization of prepaid insurance was made during 20x1. 2) An accrual for salary expenses of $6,000 was not made in 20x1. 3) On 1 August 20x1, GEM omitted to invoice customer XYZ for $30,000 related to services performed in the previous month. 4) On 10 November 20x1, GEM sold a machinery equipment (Gross cost $90,000 and accumulated depreciation $30,000) for a cash consideration of $50,000. This transaction was not recorded in 20x1. 5) On 20 December 20x1, GEM received $80,000 in advance from its customers for services to be completed later. The $80,000 was recognized as unearned service revenue on 20 December 20x1. As at 31 December 20x1, GEM completed 40% of the services to its customers. No adjustment was performed for the 40% work done and completed as at 31 December 20x1. Assume each transaction is independent. Ignore the tax effects of the above transactions. Company GEM did not declare any dividends during the year 20x1. Required a) Prepare the journal entries to reflect the above adjustments. Narrations are not required. b) Prepare the revised profit or loss statement for the period 1 January 20x1 to 31 December 20x1 and the revised statement of financial position as at 31 December 20x1 to incorporate the above adjustments. Question 4 WBS Problem 7.3A. Company Putnam & Putnam. Aging accounts receivable; write-offs.
Mecánica de Máquinas Primera Evaluación 13 de noviembre de 2023 PROBLEMA 1: (50% de la nota de problemas) En el mecanismo de la figura, la barra de entrada es la número 2. Está conectada por un extremo a la barra fija y por el otro a la barra 3 mediante sendos pares de revolución en los puntos A y B, respectivamente. La barra 3 está conectada con la cuatro mediante un par prismático de guía recta en B. A su vez, la barra 4 está conectada con la barra fija mediante un par de revolución en C. Datos del problema: Determinar: a) Velocidad angular de la barra 4. (4 puntos) b) Aceleración angular de la barra 4. (6 puntos) PROBLEMA 2: (50% de la nota de problemas) El mecanismo de la figura está situado en un plano vertical. Entre la barra 2 y la fija hay un par R en el punto O2 y entre la 2 y la 3 un par R en el punto A. Entre la barra 3 y la 4 hay un par R en el punto B, y entre la 4 y la fija un par P de guía recta y dirección horizontal. Las barras 2 y 3 son homogéneas y sus centros de masas G2 y G3 están en su punto medio. Entre los puntos G2 y G3 hay un muelle de constante de rigidez K = 100 N/m y longitud natural s0 = 0,2 m. Datos del problema: Se pide contestar a las preguntas formuladas en la parte posterior de este enunciado. a) Calcular, mediante el Principio de las Potencias Virtuales, el par aplicado a la barra 2, que provoca el estado cinemático descrito. (4 puntos) b) Fuerzas de reacción (6 puntos)
CHE 354-002 Spring 2015 Final Exam This exam is closed book and notes. This exam is worth a total of 100 points. The individual point values are listed to the left of each question. Additional paper is available from the instructor. A sheet of equations that you may need is attached. You have 150 minutes to complete the exam. Partial credit is available, so SHOW ALL WORK. ( 15 pts.) 1) To study the kinetics of an enzyme-catalyzed reaction, the enzyme was incubated with its substrate and the reaction rate was measured. Additionally, the enzyme and substrate were incubated with three different types of inhibitors (in three separate reactions). The experimental data was linearized on the Lineweaver-Burk plot below. Indicate which of the lines below represents the case with no inhibitor and name the type of inhibitor in the other three cases. a) b) c) d) e) Calculate the KM and vmax for the enzyme reaction above. f) If the enzyme reaction is run in a batch reactor (CS0 = 30 mmol/L) without inhibitors present, how long will it take to reach a conversion of 95%? ( 15 pts.) 2) The elementary reaction A + B → D is to be carried out to obtain a desired product (D). The rate constant for this reaction is k1 = 150*exp(-5,000/T). Unfortunately, under conditions required for the reaction to occur, species B also undergoes a second-order decomposition to form. an undesired product, B → 2U, with ru = k2 CB(2), and k2 = 300*exp(-2,000/T). a) What is the instantaneous selectivity for this system (SD/U)? Your answer must be simplified as much as possible. b) Assuming this is a liquid-phase reaction, describe two different reactor systems (draw a schematic AND describe with words) and operating conditions you would use to maximize the selectivity to D. ( 15 pts.) 3) Consider the set of liquid phase, elementary series reactions to be carried out in a 10 dm3 batch reactor. The reaction occurs at 300K, where k1 = 0.6 h-1 and k2 = 0.25 h-1 . The reaction starts with 4 mol/dm3 pure A. a) Sketch a plot of the concentrations of each species versus time. You don’t have to be exact, just give the shape of each curve. b) How long will it take to reach a maximum concentration of B? c) Assuming the answer to part (b) is 2.5 h (this may or may not be correct), calculate CA, CB, and CC at that time. (25 pts.) 4) The irreversible, elementary gas-phase reaction A + B → C + D takes place in an isothermal (T = 400K) packed bed reactor with pressure drop. Calculate the conversion exiting the reactor. CA0 = 1 mol/dm3, CB0 = 2 mol/dm3, νo = 5 dm3/min, kA(400K) = 0.25 dm6/mol·min, α = 0.03 kg-1, W = 30 kg Repeat for the case in which there is no pressure drop (α = 0). Explain any difference (or lack thereof) between the two answers above. (20 pts.) 5) The exothermic, liquid-phase reaction A → B + C is carried out in a 50 dm3 CSTR with a cooling coil. The feed stream is equimolar in A and B (CA0 = 5 mol/dm3 and νo = 2 dm3/min) and enters the reactor at 300 K. To avoid boiling of the liquid, the temperature in the reactor cannot exceed 350 K. Assume shaft work is negligible. Ethylene glycol enters the cooling coil at 270 K with a very high flow rate. CPA = CPB = CPC = 50 cal/mol·K, Ea = 15,000 cal/mol, ΔHoRx = -10,000 cal/mol, U = 50 cal/ft2·min·K, kA(300 K) = 0.02 dm3/mol·min. a) What is the maximum conversion that you could obtain in this system? b) What surface area must your cooling coil have to maintain the conversion in part (a)? ( 10 pts.) 6) The reaction in problem 6, A → B + C, is to be carried out in a PFR with a co-current heat exchanger instead of the CSTR. Set up the equations that you would need to solve for conversion AND to plot and analyze the reactor and coolant temperatures as a function of PFR volume. Include all equations that you would need to enter into Polymath except for explicit equations defining constants or initial and final conditions.
