sneaker-shop | Sneaker Shop Website

The contents of the page are build statically via the HTML. Only the list of offered shoes (under the heading “New arrivals”) is build with JavaScript.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
• Author
• Acknowledgments

Overview

The challenge

The contents of the page are build statically via the HTML. Only the list of offered shoes (under the heading "New arrivals") is build with JavaScript. The challenges of this page are:

1. Cookie Overlay:
   • When the site is visited, a cookie banner and an overlay appear that prevent the content of the site from being seen clearly.
   • When you click “Accept”: A cookie is set, the banner and overlay disappear and the next time you visit the site it will no longer be displayed.
   • If you click on “Reject all”: No cookie is set, the banner and overlay disappear and the next time you visit the page, the banner and overlay are displayed again.
2. Article Consruction:
   • Use .createElement and .appendChild).
   • Each shoe size should be displayed as a single text element.
3. Accordion: Clicking on the arrow next to the price reveals more information.
4. Article Counter:
   • By clicking the plus, the item is “added to cart”.
   • If a shoe is added to the shopping cart, the counter should count up.
   • As soon as the page is reloaded, the counter is 0.
   • The shopping cart icon should be fixed at the bottom right of the page and should be floating above everything.

Screenshot

Links

• Solution URL: https://github.com/jenniferhubermayer/sneaker-shop
• Live Site URL: https://jenniferhubermayer.github.io/sneaker-shop/

My process

Built with

• Semantic HTML5 markup
• SCSS
• Flex and Grid
• JavaScript

Author

• Website - https://github.com/jenniferhubermayer

Acknowledgments

This project has been realized as part of the super(c)ode "Front-End Boot-Camp 2022".