Index

Sr.
No. Contents Page No.

Annexure I– Micro Project Proposal

1.Aims/Benefits of the Micro-Project 2

2. Course Outcome Addressed 3

1 3.Proposed Methodology 4-5

4. Action Plan 6
5. Resources Required 7
6. Name of student with roll no 8

Annexure II – Micro Project Report 5-15

1.Rationale 5
2.Aims/Benefits of the Micro-Project 5
3.Course Outcome Achieve 5
4. Literature Review 6-7
2
5.Actual Methodology Followed 7
6. Source Code and Outputs 8-15
7. Actual Resources Used 16
8. Skill developed / Learning out of this Micro-Project 16
9. Applications of this Micro-Project 16

1
 Annexure I

Micro Project Proposal

“Firstcry website clone ”

1.
Aims/Benefits of the Micro-Project:

The aim of an online toy shopping website using a JavaScript micro project could be to create a user-
friendly platform for customers to browse, search for, and purchase toys. Some key objectives and features
for such a project could include:

User Registration and Authentication: Allow users to create accounts and log in securely to
track their orders and save their preferences.

Product Catalog: Display a wide variety of toys with images, descriptions, and prices.

Search and Filters: Implement search functionality and filters to help users find specific toys based on
categories, age groups, brands, etc.

Shopping Cart: Enable users to add and remove items from their cart, update quantities, and calculate the
total cost.

2
 Checkout and Payment: Provide a smooth checkout process, including entering shipping details and
processing payments securely.

User Reviews and Ratings: Allow customers to leave reviews and ratings for products.

Inventory Management: Track and manage the availability of products. Show "out of stock" when
necessary.

2.Course Outcome Addressed:

an online toy shopping website, you can achieve various course outcomes. Here are some possible
outcomes you could aim for:

Interactive User Interface: Create a user-friendly interface where customers can browse and select toys.
Achieving this outcome involves implementing navigation menus, search functionality, and a visually appealing
layout.

Shopping Cart Functionality: Develop a shopping cart system that allows users to add and remove items,
view the cart contents, and calculate the total cost.

User Authentication: Implement user registration and login functionality to personalize the shopping experience.
This could involve creating user accounts, managing passwords, and enabling users to save their cart contents.

Data Management: Use JavaScript to handle toy product data. This could include storing product details,
prices, and availability in a structured format, such as JSON or a database.

Payment Processing: If your project is more advanced, integrate payment processing using third-party APIs to
simulate real transactions.

Order Confirmation: Allow users to confirm and finalize their orders, generating order confirmation
emails and receipts.

3
Validation and Error Handling: Ensure data input is validated and errors are handled gracefully to
enhance the user experience.

Responsive Design: Make the website responsive, ensuring it works well on different devices and
screen sizes.

3.Proposed Methodology:

Project Definition and Planning:

Define project goals, objectives, and scope.

Create a project plan, including a timeline and resource allocation. Market
Research:

Analyze the target audience and competitors.

Identify the key features and functionalities your website should offer.

Design and Wireframing:

Create wireframes and mockups of the website's layout and design. Define the
user interface (UI) and user experience (UX) aspects.

Front-end Development:
Develop the website's front-end using HTML, CSS, and JavaScript.
Implement responsive design to ensure the site works on various devices.

Back-end Development:
Build the back-end using a server-side technology (e.g., Node.js, Python, Ruby). Implement a
database to store product information, user data, and orders.

4
User Authentication:
Create a user registration and login system. Implement user
profile management.

Product Management:
Develop features for adding, editing, and deleting products. Implement
product categorization and search functionality.

Shopping Cart:
Design and implement a shopping cart system.
Allow users to add and remove items from the cart.

Checkout and Payment:

Integrate a secure payment gateway for processing transactions. Provide order
confirmation and payment status updates.

Order Management:
Create an admin dashboard for managing orders and inventory. Generate order
invoices and receipts.

User Reviews and Ratings:

Allow users to leave reviews and ratings for products. Implement a
feedback system.

Testing and Quality Assurance:

Conduct thorough testing, including functional, usability, and security testing. Fix bugs
and issues identified during testing.

Security:

5
Implement security measures to protect user data and transactions. Use
HTTPS, data encryption, and secure authentication.

Deployment:
Deploy the website to a web server or a cloud platform. Configure
domain and hosting settings.

Marketing and SEO:

