[SOLVED] Web222 assignment 4 overview this assignment is designed to have you practice working with html and the dom

 

This assignment is designed to have you practice working with HTML and the DOM in order to create both static and dynamic web content.

 

You are asked to prototype a fictional online store.  Your store will sell several different product categories, and many products in those categories.  Because a store’s products and categories will change frequently, we often separate our data from its UI representation.  This allows us to quickly make changes and have the store’s web site always use the most current inventory information.

 

NOTE: in a real e-commerce web store, our data would be stored in a database.  We will simulate working with a database by using JavaScript Objects and Arrays.

 

 

You need to decide on the following details for your store:

 

 

 

 

 

 

 

Each category needs two things:

 

 

 

 

Each product needs the following things:

 

 

 

 

 

 

 

Your category and product data will go in `src/categories.js` and `src/products.js` respectively.  See these files for technical details about how to code your data.

 

Take some time now to enter all of your store’s data.

 

 

Your store’s HTML file is located in `src/index.html`.  A brief HTML skeleton has been created, and you are asked to fill in the rest using your information above.

 

Some of your site will be static (i.e., coded in HTML directly in index.html) and never change.  Other parts of the site will be dynamic (i.e., created using DOM API calls at run-time) and will update in response to various events and user actions.

 

Here is a basic wireframe of what your site needs to include, and which parts are static or dynamic.  NOTE: don’t worry too much about how it looks.  Focus on the structure and functionality.

 

 

 

Store Name

Store Slogan/Description…

 

Category1        Category2         Category3

 

 

Category1 Name

 

 

 

 

 

 

All of your store’s dynamic content will be written in JavaScript in the `src/app.js` file.  Here is a list of the tasks you need to complete:

 

 

In your solution, you will likely require all of the following:

 

 

You are encouraged to use what you learned in the first 3 assignments and write proper functions and semantic HTML.

 

 

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 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.