Scribd
Upload
8 views32 pages

Introduction To HTML, CSS, Bootstrap and JS

Uploaded by

thenithyanagraj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views32 pages

Introduction To HTML, CSS, Bootstrap and JS

Uploaded by

thenithyanagraj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 32

1

Chapter 1

Introduction to HTML, CSS, Bootstrap and JS

1.1. Introduction

HTML, or HyperText Markup Language, server as the backbone of web content by providing a
standardized structure for creating and organizing documents on the World Wide Web. Development by
Tim Berners-Lee in 1991, HTML utilizes a system of tags to define the various elements within a
webpage, such as heading, paragraphs, images, links and more. These tags, enclosed in angle brackets,
guide wed browser in rendering content visually while preserving its underlying structure.
HTML documents are constructed hierarchically, with a root <html> tag encompassing <head> and
<body> section. The <head> contains metadata like title, character set, and links to external resources,
while the <body> encapsulates the visible content. Tags like <h1> to <h6> represent headings of
different levels, enhancing document organization. Links (<a>) facilitate navigation by connecting
pages, and images(<img>) enrich visual elements.
HTML continually evolves with new versions, such as HTML5, introducing enhanced features like
multimedia integration, form controls, and improved semantics. As the fundamental language for web
development, HTML remains indispensable for creating the structure and presentation of content on the
internet.
Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling
of a document written in a markup language such as HTML or XML (including XML dialects such as
SVG, MathML or XHTML). CSS is a cornerstone technology of the World Wide Web, alongside
HTML and JavaScript.
CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts.
This separation can improve content accessibility; provide more flexibility and control in the
specification of presentation characteristics; enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the
structural content; and enable the .css file to be cached to improve the page load speed between the
pages that share the file and its formatting.
Bootstrap is a popular front-end framework that simplifies and accelerates web development. Created by
Twitter, it offers a collection of pre-designed HTML, CSS, and JAVASCRIPT components, including
responsive grids, navigation bars, forms, and models. Developers leverage Bootstrap’s intuitive classes
and components to create visually appealing and mobile-friendly websites with minimal efforts. The
framework promotes consistency across projects, streamlining the design process and ensuring a
responsive layout across various devices. Bootstrap has become a go-to tool for developers.

1DS21EE065 Dept.of.EEE.Engg[DSCE]
2

1.2 Key Features of HTML, CSS, BOOTSTRAP AND JS

HTML:
 Structural Markup: HTML provides tags for structuring content, including headings, paragraphs,
lists, and more.
 Hyperlinks: Enables the creation of links to connect web pages, enhancing navigation.
 Images: Allows embedding images through the <img> tag for visual content.
 Forms: Supports the creation of interactive forms for user input and data submission.
 Semantic Elements: Introduces semantic tags like <header>, <footer>, <nav>, enhancing
document structure and accessibility.

CSS:

 Selectors: Define which HTML elements to style.

 Properties: Specify the visual presentation of selected elements.

 Values: Assign specific values to properties for desired styling.

 Cascading: Rules can be inherited or overridden based on specificity.

 Box Model: Describes how elements are rendered as boxes with content, padding, border, and
margin.

 Layout: Control the positioning and arrangement of elements on the page.

 Flexbox: A layout model for designing complex, responsive layouts.

 Grid: A two-dimensional layout system for precise control over rows and columns.

 Responsive Design: Use media queries to adapt styles based on device characteristics.

 Transitions and Animations: Create smooth transitions and animations for a more engaging user
experience.

 Vendor Prefixes: Handle browser-specific CSS properties for cross-browser compatibility.

 Variables: Define and reuse values throughout a stylesheet for maintainability.

 Pseudo-classes and Pseudo-elements: Select and style specific elements based on their state or
position.

 Font and Text Styling: Control typography, text alignment, and font properties.

 Colors and Gradients: Set color schemes, gradients, and background properties.

 Media Queries: Apply styles based on different device characteristics like screen size and
resolution.
1DS21EE065 Dept.of.EEE.Engg[DSCE]
3

 Transforms and Transitions: Manipulate the appearance of elements with transformations and
smooth transitions.

 Selectors: Target specific elements based on their relationship with other elements.

 Responsive Web Design: Adjust layouts for various screen sizes and orientations.

 Importance: Establish a hierarchy of style rules for effective styling.

BOOTSTRAP:
 Responsive Grid System: Grid classes facilitate the creation of responsive layouts for different
screen sizes.
 Pre-styled Components: Offers a plethora of ready-to-use components like navigation bars,
modals, and forms, ensuring a consistent design.
 Cross-Browser Compatibility: Bootstrap is designed to work seamlessly across various