Optimize the website for search engines (SEO).
Develop a marketing strategy to attract users to the site.

User Training and Support:

Provide user guides or tutorials on how to use the website. Offer
customer support channels for inquiries and issues.

Feedback and Iteration:

Collect user feedback and analyze site performance.
Make iterative improvements based on user suggestions.

Documentation:
Create documentation for the project, including code documentation.

6
4.Action Plan:
Sr. Details of Activity Planned Start Planned Finish Name of
No. date date
Responsible
Team Members
1 Search the topic 09-08-2023 10-08-2023

2 Collect the information 23-08-2023 24-08-2023 Jyoti

3 Search the information 30-08-2023 01-09-2023 Rajendra

Nagane
4 Working on the code of 13-09-2023 14-09-2023
the given topic

5 Testing and correcting the 27-09-2023 28-9-2023

code

6 Taking screenshots of the 4-10-2023 5-10-2023

output

7 Making Index and 18-10-2023 19-10-2023

Certificate of project

8 Finalizing Project with its 25-01-2023 26-10-2023

report

7
5.Resources Required:

Sr.
No. Name of resource / material Specification Quantity Remarks

1 Computer WINDOWS11,16GBRAM, 1
512 SSD

2 Operating System WINDOWS 11 1

3 Browser Chrome 1

5.Names of Team Member with Roll No.:

Sr
.
Enrollment Name of Team Member
No. Roll No.

1 2210950461 Jyoti Rajendra Nagane 48

Ms. Kachare S.M.

Name and Signature of the Teacher

8
 Annexure – II

Micro-Project Report

“Firstcry website clone ”

1. Rationale:

Creating an online toy shopping website as a JavaScript micro project can be a great way to learn and
practice various web development skills. Here's a rationale for such a project:

Real-World Relevance: Toys are a common product category, and an online toy store reflects a realworld
e-commerce scenario, making it relatable and practical for learners.

Application of JavaScript: This project provides an opportunity to apply JavaScript for building
interactive and dynamic features. You can use JavaScript to handle user interactions, such as adding items
to the cart, filtering and sorting products, and implementing payment processes.

Front-End Development: Developing the front-end of a website involves HTML, CSS, and JavaScript.
You can create a visually appealing and user-friendly interface, design product pages, and use CSS for
styling.

Dynamic Content: Utilize JavaScript to fetch and display toy product data dynamically. This may involve
using JSON or a database, and you can explore AJAX or fetch requests to retrieve product information.

9
 Shopping Cart Functionality: Implement a shopping cart system where users can add and remove items.
Use JavaScript for cart updates and calculations (e.g., total price).

User Authentication: Optionally, you can add user authentication to simulate registered and guest users,
learning how to handle user accounts and sessions.

Search and Filtering: Implement search and filtering features using JavaScript to help users find specific
toys more easily.

Payment Processing: Integrate payment gateways (e.g., Stripe) or simulate payment processes to
understand the flow of online transactions.

2.Aims/Benefits of the Micro-Project:

The aim of an online toy shopping website using a JavaScript micro project could be to create a user-
friendly platform for customers to browse, search for, and purchase toys. Some key objectives and features
for such a project could include:

User Registration and Authentication: Allow users to create accounts and log in securely to
track their orders and save their preferences.

Product Catalog: Display a wide variety of toys with images, descriptions, and prices.

Search and Filters: Implement search functionality and filters to help users find specific toys based on
categories, age groups, brands, etc.

Shopping Cart: Enable users to add and remove items from their cart, update quantities, and calculate the
total cost.

10
 Checkout and Payment: Provide a smooth checkout process, including entering shipping details and
processing payments securely.

User Reviews and Ratings: Allow customers to leave reviews and ratings for products.

Inventory Management: Track and manage the availability of products. Show "out of stock" when
necessary.

3.Course Outcomes Achieved:

Course Outcome: By the end of this micro project, students should be able to create a functional online
toy shopping website using JavaScript.

Project Description:
Design and develop a basic online toy shopping website that includes the following features:

Homepage: Create a homepage that displays featured toys and provides navigation to other sections of the
site.

Product Listing: Implement a product listing page that displays a variety of toys with details such as
name, price, and an "Add to Cart" button.

Product Details: Create individual product pages that display detailed information about a selected toy,
including images, description, and price.

