Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

E-commerce product page using Vanilla JS

animation, sass/scss, vanilla-extract, fetch
yishak abrham•2,150
@yishak621
A solution to the E-commerce product page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Even if these type of E-commerce projects are done with frameworks to make life easier but i challenge myself to the extreme building the components by pure vanilla JS . the method that i use to make the whole project is using constructor functions as a component of JS since they will build the a whole functionality after i envoke(call) it for any place i want .. the components that i build with constructor function (located in module folder) 1.Modal(pc version only modal.js) 2.prev and next(mobile version constructorMob.js) 3.addToCart(card.js) 4.counter(counter.js)

other components that help to build the project 1.array.js(host files locally to store images) 2.checkout.js(fetch data for countries select input API) 3.darkmode.js(for toggle darkmode ) 4.fixedNavBar.js(for toggle navbar fixed class scroll event) 5.localstorage.js(i will design these soon)

i also added cool features like *page_loading_GIF *collection_cards_feature *Night_mode *checkout_page.

for the checkout page in the country select input i use *API to load countries and add them in to our select input.....if u see some bugs please correct me(except the notification **bug after the item deleted i will fix that after completing the local storage function when i got time to do that) and also if u see something **new ask me

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on yishak abrham's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License