browsers, reducing compatibility issues.
 Customization: Allows developers to customize themes, colors, and components to suit project
requirements.
 Mobile-First Approach: Prioritizes mobile responsiveness, ensuring a smooth experience on
smartphones and tablets.

JAVASCRIPT:
 Client-Side Interactivity: Enables dynamic content updates and user interactions within web
browsers.
 Asynchronous Programming: Supports asynchronous operations, allowing non-blocking
execution and efficient handling of tasks like fetching data.
 Event Handling: Facilitates the handling of user actions, such as clicks and keyboard inputs,
through event listeners.
 DOM Manipulation: Allows modification of the Document Object Model (DOM), enabling
dynamic changes to web page content and structure.
 Versatility: Used for both client-side and server-side development (Node.js), JavaScript is a
versatile language employed in various contexts across the web.

1DS21EE065 Dept.of.EEE.Engg[DSCE]
4

Programs on HTML, CSS, BOOTSTRAP AND JS

Fig 2.1 HTML code

Fig 2.2 Bootstrap code

1DS21EE065 Dept.of.EEE.Engg[DSCE]
5

Fig 2.3: Js code

Fig 2.4 Html code

1DS21EE065 Dept.of.EEE.Engg[DSCE]
6

Chapter 3

Introduction to JQUERY

3.1 INTRODUCTION

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well
as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT
License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web
analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least
3 to 4 times more usage than any other JavaScript library.

3.2 History of JQUERY

jQuery was originally created in January 2006 at BarCamp NYC by John Resig, influenced by Dean
Edwards' earlier cssQuery library. It is currently maintained by a team of developers led by Timmy
Willison (with the jQuery selector engine, Sizzle, being led by Richard Gibson).

3.3 Key Features of JQUERY


• element selections using the multi-browser open source selector engine Sizzle, a spin-off of the
jQuery project.
• DOM manipulation based on CSS selectors that uses elements' names and attributes, such as id
and class, as criteria to select nodes in the DOM
• Events
• Effects and animations
• Ajax
• Deferred and Promise objects to control asynchronous processing
• JSON parsing
• Extensibility through plug-ins
• Utilities, such as feature detection
• Compatibility methods that are natively available in modern browsers, but need fallbacks for old
browsers, such as jQuery.inArray() and jQuery.each().
• Cross-browser support

1DS21EE065 Dept.of.EEE.Engg[DSCE]
7

3.4 JQUERY used for Validating

1. For name:-

Fig 3.1 Name Identification.

2. For E-mail:-

Fig 3.2 Email verification.

3. For URL:-

Fig 3.3 Fetching for a link.

1DS21EE065 Dept.of.EEE.Engg[DSCE]
8

3.5 JQUERY used for File Handling

Fig 3.4 JQUERY used for file handling

3.6 JQUERY EXCEPTIONS

jQuery provides two kinds of functions, static utility functions and jQuery object methods. Each has
itown usage style.
Both are accessed through jQuery's main identifier: jQuery. This identifier has an alias named $. All
functions can be accessed through either of these two names.

Fig 3.4 JQUERY expectations

Chapter 4
1DS21EE065 Dept.of.EEE.Engg[DSCE]
9

Introduction to API’S

4.1 INTRODUCTION

An Application Programming Interface (API) serves as an intermediary that enables different software
applications to communicate and interact with each other. It defines a set of rules, protocols, and tools
that allow one piece of software or system to access the functionality or data of another.

APIs play a pivotal role in modern software development, facilitating seamless integration between diverse
applications, services, and platforms. They provide a standardized way for developers to access specific
features or data from a software application, web service, or operating system, without needing to
understand the underlying code.

Key points about APIs include:

1. Interoperability: APIs enable different systems, applications, and services to interact and work together,
regardless of their underlying architectures or technologies.

2. Functionality Access: APIs expose specific functionalities, methods, or data sets that developers can
utilize in their own applications, saving time and effort in creating new features from scratch.

3. Standardization: APIs define clear rules, protocols, and data formats, ensuring consistency and
predictability in how different software components communicate.

4. Enhanced User Experience: They enable developers to create more powerful and feature-rich applications
by leveraging functionalities offered by external services or platforms through API integration.

5. Security and Access Control: APIs often come with authentication mechanisms and access controls to
ensure that only authorized users or applications can access the provided functionalities or data.

APIs can be categorized into several types, including:

- Web APIs: These are accessed over the internet using protocols like HTTP/HTTPS and are commonly used
for web services, allowing remote access to functionality or data.
- Library APIs: These are sets of functions and procedures that a developer can use to perform specific
operations or tasks within a programming language or framework.
- Operating System APIs: These provide access to the services provided by an operating system, enabling
applications to utilize OS-specific features.