Shopping Cart: Develop a shopping cart page that allows users to add and remove items, view their
selected items, and calculate the total price.

11
 Checkout: Implement a checkout process that collects user information, such as name, address, and payment
details. Simulate a payment process (without actual payment processing) to complete the order.

User Authentication (Optional): For an advanced version of the project, add user authentication, allowing
users to create accounts and track their order history.

Technologies:

HTML, CSS for front-end

JavaScript for functionality
Local storage or simple database (e.g., JSON) for storing product and cart data
Bootstrap or other CSS frameworks for styling (optional) Project Requirements:

Properly structured HTML, CSS, and JavaScript files.

Responsiveness for mobile and desktop screens.
Ensure user-friendly and intuitive navigation.
Error handling for form validation and cart interactions.

4.Literature Review:

A literature review on an online toy shopping website using JavaScript as a micro project would typically involve
a survey of existing research and publications related to various aspects of online toy shopping websites,
JavaScript in web development, and the intersection of both. Here's a brief outline of how you can structure your
literature review:

Introduction:

Provide an overview of the topic and its significance.

12
Explain the objectives of your literature review.

Online Toy Shopping Websites:

Discuss the growth and popularity of online toy shopping websites.

Review studies on consumer behavior and preferences in the context of toy shopping online.

JavaScript in Web Development:

Explain the role of JavaScript in modern web development.

Discuss its importance in enhancing user experience on e-commerce sites.

User Experience and JavaScript:

Explore research on how JavaScript contributes to a better user experience on e-commerce websites.

Provide examples of JavaScript functionalities used in online shopping.

Security and JavaScript:

Investigate how JavaScript can be used to enhance the security of online toy shopping websites.

Review studies on potential security risks and best practices.

Accessibility and JavaScript:

Discuss the importance of web accessibility for all users.

13
Examine how JavaScript can be used to improve accessibility on e-commerce sites.

Case Studies and Examples:

Include real-world case studies or examples of online toy shopping websites that effectively use JavaScript.

Challenges and Future Directions:

Highlight challenges faced by online toy shopping websites using JavaScript.

Suggest potential areas for future research and improvements.

Conclusion:

Summarize the key findings from your literature review.

Discuss the relevance and significance of JavaScript in online toy shopping websites.

References:

Cite all the sources and studies you have reviewed.

Remember to use academic and reputable sources for your literature review, and make sure to provide a critical
analysis of the existing literature in this area. Additionally, you can use this literature review as a foundation for
your micro project, where you might consider implementing or improving a feature of an online toy shopping
website using JavaScript, and possibly conduct user testing or surveys to gather data for your project.

5.Actual Methodology Followed:

14
Creating an online toy shopping website using JavaScript involves several key components and methodologies.
Here's a simplified outline of the steps you can follow for a micro project:

Project Setup:

Set up your development environment with a code editor, version control, and a local server if needed.

Front-end Development:

Create the user interface using HTML, CSS, and JavaScript.

Design the website layout with HTML and style it with CSS.

Use JavaScript to enhance user interactions and create dynamic content.

Product Listings:

Create a data structure to store information about the toys (e.g., an array of objects).

Render the product listings dynamically on the website using JavaScript.

Implement features like filtering and sorting for easy navigation.

Shopping Cart:

15
Develop a shopping cart feature to add and remove items.

Calculate and display the total price.

User Authentication (Optional):

Implement user registration and login functionality using JavaScript.

Secure user data and access to specific features.

Checkout and Payment (Optional):

Create a checkout process for customers to review and pay for their selected items.

Implement payment gateways if necessary.

Backend Development (Optional):

Set up a server using Node.js, Python, or another backend technology.

Implement server-side logic for handling user accounts, cart data, and product listings.

16
Database (Optional):

Choose and set up a database system like MySQL, MongoDB, or Firebase to store product and user data.

Connect the backend to the database for data storage and retrieval.

Responsive Design:

Ensure your website is responsive to various screen sizes (desktop, tablet, and mobile) using CSS media queries.

Testing and Debugging:

Thoroughly test your website's functionality and fix any bugs or issues.

Deployment:

Deploy your website to a hosting platform or server so that it can be accessed online.

Security (Important):

Implement security measures to protect user data and transactions, especially if handling payments.

Performance Optimization (Optional):

17
Optimize the website for speed and efficiency.

Documentation:

Document your code and provide user instructions for your website.

