Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/cyyeh/clothes-store


https://github.com/cyyeh/clothes-store

Last synced: 8 days ago
JSON representation

Awesome Lists containing this project

README 

        
# Clothes Store



demo site: https://jovial-lalande-190d9c.netlify.app/



## Requirements Checklist



- [x] Every page should contain a header containing the logo, the company name: Scotty Shirts U Illustrate (SSUI), and a top navigation menu containing T-SHIRTS, HOODIES, CREATE YOUR OWN, ABOUT US, and YOUR ACCOUNT. The logo should link to the index (home) page, T_SHIRTS should link to the products page, and all of the other links should go to the not_implemented page. These should all be defined in the html of each page (with the styling in the CSS file). (By the way, you will be creating the page for "CREATE YOUR OWN" in homework 3 and 5).

- [x] Similarly, every page should have a footer containing Contact Us, Site Map, Privacy Policy, Careers, Reviews, and an optional "Designed by ". All of these should link to the not_implemented page (except the "Designed..."). All clickable elements should indicate they are clickable with a hover behavior, as shown in the video. For example, the top menu items in the example display a red bottom border, and all the other buttons change the text color on hover.

- [x] index (main) page: The center of the index page should contain the home.png image and two text boxes with amusing content.

- [x] products page: Besides the header and footer information, the rest of the content of this page should be generated from the data in the shirts.js file. You should iterate through that list, and create an entry for each item. The entry on the products page should list at least the main picture, the name, how many colors it is available in, and a button to see the details. Clicking on that button or on the picture should take the user to the details page. (The "Quick View" button is optional extra credit - see below.) Note that the layout of the entries should work for any number of shirts, from 1 up to say 20 shirts and any reasonable laptop window width. (Hint: make different versions of the shirts.js file that have different numbers of entries, and make sure your products page still works.) However, it is not necessary for this page (or any other) page to be "responsive" (like changing the size or content of the entries based on the window width) - that is extra credit.

- [x] details page: Similarly to products, besides the header and footer information, the rest of the content of this page should be generated from the data in the shirts.js file. You should display all the options available for the selected shirt as clickable elements, and switch the picture shown based on the user's selections. Each shirt may have a selection of colors, and a front and back for each color, so the front-back choice and the color choice should be independent. The other information in the

data for the shirt should also be displayed, such as the name, description and the price. As in the products page, your code should be robust to missing data.

  - Hint: you need to transfer the information about which product was selected from the code on the products.html to the details.html page, so the details page knows which item in the data to display. Each html page defines its own JavaScript address space, so you can't just use a global variable. The standard options are to use the localStorage JavaScript feature (setItem in the code on the products page, and getItem on the details page), as explained in lecture. Alternatively, you can pass the parameter in the URL that invokes the details page.

- [x] not-implemented page should alert the user that the page isn't implemented yet. It does not need to have any header, footer or links. The user can get off this page using the browser's back button.

- [x] As shown in the example, you can add a "Quick View" link to each shirt on the products page, that shows some of the information available on the details page. This can be shown at the bottom as in the example, or as a popup. The user should be able to close the Quick View (the "Close" button in the example; if you use a popup, it should also have an "X" to close it), and it should also link to the details page (clicking on the picture in the example Quick View). [Up to +5 extra credit, out of 100]

- [ ] You can make your pages be responsive. This means that as the width decreases, the page rearranges. For example, at the width for a phone, you should change the header and foot menus into using the "hamburger icon", like the class web page does