APIs have widespread applications across various industries, including social media platforms, e-commerce
websites, mobile applications, cloud services, and more. They are fundamental in enabling innovation,
scalability, and connectivity in today's interconnected digital world.

Overall, APIs serve as the bridge that empowers developers to create powerful, integrated, and efficient
1DS21EE065 Dept.of.EEE.Engg[DSCE]
10

software by leveraging functionalities and data from diverse sources, thereby driving innovation and
enhancing user experiences.

4.2 Key Features of API’s

APIs (Application Programming Interfaces) possess several key features that make them integral
components in modern software development and enable seamless communication between different
systems, platforms, and services. Some of the key features of APIs include:

1. Interoperability: APIs enable different software applications and systems, regardless of their underlying
architectures or technologies, to interact and work together. This interoperability facilitates the exchange
of data and functionalities, fostering integration between diverse systems.

2. Standardization: APIs define clear rules, protocols, and data formats, ensuring consistency and
predictability in how different software components communicate. This standardization simplifies the
development process and reduces potential errors by providing a well-defined interface.

3. Functionality Access: APIs expose specific functionalities, methods, or data sets that developers can
utilize in their own applications. By leveraging APIs, developers can access ready-made functionalities
or services provided by other systems, saving time and effort in developing new features from scratch.

4. Abstraction: APIs abstract the underlying implementation details, allowing developers to interact with the
services or data without needing to understand the complexities of the system providing those
functionalities. This abstraction simplifies usage and enhances ease of integration.

5. Ease of Integration: APIs facilitate the integration of services, enabling developers to combine multiple
functionalities from different sources into a single cohesive application. This ease of integration
accelerates the development process and promotes innovation.

6. Security: Many APIs incorporate security measures such as authentication, authorization, and encryption
to ensure that only authorized users or applications can access the provided functionalities or data. This
helps in safeguarding sensitive information and preventing unauthorized access.

7. Scalability and Flexibility: APIs are designed to accommodate scalability, allowing systems to handle
increased loads and adapt to changing demands. They also offer flexibility by providing different
versions or endpoints to cater to various use cases or user requirements.

8. Documentation and Support: Good APIs come with comprehensive documentation, including guides,
tutorials, and examples, making it easier for developers to understand and use the provided
functionalities. Additionally, robust APIs often offer support channels for developers who may
encounter issues or require assistance during integration.

9. Monitoring and Analytics: Some APIs provide monitoring tools and analytics that allow developers and
system administrators to track usage, performance metrics, and other key data, enabling optimization
and better decision-making.

Overall, these features collectively contribute to the usefulness, versatility, and efficiency of APIs, playing a
vital role in enabling the interconnectedness and innovation seen in today's software-driven world.

1DS21EE065 Dept.of.EEE.Engg[DSCE]
11

4.3 Usage of API’s

Fig 4.1 Using Dummy API.

Fig 4.1 Example of API

1DS21EE065 Dept.of.EEE.Engg[DSCE]
12

Chapter 5

Introduction to GITHUB

5.1 INTRODUCTION

GitHub is a web-based platform and service designed primarily for version control using Git, a distributed
version control system. It provides a collaborative environment for software developers, allowing them
to work together on projects, manage code repositories, track changes, and coordinate their work
effectively. GitHub serves as a central hub for version control, code collaboration, and project
management, offering a range of features that support development workflows.

Key aspects and functionalities of GitHub include:

1. Version Control: Git, the underlying version control system used by GitHub, allows developers to track
changes in their codebase, create branches for experimentation or new features, merge code changes,
and revert to previous versions when needed. GitHub's interface simplifies these processes, making
version control more accessible.

2. Code Hosting and Repositories: GitHub provides a platform for hosting Git repositories. Developers can
create repositories to store their code, collaborate with others, and manage projects. Each repository
contains the entire history of the project, including all the files, commits, branches, and tags.

3. Collaboration and Pull Requests: GitHub enables collaboration among team members through features
like pull requests. Developers can propose changes, review code, discuss modifications, and merge the
changes into the main codebase once they're approved, fostering a collaborative workflow.

4. Issue Tracking and Project Management: GitHub includes tools for issue tracking and project
management. Users can create and manage issues to report bugs, suggest features, or outline tasks.
Projects and milestones can also be set up to organize and track progress efficiently.

5. Community and Social Coding: GitHub serves as a community platform where developers can discover
projects, contribute to open-source initiatives, follow repositories, star projects, and engage with other
developers through discussions, comments, and contributions.