User Interface and User Experience (UI/UX):

Focus on creating an attractive and user-friendly design for your website.

Testing and Quality Assurance:

Perform thorough testing, including functional, usability, and security testing.

Launch and Monitoring: Launch your website and continuously monitor its performance and user feedback for
improvements.

This is a high-level overview of the methodology for creating an online toy shopping website using JavaScript.
Depending on the complexity of your project and your specific requirements, you may need to dive deeper into
each step and make design and architecture decisions accordingly.

18
5. Source Code and Outputs:-

Main.html

<html>

<head>
<link rel="stylesheet" href="demo.css">
<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css"
rel="stylesheet">
</head>

<body>
<header>
<div class="logo"><a href="#"> fIrStCrY clone</a></div>
<div class="menu">
<a href="#">
<ion-icon name="close" class="close"></ion-icon>
</a>
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="ourproducts.html" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="search">

<a href=""><input type="text" placeholder="search products" id="input">

<ion-icon class="s" name="search"></ion-icon>

19
 </a>
</div>
<div class="heading">
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="ourproducts.html" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="heading1">
<ion-icon name="menu" class="ham"></ion-icon>
</div>
</header>
<section>
<div class="section">
<div class="section1">
<div class="img-slider">
<img src="image0_0 (1).jpg" alt="" class="img">
<img src="image1_0.jpg" 400" alt="" class="img" >
<img src="image0_0.jpg"400" alt="" class="img">
<img src="image0_0jyoti.jpg" = 600" alt="" class="img">
<img src="image2jyoti.jpg"400" alt="" class="img">
<img src="image3 jyoti.jpg"400" alt="" class="img">
<img src="image4jyoti.jpg" 400" alt="" class="img">

</div>

</div>
<div class="section2">
<div class="container">
<div class="items">
<div class="img img1"><img src="download 8.jpeg" alt=""></div>
<div class="name">doll house</div>
<div class="price">RS555</div>

20
 <div class="info">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<div class="items">
<div class="img img2"><img src="download 7.jpeg" alt=""></div>
<div class="name">JCB</div>
<div class="price">RS600.34</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img3"><img src="download 9.jpeg" alt=""></div>
<div class="name">toy car</div>
<div class="price">RS400</div>
<div class="info">Lorem ipsum dolor sit amet.</div>
</div>
<div class="items">
<div class="img img1"><img src="download 10.jpeg" alt=""></div>
<div class="name">pino</div>
<div class="price">RS900.1</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img src="download 11.jpeg" alt=""></div>
<div class="name">cars</div>
<div class="price">RS200</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img src="download 13.jpeg" alt=""></div>
<div class="name"></div>
<div class="price">RS1800</div>
<div class="info">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<div class="items">
<div class="img img1"><img src="download 15.jpeg" alt=""></div>
<div class="name">toys</div>
<div class="price">RS650.7</div>

21
 <div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img src="download 16.jpeg" alt=""></div>
<div class="name">mini toys</div>
<div class="price">RS1000</div>
<div class="info">Lorem ipsum dolor sit amet consectetur adipisicing
elit.</div>
</div>
<div class="items">
<div class="img img1"><img src="download 17.jpeg" alt=""></div>
<div class="name">elephant doll</div>
<div class="price">RS999.9</div>
<div class="info">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
</div>
<div class="items">
<div class="img img1"><img src="images 18.jpeg" alt=""></div>
<div class="name">rabbit</div>
<div class="price">RS990</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing
elit.</div>
</div>
<div class="items">
<div class="img img1"><img src="images 19.jpeg" alt=""></div>
<div class="name">duck</div>
<div class="price">RS3000</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing
elit.</div>
</div>
<div class="items">
<div class="img img1"><img src="images 20.jpeg" alt=""></div>
<div class="name">Car</div>
<div class="price">RS250.7</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing
elit.</div>
</div>

22
 <div class="items">
<div class="img img1"><img src="images 21.jpeg" alt=""></div>
<div class="name">toy set</div>
<div class="price">RS1000</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img src="images 22.jpeg" alt=""></div>
<div class="name"> </div>
<div class="price">RS7800</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing
elit.</div>
</div>
<div class="items">
<div class="img img1"><img src="images 23.jpeg" alt=""></div>
<div class="name">unicorn doll</div>
<div class="price">RS90</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing
elit.</div>
</div>
<div class="items">
<div class="img img1"><img src="image24.jpg" alt=""></div>
<div class="name">cradle</div>
<div class="price">RS360.5</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing
elit.</div>
</div>
<div class="items">
<div class="img img1"><img src="image25.jpg" alt=""></div>
<div class="name"></div>
<div class="price">RS2500</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing
elit.</div>
</div>
<div class="items">
<div class="img img1"><img src="image27.jpg" alt=""></div>

