Git Product home page Git Product logo

rediberry / coderhouse-javascript-final-project-shopping-cart Goto Github PK

View Code? Open in Web Editor NEW
6.0 1.0 0.0 2.46 MB

It is a vanilla Javascript Shopping Cart ๐Ÿ›’๐Ÿ›๏ธ๐Ÿ‘Ÿ

Home Page: https://changas.netlify.app

License: MIT License

CSS 11.93% HTML 61.53% JavaScript 26.54%
alpargatas coderhouse contentful-api front-end-development javascript-vanilla shopping-cart css html-css-javascript

coderhouse-javascript-final-project-shopping-cart's Introduction

Shopping-Cart

It is a vanilla Javascript Shopping Cart for the Coderhouse JavaScript course.

Check the certificate on the Coderhouse page

What things I made use of:

  • HTML5/CSS3
  • Javascript
  • Font Awesome Icons
  • Google Fonts
  • Libraries (SweetAlert, Toastify)
  • Contentful API
  • Local Storage
  • SEO (as it has a score of 92 on PageSpeed Insights by Google).

How I made it:

  • Made a Contentful API to get the items from there (the advantage of doing this is that anyone can update the products even without programming knowledge, and without getting their hands on the code).
  • A 'Product' class gets the products from the contentful-API and maps them into an array of products.
  • The 'UI' class handles the display of the products and the cart logic (adding, removing and deleting items from the cart).
  • A storage class that handles the local storage (save products and cart items).
  • Defined all the variables for the DOM event handlers, and create the 'EventListeners'.

You can:

  • Filter by brand and price, also use the search bar.
  • Choose items.
  • Add, delete items and clear the cart.
  • Since the data is stored in local storage, once you return to the site, the cart will show the items from last time.
  • View your cart showing the total amount as well.
  • Fill out the checkout page (For this demo it is just a simple login form).

You can watch it live here:

https://rediberry.github.io/Coderhouse-Javascript-final-project-Shopping-cart/

PS:

Changas was a real espadrille manufacturing project that 3 friends and I ran from 2010 to 2013.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.