6. Documentation and Wikis: GitHub allows the creation and maintenance of project documentation,
including README files, wikis, and guides. Clear documentation helps users understand projects,
onboard new contributors, and ensure better collaboration.

7. Continuous Integration/Continuous Deployment (CI/CD) Integration: GitHub integrates with various


CI/CD tools, enabling automated testing, build processes, and deployment pipelines. This integration
helps maintain code quality and streamline development workflows.

8. Security Features: GitHub offers security features such as vulnerability scanning, dependency
management, access controls, and two-factor authentication, helping maintain the integrity and security
of code repositories.
1DS21EE065 Dept.of.EEE.Engg[DSCE]
13

GitHub has become a cornerstone of modern software development due to its user-friendly interface, robust
collaboration features, strong community support, and its pivotal role in fostering open-source
contributions. It serves as a hub for developers to build, share, and manage code, facilitating efficient
and collaborative software development practices.

5.2 Creating a Repository

Creating a repository (repo) in GitHub is a straightforward process. Follow these steps to create a new
repository on GitHub:

1. Sign in to GitHub:
Open your web browser and navigate to [GitHub](https://github.com/). Sign in to your GitHub account if
you're not already logged in.

2. Access Your Profile:


Once logged in, click on your profile icon located at the top right corner of the page to open the dropdown
menu.

3. Select "Your repositories":


From the dropdown menu, click on "Your repositories." This action will take you to a page displaying your
existing repositories (if you have any).

4. Create a New Repository:


On the right-hand side of the "Your repositories" page, there is a green button labeled "New." Click on this
button to initiate the process of creating a new repository.

5. Fill in Repository Details:


You will be directed to a page where you need to provide details for your new repository:

- Repository name: Enter a unique name for your repository.


- Description: Optionally, add a brief description to explain what the repository is for.
- Visibility: Choose between making the repository public (visible to everyone) or private (visible only to
you and selected collaborators). Note that private repositories are available in GitHub's paid plans.
- Initialize this repository with: You can choose to include a README file, add a .gitignore file, and select
a license. These are optional but can be helpful in setting up your repository.

6. Create the Repository:


After filling in the required details, click the "Create repository" button at the bottom of the page. GitHub
will then create the repository based on the provided information.

Once the repository is created, you'll be redirected to its main page. From here, you can start adding files,
creating branches, managing settings, inviting collaborators, and performing various other actions
related to your repository.

Remember, after creating the repository, you can clone it to your local machine using Git commands (`git
clone`) to start working on your projects locally and push changes to your GitHub repository as needed.

1DS21EE065 Dept.of.EEE.Engg[DSCE]
14

5. 3 Features & uses of Repository

1. Bug Tracking: Use GitHub's issue tracker to report, track, and manage bugs or feature requests in software
projects.

2. Documentation Management: Create and maintain project documentation, README files, and wikis
within repositories.

3. Code Reviews: Conduct peer code reviews to ensure code quality and maintain best practices.

4. Project Planning: Utilize project boards, milestones, and labels for planning and organizing tasks.

5. Team Collaboration: Collaborate with team members by sharing code, discussing changes, and merging
contributions.

6. Integration with Development Tools: Integrate GitHub with various development tools and services for
seamless workflows.

7. Continuous Integration/Continuous Deployment (CI/CD): Automate testing, building, and deployment


processes using GitHub Actions or integrations with CI/CD tools.

8. Learning and Education: Access educational resources, tutorials, and open-source projects for learning
and teaching purposes.

9. Code Hosting for Personal Projects: Use GitHub as a repository for personal projects, scripts, and
experiments.

10. Versioning for Non-Code Files: Store and track changes in non-code files such as documents,
configurations, or design files.

11. Showcasing Work: Showcase coding skills and projects to potential employers or collaborators by
sharing repositories.

12. Community Contribution: Contribute to open-source projects, share expertise, and participate in
discussions to support the developer community.

13. API Development and Management: Create and manage APIs, providing interfaces for data access and
services.

14. Security Management: Utilize GitHub's security features to monitor vulnerabilities, manage
dependencies, and enhance code security.

15. Remote Collaboration: Facilitate remote collaboration among team members located in different
geographic locations.

GitHub's diverse functionalities cater to developers, teams, educators, and the broader community,
contributing to enhanced collaboration, efficiency, and innovation in software development and project
management.

1DS21EE065 Dept.of.EEE.Engg[DSCE]
15

5. 4 GitHub Desktop application

Fig 5.1 Example of Repository

Fig 5.2 GitHub Dashboard

1DS21EE065 Dept.of.EEE.Engg[DSCE]
16

Chapter 6

Final Project

6.1 Project Overview

"Aaryan's Commerce" is an e-commerce web application designed to provide users with an interactive
platform to explore and purchase various products. The project incorporates key functionalities
commonly found in an online shopping platform, including:

1. User Interface: The project offers a user-friendly interface with a navigation bar, providing links to
essential sections like Home, About Us, and Contact Us. It also features a shopping cart icon that users
can interact with to view and manage their selected items.

2. Product Display: The project fetches product data from an external source (presumably a JSON API using
AJAX requests) and dynamically generates product cards containing information such as product
images, titles, descriptions, prices, discounts, brands, categories, ratings, and stock availability.

3. Product Details: Users can click on individual product cards to view detailed information about a specific
item. The detailed view presents an expanded description of the product, including additional images,
pricing details, discounts, brand information, category, stock availability, and options to buy, add to the
cart, or add to the wishlist.

4. Shopping Cart Functionality: Users can add products to their shopping cart by clicking the "Add to Cart"
button within the product details view. The shopping cart functionality includes adding items, modifying
quantities, removing items, and clearing the entire cart. The cart's total price dynamically updates based
on the added items.

5. LocalStorage Integration: The project utilizes the browser's LocalStorage to persist the shopping cart data,
allowing users to retain their cart contents even after closing the browser or refreshing the page.

Key Features:

- Product listing and details display


- Shopping cart management (add, remove, modify quantities)
- Responsive layout for different screen sizes
- Integration with external data sources (fetching products via AJAX)
- Use of Bootstrap for styling components
- LocalStorage usage for cart data persistence

This project serves as a foundation for an e-commerce platform, providing essential functionalities for users
to browse, select, and manage products within a simulated shopping environment.

1DS21EE065 Dept.of.EEE.Engg[DSCE]
17

6.2 Features Of the Project

1. Product Display:
- Displays a catalog of products fetched from an external source (using AJAX requests) dynamically.
- Each product card contains details such as images, titles, descriptions, prices, discounts, brands,
categories, ratings, and stock availability.

2. Product Details:
- Clicking on a product card reveals a detailed view with expanded information about the selected item.
- Detailed view includes additional images, pricing details, discounts, brand information, category, stock
availability, and options to buy, add to the cart, or add to the wishlist.

3. Shopping Cart Functionality:


- Enables users to add items to a shopping cart by clicking the "Add to Cart" button within the product
details view.
- Allows users to manage the shopping cart by modifying quantities, removing items, and clearing the
entire cart.
- Dynamically updates the cart's total price based on the items added or removed.

4. User Interaction:
- Provides a user-friendly interface with navigation links (Home, About Us, Contact Us) in a responsive
navigation bar.
- Incorporates a shopping cart icon in the navigation bar, enabling users to view and interact with their cart.

5. Local Storage Integration:


- Uses browser LocalStorage to persist shopping cart data, ensuring that users retain their cart contents
across sessions or page reloads.

6. Dynamic Image Display:


- Allows users to click on smaller images to view them in the larger default image space in the product
details section.

7. External Data Fetching:


- Utilizes AJAX requests to retrieve product information from an external source (presumably a JSON
API).

8. Bootstrap Styling:
- Utilizes Bootstrap framework for styling components, ensuring a responsive and visually appealing
design.

9. Modal Display for Cart:


- Presents the shopping cart content within a modal, allowing users to view and interact with their cart
without leaving the current page.

These features collectively create an interactive and functional e-commerce platform, allowing users to
explore products, view details, manage their shopping cart, and make informed decisions about their
purchases within a simulated online shopping environment.

1DS21EE065 Dept.of.EEE.Engg[DSCE]
18

6.3 User Interaction and Experience

1. Navigation Bar: Offers easy access to different sections of the website (Home, About Us, Contact Us) and
includes a shopping cart icon.

2. Product Display: Products are dynamically fetched from a JSON API (`https://dummyjson.com/products`)
and displayed in a grid layout. Clicking on a product image opens a detailed view.

3. Product Detail View: Clicking on a product image loads a detailed view with information such as title,
description, price, discount, brand, category, rating, stock, and buttons to perform actions like 'Buy
Now', 'Add To Cart', 'Wishlist', and 'Back'. Users can switch between images by clicking on smaller
thumbnails.

4. Shopping Cart: Users can add products to the cart from the product detail view. The cart displays the
added items with options to modify quantities or remove items. The cart's total price is updated
dynamically as items are added or modified.

5. Local Storage: Cart items are saved in the browser's local storage, ensuring that the cart contents persist
even if the user refreshes the page or navigates away from the site.

6. Responsive Design: Bootstrap is used to create a responsive layout, making the website usable across
various devices and screen sizes.

7. Modals: The shopping cart is displayed in a modal, providing a clear and focused view of the cart contents
without navigating away from the current page.

8. Error Handling: The code includes error handling for API requests to handle cases where data cannot be
fetched from the server.

User Experience:
- Product Interaction: Users can easily browse and interact with products by clicking on them to view details
and make purchase decisions.
- Cart Management: Adding, modifying quantities, or removing items from the cart is straightforward and
user-friendly.
- Persistence: The use of local storage ensures a seamless experience, allowing users to return to their saved
cart items even after leaving the website.

6.4 Future Improvements

Here are some potential improvements and additional features that could enhance the functionality and user
experience of the e-commerce website template:

1. User Account and Authentication:


Implement user accounts and authentication to enable users to have personalized experiences,
track orders, and manage their profiles.

2. Search and Filtering:


Add a search bar to allow users to search for products by name, category, or other attributes.
Include filtering options (price range, brand, rating) to help users refine their product searches.

1DS21EE065 Dept.of.EEE.Engg[DSCE]
19

3. Product Reviews and Ratings:


Allow users to leave reviews and ratings for products, providing valuable feedback to other
potential buyers.

4. Wishlist Functionality:
Implement a wishlist feature where users can save products they're interested in for future
reference or purchase.

5. Responsive Design Enhancements:


Ensure an optimal viewing experience across various devices, optimizing for mobile devices and
tablets.

6. Payment Integration:
Integrate a payment gateway to enable secure and smooth online transactions for purchases.

7. Backend Database Implementation:


Develop a backend system with a database to store product details, user information, and order
history securely.

8. Order Tracking:
Enable users to track their orders by providing order status updates and shipment tracking
information.

9. Improved Error Handling and Notifications:


Enhance error handling to provide informative messages to users in case of issues like failed API
requests or invalid inputs.
Implement notifications for successful additions to the cart or purchases.

10. Performance Optimization:


Optimize code and assets (images, scripts) for faster page loading times and better overall
performance.

11. Internationalization and Localization:


Support multiple languages and currencies to cater to a wider audience.

12. Accessibility Features:


Ensure the website complies with accessibility standards (WCAG) to make it usable for people
with disabilities.

13. Analytics and Reporting:


Implement analytics tools to gather insights into user behavior, popular products, and sales
trends.

By incorporating these improvements and features, the e-commerce website can provide a more
comprehensive and satisfying shopping experience for users, leading to increased engagement and
customer satisfaction.

1DS21EE065 Dept.of.EEE.Engg[DSCE]
20

6.5 Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE, edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aaryan's Commerce</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navbar starts -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-
example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Aaryans Commerce</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact us</a></li>
<!-- Add the cart icon and badge -->
<li>
<a href="#" id="cart-icon" data-toggle="modal" data-target="#cartModal">
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge" id="cart-badge">0</span>
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

1DS21EE065 Dept.of.EEE.Engg[DSCE]
21

<div id="temp" class="container"></div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<script>
var cartItems = [];

// Function to save the cart to localStorage


function saveCartToLocalStorage() {
localStorage.setItem('cartItems', JSON.stringify(cartItems));
}

// Function to load cart details from localStorage


function loadCartFromLocalStorage() {
var savedCart = localStorage.getItem('cartItems');
if (savedCart) {
cartItems = JSON.parse(savedCart);
updateCartDisplay();
updateCartBadge();
updateTotalPrice(); // Calculate and display total price
}
}

// Function to add a product to the cart


function addToCart(productId, title, price) {
// Check if the product is already in the cart
var existingItem = cartItems.find(item => item.id === productId);
if (existingItem) {
// If it exists, increment the quantity
existingItem.quantity += 1;
} else {
// If not, add a new item to the cart
var cartItem = {
id: productId,
title: title,
price: price,
quantity: 1
};
cartItems.push(cartItem);
}

updateCartDisplay();
updateCartBadge();
updateTotalPrice();
saveCartToLocalStorage();
displayCartModal();
}

// Function to update the cart badge


function updateCartBadge() {
var cartBadge = $("#cart-badge");
var cartItemCount = cartItems.reduce((total, item) => total + item.quantity, 0);
1DS21EE065 Dept.of.EEE.Engg[DSCE]
22

cartBadge.text(cartItemCount);
}

// Function to update the cart display


function updateCartDisplay() {
var cartHtml = "<h3>Shopping Cart</h3><ul>";
for (var i = 0; i < cartItems.length; i++) {
cartHtml += "<li>" + cartItems[i].title + " - $" + cartItems[i].price.toFixed(2) +
" (Quantity: " + cartItems[i].quantity + ") " +
"<button class='btn btn-primary btn-xs modify-quantity' data-id='" + cartItems[i].id +
"'>Modify</button> " +
"<button class='btn btn-danger btn-xs remove-item' data-id='" + cartItems[i].id +
"'>Remove</button></li>";
}
cartHtml += "</ul>";

// Display the cart content in a modal or any other suitable way


$("#cartModalBody").html(cartHtml);

// Bind click events for modify and remove buttons


$(".modify-quantity").click(function () {
var productId = $(this).data('id');
modifyQuantity(productId);
});

$(".remove-item").click(function () {
var productId = $(this).data('id');
removeItem(productId);
});
}

// Function to modify the quantity of a product in the cart


function modifyQuantity(productId) {
var existingItem = cartItems.find(item => item.id === productId);
if (existingItem) {
var newQuantity = prompt("Enter the new quantity:", existingItem.quantity);
if (newQuantity !== null) {
// Validate and update the quantity
newQuantity = parseInt(newQuantity);
if (!isNaN(newQuantity) && newQuantity > 0) {
existingItem.quantity = newQuantity;
updateCartDisplay();
updateCartBadge();
updateTotalPrice();
saveCartToLocalStorage();
} else {
alert("Please enter a valid quantity.");
}
}
}
}

// Function to remove a product from the cart


1DS21EE065 Dept.of.EEE.Engg[DSCE]
23

function removeItem(productId) {
var index = cartItems.findIndex(item => item.id === productId);
if (index !== -1) {
cartItems.splice(index, 1);
updateCartDisplay();
updateCartBadge();
updateTotalPrice();
saveCartToLocalStorage();
}
}

// Function to display the cart modal


function displayCartModal() {
$('#cartModal').modal('show');
}

// Function to calculate and update the total price


function updateTotalPrice() {
var totalPrice = 0;
for (var i = 0; i < cartItems.length; i++) {
totalPrice += cartItems[i].price * cartItems[i].quantity;
}
$("#totalPrice").text("Total Price: $" + totalPrice.toFixed(2));
}

// Function to clear the cart


function clearCart() {
cartItems = [];
updateCartDisplay();
updateCartBadge();
updateTotalPrice();
saveCartToLocalStorage();
}

// Bind click event for the clear cart button


$(document).on('click', '#clear-cart', function () {
clearCart();
});

$.ajax({
type: 'GET',
dataType: 'json',
url: 'https://dummyjson.com/products',
success: function (data, status, xhr) {
var products = data.products;
var HTML = "";
var productIdCounter = 1; // Initialize a counter for unique product IDs

for (let i = 0; i < products.length; i++) {


var productId = productIdCounter++; // Generate a unique product ID

HTML +=
`<div class="col-sm-3">
1DS21EE065 Dept.of.EEE.Engg[DSCE]
24

<p>${products[i].brand}</p>
<p>${products[i].title}</p>
<img src="${products[i].images[0]}" class='img-responsive prod' data-id="${productId}"
style='height:200px'><br>
</div>`;
}
$("#temp").html(HTML);

// Define what should happen when a product is clicked


$(".prod").click(function () {
var productId = $(this).data('id'); // Get the product ID from the clicked element

$.ajax({
type: 'GET',
dataType: 'json',
url: 'https://dummyjson.com/products/' + productId,
success: function (data, status, xhr) {
console.log(data);

var totalImages = data.images.length;

var smallImagesHTML = "";


for (let i = 0; i < totalImages; i++) {
smallImagesHTML += `<img src="${data.images[i]}" alt="Product Image" class="image small-
image" style="width: 2cm;","height: 2cm">`;
}

var productHTML = `
<div class="container-fluid">
<div class="col-sm-7 menu">
<img src="${data.images[0]}" alt="Product Image" class="default" style="width: 5in;">
<br>
${smallImagesHTML}
</div>
<div class="col-sm-5">
<br>
<h1>${data.title}</h1>
<h3>Description</h3>
<p class="desc">${data.description}</p>
<h3>Price: $${data.price}</h3>
<h3>Discount: ${data.discountPercentage}%</h3>
<h3>Brand: ${data.brand}</h3>
<h3>Category: ${data.category}</h3>
<h3>Rating: ${data.rating}/5</h3>
<h3>In Stock: ${data.stock} items</h3>
<a href="https://www.amazon.in/Apple-iPhone-15-Pro-Max/dp/B0CHX1K2ZC?th=1"><button
type="button" class="btn btn-primary">Buy Now</button></a>
<button type="button" class="btn btn-primary add-to-cart" data-id="${productId}">Add To
Cart</button>
<a href=""><button type="button" class="btn btn-danger">Wishlist</button></a>
<a href="commercecart.html" id="back-button"><button type="button" class="btn btn-
danger">Back</button></a>
</div>
1DS21EE065 Dept.of.EEE.Engg[DSCE]
25

</div>`;

$("#temp").html(productHTML);

// Clicking on small images to load into the default image space


$(".small-image").click(function () {
var imageSrc = $(this).attr('src');
$(".default").attr("src", imageSrc);
});
}
});
});
},
error: function (xhr, status, error) {
console.error("Error fetching data:", error);
}
});

// Call loadCartFromLocalStorage when the page loads


$(document).ready(function () {
loadCartFromLocalStorage();
});

// Add the "Add to Cart" functionality


$(document).on('click', '.add-to-cart', function () {
var productId = $(this).data('id');
var title = $(".container-fluid h1").text();
var price = parseFloat($(".container-fluid h3:contains('Price')").text().replace("Price: $", ""));
addToCart(productId, title, price);
});
</script>

<style>
.default {
margin-top: 100px;
margin-bottom: 50px;
}

.small-image {
margin-left: 20px;
}

.desc {
text-align: justify;
}
</style>

<!-- Add this modal at the end of your body -->


<div class="modal fade" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="cartModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
1DS21EE065 Dept.of.EEE.Engg[DSCE]
26

<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="cartModalLabel">Shopping Cart</h4>
</div>
<div class="modal-body" id="cartModalBody">
<!-- Cart content will be displayed here -->
</div>
<div class="modal-footer">
<span id="totalPrice" style="font-weight: bold;"></span>
<button class="btn btn-warning" id="clear-cart">Clear Cart</button>
</div>
</div>
</div>
</div>
</body>
</html>

6.6 Working of the Project

Fig 6.1 Ecommerce Website Dashboard

1DS21EE065 Dept.of.EEE.Engg[DSCE]
27

Fig 6.2 Product details Page

Fig 6.3 Using Carousal for changing slides

1DS21EE065 Dept.of.EEE.Engg[DSCE]
28

Fig 6.4 Modal for cart

Fig 6.5 Cart modifications and removal of products

1DS21EE065 Dept.of.EEE.Engg[DSCE]
29

Fig 6.6 Modified Cart

REFERENCES
https://developer.mozilla.org/en-US/docs/Web/HTML https://overapi.com/html
https://www.htmldog.com/guides/html/
https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://www.w3schools.com/bootstrap/ https://bootstrapstudio.io/forums/
https://developer.mozilla.org/en-US/docs/Web/JavaScript https://eloquentjavascript.net/
https://bonsaiden.github.io/JavaScript-Garden/
https://aws.amazon.com/getting-started/ https://acloudguru.com/learning-paths3

1DS21EE065 Dept.of.EEE.Engg[DSCE]
30

CERTIFICATE OF INTERNSHIP COMPLETION

Conclusion

The provided e-commerce website template lays a solid groundwork for an engaging and functional
online shopping platform. Its key features encompass:
1DS21EE065 Dept.of EEE Engg[DSCE]
31

1. Product Presentation and Interaction: The website dynamically fetches and displays products,
enabling users to explore detailed information and make informed purchasing decisions.

2. Shopping Cart Management: Users can easily add, modify quantities, or remove items from the cart,
with the total price updating dynamically for a clear overview of selected items.

3. Local Storage Integration: The use of local storage ensures that cart items persist, offering users
continuity across sessions without losing their selections.

4. Responsive Design: The template is designed to be responsive, providing a seamless experience


across various devices and screen sizes.

5. Modal Cart Display: The cart is displayed within a modal, offering a focused view without disrupting
users' browsing flow.

6. Error Handling: The code includes error handling for API requests, ensuring a smooth user
experience even in the face of data retrieval issues.

Conclusion:

This e-commerce website template presents a strong foundation for an interactive and user-centric
online shopping experience. With its current functionalities, the template provides users with the ability
to browse, select, and manage products conveniently.

Future iterations and enhancements could focus on user account integration, advanced search
capabilities, secure payment gateways, and improved user feedback mechanisms to further enrich the
overall user experience.

Ultimately, this project showcases potential for expansion, customization, and optimization, positioning
it as a promising starting point for a robust and user-friendly e-commerce platform tailored to meet
evolving user needs and preferences.

1DS21EE065 Dept.of EEE Engg[DSCE]


32

1DS21EE065 Dept.of EEE Engg[DSCE]

You might also like