23
 <div class="name"></div>
<div class="price">RS5600</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing
elit.</div> </div>
</div>

</div>
</div>
</section>
<footer>
<div class="footer0">
<h1></h1>
</div>
<div class="footer1 ">
Connect with us at<div class="social-media">
<a href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-youtube"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-instagram"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</div>
</div>
<div class="footer2">
<div class="product">
<div class="heading">Products</div>
<div class="div">Sell your Products</div>

24
 <div class="div">Advertise</div>
<div class="div">Pricing</div>
<div class="div">Product Buisness</div>

</div>
<div class="services">
<div class="heading">Services</div>
<div class="div">Return</div>
<div class="div">Cash Back</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Others</div>
</div>
<div class="Company">
<div class="heading">Company</div>
<div class="div">Complaint</div>
<div class="div">Careers</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Support</div>
</div>
<div class="Get Help">
<div class="heading">Get Help</div>
<div class="div">Help Center</div>
<div class="div">Privacy Policy</div>
<div class="div">Terms</div>
<div class="div">Login</div>
</div>
</div>
<div class="footer3">Copyright © <h4>ShoPperZ</h4> 2021-2028</div>
</footer>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<script src="demoo.js"></script>
</body>
</html>

25
 Ourproducts.html:
<!DOCTYPE html>
<html>
<head>
<title>Product Page</title>
<style>
.product {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
display: inline-block;
width: 30%;
}
</style>
</head>
<body>

<h1>Our Products</h1>

<div class="product">
<img src="download (4).jpeg" height="300" width="300" alt="Product 1">
<h2>Product 1</h2>
<p>Description of Product 1.</p>
<p>Price: $19.99</p>
<li><font size="5"><a href="addto cart1.html" class="under">add to cart</a></font></li>
</div>

<div class="product">
<img src="download 7.jpeg" height="300" width="300" alt="Product 2">
<h2>Product 2</h2>
<p>Description of Product 2.</p>
<p>Price: $29.99</p>
<li><font size="5"><a href="addtocart2.html" class="under">add to cart</a></font></li>

26
</div>

<div class="product">
<img src="download 8.jpeg" height="300" width="300" alt="Product 3">
<h2>Product 3</h2>
<p>Description of Product 3.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="download 9.jpeg" height="300" width="300" alt="Product 1">
<h2>Product 4</h2>
<p>Description of Product 1.</p>
<p>Price: $19.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="download 10.jpeg" height="300" width="300" alt="Product 2">
<h2>Product 5</h2>
<p>Description of Product 2.</p>
<p>Price: $29.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="download 11.jpeg" height="300" width="300" alt="Product 3">
<h2>Product 6</h2>
<p>Description of Product 3.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="download 10.jpeg" height="400" width="300" alt="Product 1">
<h2>Product 7</h2>

27
 <p>Description of Product 1.</p>
<p>Price: $19.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="download 13.jpeg" height="300" width="300" alt="Product 2">
<h2>Product 8</h2>
<p>Description of Product 2.</p>
<p>Price: $29.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="download 15.jpeg" height="300" width="300" alt="Product 3">
<h2>Product 9</h2>
<p>Description of Product 3.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="images15.jpeg" height="300" width="300" alt="Product 1">
<h2>Product 10</h2>
<p>Description of Product 1.</p>
<p>Price: $19.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="images 16.jpeg" height="300" width="300" alt="Product 2">
<h2>Product 11</h2>
<p>Description of Product 2.</p>
<p>Price: $29.99</p>
<button>Add to Cart</button>
</div>

28
<div class="product">
<img src="images 18.jpeg" height="300" width="300" alt="Product 3">
<h2>Product 12</h2>
<p>Description of Product 3.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="images 19.jpeg" height="300" width="300" alt="Product 1">
<h2>Product 13</h2>
<p>Description of Product 1.</p>
<p>Price: $19.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="images 20.jpeg" height="300" width="300" alt="Product 2">
<h2>Product 14</h2>
<p>Description of Product 2.</p>
<p>Price: $29.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="images 21.jpeg" height="300" width="300" alt="Product 3">
<h2>Product 15</h2>
<p>Description of Product 3.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>

