Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/nadim-nion/shopping-cart-localstorage

Explore my HTML5 & CSS shopping cart with search, add-to-cart, and 'Place Order' features. Seamlessly UI updates & local storage management.
https://github.com/nadim-nion/shopping-cart-localstorage

html javascript localstorage

Last synced: about 1 month ago
JSON representation

Explore my HTML5 & CSS shopping cart with search, add-to-cart, and 'Place Order' features. Seamlessly UI updates & local storage management.

Awesome Lists containing this project

README 

        
# Shopping Cart (Data set, read and retrieve in the Local Storage)



## 🛒 HTML5 and Plain CSS Shopping Cart 🛍️



Repository Description:



Welcome to the HTML5 and Plain CSS Shopping Cart repository! In this project, I've crafted a minimalist yet functional shopping cart entirely using HTML5 and Plain CSS. This repository showcases a dynamic web application that enables users to seamlessly browse through items, add them to their cart, and complete the shopping experience with a convenient 'Place Order' feature. 



### Key Features:



🔍 **Effortless Item Search:** Users can easily search for their desired items using a user-friendly search bar, enhancing the overall shopping experience.



🛒 **Intuitive Cart Functionality:** With just a click on the 'Add Item' button, selected items are not only visually represented within the user interface, but they are also smartly stored in the local storage of the browser. This ensures a smooth and hassle-free shopping session, allowing users to add items without the fear of losing their selections.



📦 **Persistent Local Storage:** The shopping cart harnesses the power of local storage to preserve users' selected items even when they navigate away from the page or close their browser. This provides convenience and reliability, letting users pick up where they left off during their next visit.



🚀 **Seamless Checkout:** Upon deciding to make a purchase, users can swiftly click the 'Place Order' button. This action not only removes the selected items from the user interface, streamlining the cart display, but it also intelligently clears the stored data related to these items from the local storage. This double-action feature ensures a clean and efficient checkout process.



💡 **Minimalistic Design:** The project boasts a clean and minimalist design, focusing on essential shopping cart functionalities while offering a visually appealing and clutter-free interface.



🌐 **Responsive and Accessible:** The shopping cart is designed to be responsive, adapting seamlessly to various screen sizes, ensuring a consistent and enjoyable shopping experience across devices. Additionally, accessibility features have been taken into account, promoting inclusivity and usability.



📚 **Learning Opportunity:** This repository serves as an excellent educational resource for those looking to understand the core concepts of building a functional shopping cart using HTML5 and Plain CSS. The well-structured codebase is open for exploration, making it a valuable asset for those interested in web development.



Explore the repository's codebase, dive into the elegant implementation of the shopping cart's features, and embark on an enlightening journey through the world of HTML5 and Plain CSS web development. Happy shopping cart coding! 🌟



## Live Website



GitHub Pages: https://nadim-nion.github.io/shopping-cart-LocalStorage/ 



Netlify: https://shopping-cart-localstorage.netlify.app/ 



## Deployment



To deploy this project run



```bash

git init

git add .

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/Nadim-Nion/shopping-cart-LocalStorage.git

git push -u origin main



```



## Screenshots



Website's UI:

![Local-Session 1](https://github.com/Nadim-Nion/shopping-cart-LocalStorage/assets/60613933/a5f289c6-27bc-4e5c-bc49-b9685324ec30)



Chrome DevTool Application Tab:

![Screenshot (47) 2](https://github.com/Nadim-Nion/shopping-cart-LocalStorage/assets/60613933/a6c53f61-e38b-4b74-849c-bc3a4a077c6f)



## Tech Stack



**Client:** JavaScript, HTML5



## FAQ



#### Is this website responsibe?



Answer : No, we haven't made it responsible for all devices



#### Does this website handle errors?



Answer : Yes, we have handled two type of errors in this website. After searching, search text will removed. Similar/duplicate items will feature in the both UI and local storage



## 🚀 About Me

Hi, I am Nadim Mahmud Nion. I have recently concluded my graduation from the department of Computer Science and Engineering (CSE) at the Daffodil International University (DIU). I have been learning MERN Stack Web Development since 2022. I am expertise in the following skills:



* **JavaScript**

* **Advanced JavaScript**

* **Bootstrap**

* **Tailwind**

* **HTML5**

* **CSS3**

* **Media Query**



I have built multiple projects using these skills. You are invited to my GitHub profile to know about my projects and don't forget to give a star to my projects.