Intern 2

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. Developmentby
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 fordevelopers.
1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

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

3
resolution.
• 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.

4
CHAPTER-2
Chapter- 2
Programs on HTML, CSS, BOOTSTRAP AND JS
Fig 2.1 HTML code
Fig 2.2 Bootstrap code

5
Fig 2.3: Js code
Fig 2.4 Html code

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

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.
3.5 JQUERY used for File Handling

8
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

9
Chapter 4
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.

10
Overall, APIs serve as the bridge that empowers developers to create powerful, integrated, and efficient
software by leveraging functionalities and data from diverse sources, thereby driving innovation and
enhancing user experiences.
4.2 HISTORY OF API’S
The history of APIs dates back to the early days of computer science and software development. The
concept of Application Programming Interfaces evolved alongside the growth of computing technology
and the need for different software systems to communicate and interact with each other. Here's a brief
overview:
1. Early Development: APIs have roots in the early days of programming languages when libraries were
created to facilitate reusability of code. Functions and procedures within these libraries acted as
interfaces that developers could use to interact with the underlying code.
2. Operating System APIs: In the 1970s and 1980s, operating systems like Unix and MS-DOS
introduced APIs to allow developers to access system functions and services. These APIs provided a
standardized way for applications to interact with the operating system, enabling tasks like file
management, memory allocation, and hardware interaction.
3. Internet Era and Web APIs: With the rise of the internet in the 1990s, the need for systems to
communicate across networks became increasingly prominent. Web APIs emerged as a way to enable
communication between web servers and clients. Technologies like Simple Object Access Protocol
(SOAP) and Representational State Transfer (REST) played significant roles in shaping early web APIs.
4. Expansion and Standardization: The early 2000s witnessed the expansion of APIs beyond operating
systems and web services. Companies started exposing APIs for their platforms, enabling third-party
developers to create applications that could interact with services like social media platforms, payment
gateways, and cloud services.
5. The API Economy: In recent years, the proliferation of cloud computing, mobile devices, and the
Internet of Things (IoT) has fueled the growth of the API economy. Companies recognize the strategic
value of APIs in enabling integration, expanding market reach, and fostering innovation. This led to the
development of more sophisticated APIs, API management platforms, and marketplaces.
6. Modern APIs: Today, APIs are pervasive across various industries, serving as the backbone of digital
ecosystems. RESTful APIs, GraphQL, and other technologies have emerged to offer efficient, flexible,
and standardized ways for applications, services, and devices to communicate and share data.
The evolution of APIs has been driven by the continuous demand for interoperability, connectivity, and
efficiency in software development. They have transformed from simple programming interfaces within
operating systems to powerful tools that enable seamless integration and innovation in the digital
landscape.

11
4.3 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.

12
4.3 Usage of API’s
Fig 4.1 Using Dummy API.
Fig 4.1 Example of API

13
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.

14
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.
5. 3 Features & uses of Repository

15
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.

16
5. 4 GitHub Desktop application
Fig 5.1 Example of Repository
Fig 5.2 GitHub Dashboard
Chapter 6
17
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.

18
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.

19
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
Certainly! 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.
### 3. Product Reviews and Ratings:

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

20
### 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.
6.5 Conclusion
The provided e-commerce website template lays a solid groundwork for an engaging and functional
online shopping platform. Its key features encompass:
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.

21
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.
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>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

</head>
<body>

<nav class="navbar navbar-inverse">

22
<div class="container-fluid">

<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>
</button>
<a class="navbar-brand" href="#">Aaryans Commerce</a>
</div>

<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>

<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>
</div>
</nav>
<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/bootstrap@3.3.7/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
}
}

23
// 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);
}
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);
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);

24
});
$(".remove-item").click(function () {
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;
updateCartBadge();
updateTotalPrice();
} else {
alert("Please enter a valid quantity.");
}
}
}
}
// Function to remove a product from the cart

function removeItem(productId) {
var index = cartItems.findIndex(item => item.id === productId);
if (index !== -1) {
cartItems.splice(index, 1);
updateCartBadge();
updateTotalPrice();
}
}
// 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));

25
// Function to clear the cart

function clearCart() {
cartItems = [];
updateCartBadge();
updateTotalPrice();
}
// 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">
<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++) {

26
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>
</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();
});

27
// Add the "Add to Cart" functionality

$(document).on('click', '.add-to-cart', function () {
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>


<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">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="cartModalLabel">Shopping Cart</h4>
</div>
<div class="modal-body" id="cartModalBody">

</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>

28
6.6 Working of the Project
Fig 6.1 Ecommerce Website Dashboard
Fig 6.2 Product details Page

29
Fig 6.3 Using Carousal for changing slides
Fig 6.4 Modal for cart

30
Fig 6.5 Cart modifications and removal of products
Fig 6.6 Modified Cart

31
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

Intern 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Intern 2

Uploaded by

Copyright:

Available Formats

1

Introduction to HTML, CSS, Bootstrap and JS

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

1.2 Key Features of HTML, CSS, BOOTSTRAP AND JS

• 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.

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

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

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

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

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

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

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

Programs on HTML, CSS, BOOTSTRAP AND JS

Fig 2.1 HTML code

Fig 2.2 Bootstrap code

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

Fig 2.3: Js code

Fig 2.4 Html code

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

3.2 History of JQUERY

3.3 Key Features of JQUERY

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

3.4 JQUERY used for Validating

Fig 3.1 Name Identification.

Fig 3.2 Email verification.

Fig 3.3 Fetching for a link.

3.5 JQUERY used for File Handling

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

Fig 3.4 JQUERY used for file handling

3.6 JQUERY EXCEPTIONS

Fig 3.4 JQUERY expectations

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

Key points about APIs include:

APIs can be categorized into several types, including:

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

4.2 HISTORY OF API’S

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

4.3 Key Features of API’s

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

4.3 Usage of API’s

Fig 4.1 Using Dummy API.

Fig 4.1 Example of API

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

Key aspects and functionalities of GitHub include:

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

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

5.2 Creating a Repository

2. Access Your Profile:

3. Select "Your repositories":

4. Create a New Repository:

5. Fill in Repository Details:

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

6. Create the Repository:

5. 3 Features & uses of Repository

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

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

1DS21EE065 Dept.of EEE Engg[DSCE, Bangalore]

5. 4 GitHub Desktop application

Fig 5.1 Example of Repository

Fig 5.2 GitHub Dashboard