</div>
<div class="product">
<img src="images 22.jpeg" height="300" width="300" alt="Product 1">
<h2>Product 16</h2>

29
 <p>Description of Product 1.</p>
<p>Price: $19.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="images 23.jpeg" height="300" width="300" alt="Product 2">
<h2>Product 17</h2>
<p>Description of Product 2.</p>
<p>Price: $29.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="image24.jpg" height="300" width="300" alt="Product 3">
<h2>Product 18</h2>
<p>Description of Product 3.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="image25.jpg" height="300" width="300" alt="Product 1">
<h2>Product 16</h2>
<p>Description of Product 1.</p>
<p>Price: $19.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="image27.jpg" height="300" width="300" alt="Product 2">
<h2>Product 17</h2>
<p>Description of Product 2.</p>
<p>Price: $29.99</p>
<button>Add to Cart</button>
</div>

30
<div class="product">
<img src="image28.jpg" height="300" width="300" alt="Product 3">
<h2>Product 18</h2>
<p>Description of Product 3.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<body style="background-color:powderblue;"></body>
</body>
</html>

Javascript:

const close = document.querySelector(".close");

const open = document.querySelector(".ham");
const menu = document.querySelector(".menu");
close.addEventListener("click", () => {
menu.style.visibility = "hidden";
});
open.addEventListener("click", () => {
menu.style.visibility = "visible";
});

Css code:
* {
margin: 0;
padding: 0;

31
 box-sizing: border-box;
}
header {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 60px;
width: 100%;
background: black;
}
.heading ul {
display: flex;
}
.logo a {
color: white;
transition-duration: 1s;
font-weight: 800;
}
.logo a:hover {
color: rgb(240, 197, 6);
transition-duration: 1s;
}
.heading ul li {
list-style: none;
}
.heading ul li a {
margin: 5px;
text-decoration: none;
color: black;
font-weight: 500;
height: 550;
width: 550;
position: relative;
color: white;
margin: 2px 14px;

32
 font-size: 18px;
transition-duration: 1s;
}
.heading ul li a:active {
color: red;
}
.heading ul li a:hover {
color: rgb(243, 168, 7);
transition-duration: 1s;
}

.heading ul li a::before {
content: "";
height: 2px;
width: 0px;
position: absolute;
left: 0;
bottom: 0;
background-color: white;
transition-duration: 1s;
}
.heading ul li a:hover::before {
width: 100%;
transition-duration: 1s;
background-color: rgb(243, 168, 7);
}
#input {
height: 30px;
width: 300px;
text-decoration: none;
border: 0px;
padding: 5px;
}
.logo a {
color: white;

33
 font-size: 35px;
font-weight: 500;
text-decoration: none;
}
ion-icon {
width: 30px;
height: 30px;
background-color: white;
color: black;
}
ion-icon:hover {
cursor: pointer;
}
.search a {
display: flex;
}
header a ion-icon {
position: relative;
right: 3px;
}

.img-slider img {
height: 550px;
width: 575px;
}
@keyframes slide {
0% {
left: 0px;
}
15% {
left: 0px;
}
20% {
left: -1080px;
}

34
 32% {
left: -1080px;
}
35% {
left: -2160px;
}
47% {
left: -2160px;
}
50% {
left: -3240px;
}
63% {
left: -3240px;
}
66% {
left: -4320px;
}
79% {
left: -4320px;
}
82% {
left: -5400px;
}
100% {
left: 0px;
}
}
.img-slider {
display: flex;
float: left;
position: relative;
width: 575px;
height: 575px;
animation-name: slide;

35
 animation-duration: 10s;
animation-iteration-count: infinite;
transition-duration: 2s;
}

.heading1 {
opacity: 0;
}
.search {
display: flex;
position: relative;
}
.section1 {
width: 1080px;
overflow: hidden;

justify-content: center;
align-items: center;
margin: 0px auto;
}

