Y. B.
PATIL POLYTECHNIC, AKURDI PUNE
SUBMITTED TO
MAHARASHTRA BOARD OF TECHNICAL EDUCTAION
Client Side Scripting Language (22519)
Report On
E-Commerce Shopping Cart Using
HTML, CSS, and JavaScript
Under Guidance Of
Mrs. Maheshwari Mali
Diploma in Computer Engineering
2024 – 2025 (Semester – 5)
Y. B. Patil Polytechnic, Akurdi, Pune
Third Year, Department of Computer Engineering
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
CERTIFICATE
This is to certify that
SR.NO STUDENT NAME ROLL NO.
1. Sumedh Naidu Akula Y-B3350
2. Moiz Mustafa Patel Y-B3347
3. Krishna Kumar Y-B3332
of Fifth Semester Diploma in Computer Engineering Section B in Y. B. Patil
Polytechnic, Akurdi has completed the Micro Project satisfactory in Subject Client
Side Scripting for the academic Year 2024 – 2025 as prescribed in the MSBTE
Curriculum.
Subject Teacher HOD Principal
Mrs. Maheshwari Mali Mrs. Pooja Ahuja Dr. A. S. Kondekar
ACKNOWLEDGEMENT
We would like to express our special thanks of gratitude to Mrs. Maheshwari Mali Ma’am who
gave us a golden opportunity to showcase and let us learn more about our topic i.e. “E-Commerce
Shopping Cart Using HTML, CSS, and JavaScript” and also taught us the way to work in team.
we would also like to Underscore dynamic efforts of the team work, and their expert advice to
complete this project in time.
Date Place :- Akurdi, Pune
Micro- Project Proposal
E-COMMERCE SHOPPING CART
1.0Aims/ Benefits of the Micro – Project :
a) To develop a program for Online e-commerce shopping cart.
b) The aim of this project is to how e-commerce shopping cart is created using java script.
2.0 Course Outcomes Addressed
a) Implement arrays and functions in java script.
b) Use java script for handling Cookies.
3.0 Proposed Methodology (Procedure in brief that will be followed to do the micro-
project in about 100-200 words)
This micro-project enhances e-commerce user experience by building an interactive
shopping cart using JavaScript. Users can add, remove, and adjust item quantities with real-
time total updates and smooth animations. The lightweight, optimized design ensures fast
loading and seamless use across devices, improving engagement and encouraging purchase
completion.
4.0 Action Plan(Sequence and time required for major activity)
Sr.No. Details of activity Planned Planned finish Name of
start date date responsible
team members
1. Searched topic for 08/10/2024 08/10/2024 All Members
microproject
2. Collected the required 09/10/2024 10/10/2024 All members
materials
3. Planned the outline of the 10/10/2024 10/10/2024 All Members
project
4. Working on micro project 11/10/2024 16/10/2024 All Members
1
5.0 Resources Required ( major resources such as raw material, some machining
facility, software etc.)
Sr. Name of resource / Specification Quantity Remarks
No. material
1. Pc / Laptop 4 GB Ram 1
2. Operating System Windows 10 1
3. Software Notepad 1
Names of Team Members with Roll Nos.
Sr. Name Roll No.
No.
1. Sumedh Akula Y-3350
2. Moiz Patel Y-3347
3. Krishna Kumar Y-3340
(To be approved by the concerned)
2
Evaluation Sheet for the Micro Project
Academic Year :2024-2025 Name of Faculty: Mrs. Maheshwari Mali
Course: Client Side Scripting Course Code:22519 Semester:CO5I
Title of the Project: E-commerce shopping cart in HTML,CSS,JAVASCRIPT
COs addressed by the Micro Project:
A. Create interactive web pages using program flow control structure.
B. Implement arrays and functions in java script.
Major Learning Outcomes achieved by students by doing the Project:
(a) Practical Outcomes: Develop Javascript to implement array functionalities.
(b) Unit Outcomes in Cognitive domain : Develop Javascript to implement the
given function.
(c) Outcomes in Affective Domain: a. Follow ethical practices.
(d) Comments/Suggestions about team work/leadership/inter-personal communication
(if any)
Roll Student Name Marks out of 6 Marks out of 4 Total out
No. for performance for performance of 10
in group activity in oral /
presentation
Y-3350 Sumedh Akula
Y-3347 Moiz Patel
Y-3340 Krishna Kumar
(Name & Signature of faculty)
3
CONTENT
INTRODUCTION
OBJECTIVE
DESCRIPTION OF PROJECT
TECHNOLOGY & TOOLS USED:
ADVANTAGES
PROGRAM CODE
OUTPUT
CONCLUSION AND REFRENCE
INTRODUCTION
An E-commerce shopping cart is a web-based tool commonly built using HTML, CSS, and
JavaScript to create dynamic, interactive shopping experiences. It enables users to add, view,
update, and remove items in real-time. Although JavaScript draws influence from Java, its
syntax is more similar to C and is based on ECMAScript, a scripting standard.
Being a client-side scripting language, JavaScript processes the code in the user’s browser
rather than on the web server. This allows for responsive, instant cart updates without
additional server communication. For instance, JavaScript can dynamically update the total
price as items are added or removed from the cart, offering users a seamless shopping
experience without needing to reload the page.
OBJECTIVE
- To build a responsive e-commerce product interface that allows users to add products to a shopping cart.
- To implement a shopping cart system where users can view items in the cart and see the total price.
- To ensure the application is simple, intuitive, and easy to navigate.
- To create a modal-based shopping cart UI that is interactive and dynamically updates based on user actions.
4
DESCRIPTION OF PROJECT
The project is a basic e-commerce shopping cart web application, developed using
HTML, CSS, and JavaScript. This application allows users to browse products, add them to
a shopping cart, view the cart’s content, and see the total price of the selected items.
Although it's a frontend-only application, it mimics the essential features of an e-commerce
website and is designed to be extensible for real-world use.
TECHNOLOGY AND TOOLS USED
System used (COMP/LAPTOP): Computer Processor, 4GB RAM
Operating System: Windows 11
Software: Visual Studio Code
ADVANTAGES
1. Real-Time Updates: Enhances user experience with instant cart adjustments and price updates.
2. Responsive Design: Offers a mobile-friendly interface, adapting seamlessly across devices.
3. Improved Conversion: Streamlines the checkout process, encouraging users to complete
purchases.
5
CODING
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Products</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Our Products</h1>
<div class="product-list">
<div class="product" data-id="1">
<h2>T-shirt</h2>
<p class="price">$15.00</p>
<button onclick="addToCart(1, 'T-shirt', 15)">Add to Cart</button>
</div>
6
<div class="product" data-id="2">
<h2>Hat</h2>
<p class="price">$20.00</p>
<button onclick="addToCart(2, 'Hat', 20)">Add to Cart</button>
</div>
<div class="product" data-id="3">
<h2>Bag</h2>
<p class="price">$30.00</p>
<button onclick="addToCart(3, 'Bag', 30)">Add to Cart</button>
</div>
</div>
<a href="cart.html" class="view-cart">View Cart</a>
</div>
<script src="script.js"></script>
</body>
</html>
7
OUTPUT
8
9
10
CONCLUSION
The successful creation of an e-commerce shopping cart using HTML, CSS,
and JavaScript showcases the effectiveness of these core web technologies.
Through their combined use, we have developed an interactive, user-friendly
platform that meets the essential needs of modern online shopping experiences.
11