.section2 .container {
display: flex;
width: 100%;
height: max-content;
flex-wrap: wrap;
justify-content: center;
margin: 10px auto;
}
.section2 .container .items {
margin: 10px;
width: 200px;
height: 300px;
background-color: white;
border: 2.5px solid black;

36
 border-radius: 12px;
}
.section2 .container .items .name {
text-align: center;
background-color: rgb(240, 197, 6);
height: 25px;
padding-top: 4px;
color: white;
margin: 0;
}
.section2 .container .items .price {
float: left;
padding-left: 10px;
display: block;
width: 100%;
color: rgb(255, 0, 0);
font-weight: 650;
}
.section2 .container .items .info {
padding-left: 10px;
color: rgb(243, 168, 7);
}
.section2 .container .items .img img {
width: 200px;
height: 200px;
margin: 0;
padding: 0;
border-radius: 12px;
transition-duration: 0.8s;
}
.section2 .container .items .img {
overflow: hidden;
margin: 0;
}
.section2 .container .items:hover .img img {

37
 transform: scale(1.2);
transition-duration: 0.8s;
border-radius: 12px;
}
footer {
display: flex;
flex-direction: column;
background-color: black;
align-items: center;
color: white;
}

.footer1 {
display: flex;
flex-direction: column;
align-items: center;
color: white;
margin-top: 15px;
}
.social-media {
display: flex;
justify-content: center;
color: white;
flex-wrap: wrap;
}
.social-media a {
color: white;
margin: 20px;
border-radius: 5px;
margin-top: 10px;
color: white;
}
.social-media a ion-icon {
color: white;
background-color: black;

38
}
.social-media a:hover ion-icon {
color: red;
transform: translateY(5px);
}
.footer2 {
display: flex;
width: 100%;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
flex-wrap: wrap;
}
.footer0 {
font-weight: 1200;
transition-duration: 1s;
}
.footer0:hover {
color: rgb(243, 168, 7);
}
.footer2 .heading {
font-weight: 900;
font-size: 18px;
}
.footer3 {
margin-top: 60px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.footer2 .heading:hover {
color: rgb(243, 168, 7);
}
.footer2 .div:hover {

39
 transform: scale(1.05);
}
.footer3 h4 {
margin: 0 10px;
}
.footer2 div {
margin: 10px;
}
.menu {
visibility: hidden;
}
.heading1 .ham:active {
color: red;
}
.items {
overflow: hidden;
}
.ham,
.close {
cursor: pointer;
}

@media screen and (max-width: 1250px) {

.heading ul li {
display: none;
}

.items {
transform: scale(0.9);
}
.img-slider img {
height: 60vw;
width: 80vw;
}
.ham:active {

40
 color: red;
}
.menu {
display: flex;
flex-direction: column;
align-items: center;
}
.menu a ion-icon {
position: absolute;
}

@keyframes slide1 {
0% {
left: 0vw;
}
15% {
left: 0vw;
}
20% {
left: -80vw;
}
32% {
left: -80vw;
}
35% {
left: -160vw;
}
47% {
left: -160vw;
}
50% {
left: -240vw;
}
63% {
left: -240vw;

41
 }
66% {
left: -320vw;
}
79% {
left: -320vw;
}
82% {
left: -400vw;
}
100% {
left: 0vw;
}
}
.menu ul {
display: flex;
flex-direction: column;
position: absolute;
width: 100vw;
height: 100vh;
background-color: black;
left: 0;
top: 0;
z-index: 11;
align-items: center;
justify-content: center;
opacity: 1;
}
.close {
z-index: 34;

color: white;
background-color: black;
}
.close:active {

42
 color: red;
}
.menu ul li {
list-style: none;
margin: 20px;
border-top: 3px solid white;
width: 80%;
text-align: center;

padding-top: 10px;
}
.menu ul li a {
text-decoration: none;
padding-top: 10px;
color: white;
font-weight: 900;
}
.menu ul li a:hover {
color: rgb(240, 197, 6);
}
.img-slider {
display: flex;
float: left;
position: relative;
width: 80%;
height: 60%;
animation-name: slide1;
animation-duration: 10s;
animation-iteration-count: infinite;
transition-duration: 2s;
}
.section1 {
width: 80%;
overflow: hidden;

43
 justify-content: center;
align-items: center;
margin: 0px auto;
}

.heading1 {
opacity: 1;
position: relative;
bottom: 8px;
}
.search a {
display: flex;
flex-wrap: nowrap;
}

.heading1 .ham {
background-color: black;
color: white;
}
#input {
width: 200px;
flex-shrink: 2;
}
header {
height: 150px;
}
}
@media screen and (max-width: 550px) {
.heading ul li {
display: none;
}
.heading1 {
opacity: 1;

bottom: 8px;

44
 }

header {
height: 250px;
flex-wrap: wrap;
display: flex;
flex-direction: column;
}
#input {
width: 150px;
}
.close {
z-index: 34;
}

.search a {
display: flex;
flex-wrap: nowrap;
}
}

Addtocart.html
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
</head>
<body>
<h1>Product Name: Example Product</h1>
<p>Price: $10.00</p>
<p>Quantity: <span id="quantity">1</span></p>
<button onclick="decreaseQuantity()">-</button>
<button onclick="increaseQuantity()">+</button>

45
 <button onclick="addToCart()">Add to Cart</button>
<script>
let cart = [];
let quantity = 1;

function decreaseQuantity() {
if (quantity > 1) {
quantity--;
document.getElementById("quantity").textContent = quantity;
}
}
function increaseQuantity() {
quantity++;
document.getElementById("quantity").textContent = quantity;
}
function addToCart() {
const item = {
name: "pikachu",
price: 10.00,
quantity: quantity
};
cart.push(item);
alert(`Added ${quantity} ${item.name}(s) to the cart.`);
// You can also update the cart display here
}
</script>
</body>
</html>

Contact us:

<!DOCTYPE html>
<html>
<head>

46
 <title>Shopping Cart</title>
</head>
<body>
<h1>Product Name: Example Product</h1>
<p>Price: $10.00</p>
<p>Quantity: <span id="quantity">1</span></p>
<button onclick="decreaseQuantity()">-</button>
<button onclick="increaseQuantity()">+</button>
<button onclick="addToCart()">Add to Cart</button>
<script>
let cart = [];
let quantity = 1;

function decreaseQuantity() {
if (quantity > 1) {
quantity--;
document.getElementById("quantity").textContent = quantity;
}
}
function increaseQuantity() {
quantity++;
document.getElementById("quantity").textContent = quantity;
}
function addToCart() {
const item = {
name: "pikachu",
price: 10.00,
quantity: quantity
};
cart.push(item);
alert(`Added ${quantity} ${item.name}(s) to the cart.`);
// You can also update the cart display here
}
</script>
</body>

47
</html>

Output :-

48
49
7. Actual Resources Used:

Sr.
Specification Quantity Remarks
No.
Name of resource
/ material

50
 1 Computer WINDOWS 7,2GB 1
RAM,
160GB HDD

2 Operating System WINDOWS 7 1

3 Browser Chrome 1

8. Skill developed / Learning out of this Micro-Project:

Creating a toy shopping website micro project can help you develop various skills using JavaScript.
Here's a brief overview of what you can learn and implement:

Front-End Development:

HTML/CSS: You'll need to create the user interface with HTML for structure and CSS for styling.
Responsive Design: Make the website look good on different screen sizes.
User Interface (UI): Design a visually appealing and user-friendly interface for browsing and selecting toys.

JavaScript Skills:

DOM Manipulation: Use JavaScript to interact with the Document Object Model to update the
webpage dynamically.
Event Handling: Implement click events for adding items to the cart, updating quantities, and more.

51
Form Handling: Create forms for user input, such as entering their details for checkout.
Data Storage: Store information about the selected items, such as in-memory arrays or local storage.
Calculations: Calculate the total cost of items in the shopping cart.

Shopping Cart Functionality:

Adding/Removing Items: Allow users to add items to the cart and remove them.
Updating Quantities: Implement quantity selectors for each item.
Checkout Process: Create a checkout flow where users can provide shipping and payment information.
Dynamic Content:

Product Listing: Display a list of toys with images, descriptions, and prices. Cart
Summary: Show a summary of the items in the cart with the total cost.

9.Applications of this Micro-Project:

Create an HTML structure for your webpage.

Use JavaScript to define an array of toy products with details like name, price, and image.

Write a function to display these products on your webpage dynamically.

Implement a shopping cart functionality by creating an empty array to store selected items.

Add event listeners to the product items to allow users to add items to the cart.

Create a function to display the items in the cart with total price.

Implement a checkout button to complete the purchase and provide feedback to the user.

52
Of course, this is a very simplified project, and a real-world shopping website would require much more
code and features, but this should give you a basic idea of how to get started.

********

53