AN INTERNSHIP REPORT ON

STUDY OF FRONTEND WEB DEVELOPMENT

Submitted in partial fulfillment of the

requirements for the award of the degree
of

BACHELOR OF TECHNOLOGY

in

COMPUTER SCIENCE AND ENGINEERING

(DATA SCIENCE)

By
NIMMALAPUDI TRINADH CHOWDARY 21751A3240

SREENIVASA INSTITUTE OF TECHNOLOGY AND MANAGEMENT

STUDIES,CHITTOOR-517127,A.P.
(Autonomous)
(Approved by AICTE, New Delhi & Affiliated to JNTUA, Ananthapuram),
Chittoor, A.P-517127.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

(DATA SCIENCE)
(2024 - 2025)
 SREENIVASA INSTITUTE OF TECHNOLOGY AND
MANAGEMENT STUDIES,CHITTOOR,517127,A.P.
(Autonomous)
(Approved by AICTE, New Delhi & Affiliated to JNTUA, Ananthapuramu)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

(DATA SCIENCE)

CERTIFICATE
This is to certify that the internship report “STUDY OF FRONTEND WEB
DEVELOPMENT” is a genuine work of

NIMMALAPUDI TRINADH CHOWDARY 21751A3240

submitted to the department of Computer Science and Engineering (Data Science),in
partial fulfillment of the requirements for the award of the degree of Bachelor of
Technology in Computer Science and Engineering (Data Science), during the
academic year 2024- 2025.

Signature of the Supervisor Signature of the Head of Department

Mrs. A. REVATHI, Mr.A. SRINIVASAN,
Assistant Professor, Assoiate Professor&HOD,
Department of Computer Science And Department of Computer Science And
Engineering(Data Science), Engineering(Data Science),
Sreenivasa Institute of Technology and Sreenivasa Institute of Technology and
Management Studies, Chittoor, A.P. Management Studies, Chittoor, A.P.

Submitted for Semester End Examination held on……………..

INTERNAL EXAMINER EXTERNAL EXAMINER

INTERNSHIP COMPLETE CERTIFICATE:
 ABSTRACT

The Frontend Web development internship at Codetech it solutions offered a

comprehensive learning experience in crafting visually appealing and user-friendly web
interfaces. Interns worked on developing responsive and dynamic web pages using core
technologies like HTML, CSS, and JavaScript, along with modern libraries and frameworks
such as React.js or Angular. Emphasis was placed on designing intuitive user interfaces and
enhancing user experiences through effective use of design principles and tools like Figma
or Adobe XD.

Interns gained hands-on experience with responsive design, ensuring compatibility

across various devices and browsers, and implemented performance optimization
techniques for seamless functionality. Collaboration in a professional environment fostered
skills in version control with Git, debugging, and testing front-end components. The
internship provided valuable insight into industry practices, preparing participants to excel
in building interactive and engaging front-end solutions for modern web applications.
 INDEX

CHAPTERNO TABLEOFCONTENTS PAGENO

1 INTRODUCTION ABOUT THE COMPANY 1

1.1 INTRODUCTION 1

1.2 OBJECTIVE OF THE PROJECT 5

2 PROJECTION DESCRIPTION 8

2.1 INTERACTIVE QUIZ GAME 8

2.1.1 HTML Structure 8

2.1.2 CSS (Styling) 10

2.1.3 JavaScript (Functionality) 12

2.2 E-COMMERCE PRODUCT PAGE 19

2.2.1 HTML Structure 19

2.2.2 CSS (Styling) 21

2.2.3 JavaScript (Functionality) 22

3 SUMMARY AND CONCLUSION 26

3.1 SUMMARY 26

3.2 CONCLUSION 27

REFERENCES 28
 CHAPTER 1

INTRODUCTION ABOUT THE COMPANY

1.1 INTRODUCTION

Codetech it solutions is an education and technology company that provides

training and internship programs in technical and management domains. They offer
a variety of internship opportunities, including in cybersecurity, web development,
UI/UX design, and cloud computing. Codetech it solutions 's mission is to help
students develop the skills they need to succeed in their careers.

Here are some details about Codetech it solutions :

• Internship programs

Codetech it solutions offers internship programs that provide hands-on

experience and mentorship. Interns work on real-world projects with experienced
professionals.

• Certifications

Codetech it solutions has certified over 10,000 students globally.

• IT solutions

Codetech it solutions provides IT solutions to help organizations protect their

data and infrastructure.

• Partnerships

Codetech it solutions plans to partner with industry leaders to further enhance

the employability of its students. Apply for Web Development Internship at Codetech
it solutions – Unstop.27 JUL 2024 — Details. About Codetech it solutions , Codetech
it solutions is a leading provider of web development

Codetech it solutions is a leading provider of cybersecurity solutions, helping

organizations protect their critical data and infrastructure. We are committed to
fostering the next generation of cybersecurity professionals and offer a
comprehensive internship program to provide hands-on experience and mentorship.

1
1.2 BACK GROUND
Web development is the process of creating, building, and maintaining websites and
web applications. It's important for businesses because it helps them:
• Expand their reach: Web applications can be accessed from anywhere with an
internet connection.
• Increase sales: A website makes it easier for customers to find a business online.
• Provide a good user experience: Well-designed web applications can increase
customer satisfaction and brand loyalty.
• Save costs: Web applications can automate processes, reducing the need for manual
work.
• Maintain brand identity: A website can help a business maintain its brand identity.
Web development can involve a variety of tasks, including: web design, web programming,
and database management.
The basic tools used in web development include: HTML (Hypertext Markup Language),
CSS (Cascading Style Sheets), and JavaScript.

1.3 PURPOSE
The purpose of web development is to create, build, and maintain websites that are
efficient and run smoothly on a browser. Web development is a subset of computer
programming that involves a number of key aspects, including:
• Web design: Determines the design and functionality of a website to enhance the
user experience
• Database management: Stores and handles databases accurately and securely
• Web programming: Includes frontend and backend development, which focus on
the user-facing and server-side functionality of a website
• Maintenance and updates: Fixes bugs, updates features, and ensures security
• User experience (UX) design: Envisions and develops how users will interact with
a website
• Security: Protects against security threats and vulnerabilities that hackers could
exploit
Web development can help businesses improve their brand identity, reach, visibility,
customer engagement, and more.

2
1.4 SCOPE
The scope of web development is expected to grow due to the increasing demand
for online services and digital experiences. Web developers are in high demand across
many industries, and the job prospects for mid-level and senior web developers are very
strong.
The scope of web development encompasses all related development activities,
such as client-side scripting, server-side scripting, server and network security settings, e-
commerce development, and content management system (CMS) development, in addition
to web markup and code.
Here are some reasons why web development has a promising scope:
• Growing demand: With more people working, learning, and meeting online,
businesses are realizing the need to be online too.
• Many different jobs: Web developers are needed in many areas, including online
shops, hospitals, schools, banks, and more.
• Creative and fun: Web development allows you to express yourself creatively.
• Work flexibility: You can work as a freelancer, part-time, full-time, or from home.
• Transferable skills: Web developers gain skills that are ideal for other disciplines,
such as mobile development.
Some of the future trends in web development include:
• Responsive and adaptive designs
• Progressive Web Apps (PWAs)
• AI integration
• Augmented Reality (AR) and Virtual Reality (VR)
• Voice search optimization
• E-commerce evolution
• Blockchain integration
• Sustainability and green websites

3
1.5 OBJECTIVE OF THE PROJECT:
1.5.1 TASK-1: Interactive Quiz Game :
1.5.1.1Objective:
The project aims to create an interactive quiz game that is both educational
and engaging, allowing users to test their knowledge through multiple-choice questions
and receive immediate feedback on their performance. The game is built using HTML for
layout, CSS for styling, and JavaScript for functionality.
1.5.1.2 Key Elements of the Project:
1.5.1.2.a HTML for Structure:
o HTML forms the foundation of the quiz. It includes the essential elements
for displaying questions, multiple-choice answers, a timer, and score
indicators.
o The HTML structure may consist of a container for the quiz, a display for
each question and its answer choices, and areas for the timer and score.
1.5.1.2.b CSS for Styling:
o CSS is used to style the quiz interface to make it visually appealing and user-
friendly.
o Styles include color schemes for correct/incorrect answers, animations or
transitions, and an intuitive layout that guides users smoothly through the
quiz.
1.5.1.2.c JavaScript for Interactivity:
o JavaScript brings the quiz to life by adding interactivity. It dynamically
displays questions, manages answer selection, and updates the score and
timer.
o JavaScript functions handle the flow of the quiz, checking answers and
storing the user’s score.
1.5.1.2.d Designing Multiple-Choice Questions:
o Each question has multiple answer choices, only one of which is correct.
Users select their answer by clicking, which triggers immediate feedback.
o This design offers a clear, easy-to-understand format for users.
1.5.1.2.e Including a Timer and Score Tracking:
o A timer adds a challenge to the quiz by setting a limit on how long users

4
 have to complete it or answer each question.
o Score tracking updates in real-time as the user answers each question. The
final score is calculated based on the number of correct answers.
1.5.1.2.f Feedback on Correct and Incorrect Answers:
o After each answer selection, users receive instant feedback indicating
whether their answer was correct or incorrect.
o Feedback can be visual (e.g., color changes for correct/incorrect answers)
and/or textual, helping users learn from their mistakes.
1.5.1.2.g Displaying Final Score:
o At the end of the quiz, the final score is displayed along with feedback based
on the user’s performance.
o This final screen provides an overview of how the user performed,
encouraging them to replay or improve.
Conclusion:
This interactive quiz game leverages HTML, CSS, and JavaScript to create an
engaging, educational experience. By combining real-time feedback, a timed challenge,
and score tracking, the quiz encourages users to actively participate and improve their
knowledge. The project demonstrates the powerful combination of front-end technologies
to create fun, dynamic applications that are both informative and interactive.

5
1.2.2 TASK-2 E-Commerce Product Page:
Objective:
The objective of this project is to design a functional and visually appealing E-
Commerce product page that provides users with essential product information, allows for
a seamless purchasing process, and enhances user interaction with responsive design and
basic shopping cart functionality.
Key Elements of the Project:
1. Using HTML and CSS for Structure and Styling:
o HTML forms the backbone of the product page, structuring key elements
such as product details, images, pricing, and the “Buy Now” button.
o CSS is utilized to style these elements to create a clean, professional, and
user-friendly design, ensuring a visually engaging layout.
2. Displaying Product Details:
o The page includes a detailed product description, image, price, and the “Buy
Now” button.
o These details give users a comprehensive view of the product, increasing
their confidence in making a purchase.
3. Responsive Design for Various Screen Sizes:
o CSS media queries are implemented to ensure the product page adjusts
smoothly across different screen sizes (desktops, tablets, and mobile
devices).
o A responsive layout enhances the user experience by making the page
accessible and easy to navigate, regardless of device.
4. Adding Hover Effects for Product Image:
o CSS hover effects are applied to the product image, adding a subtle zoom
or scale-up effect when users hover over it.
o This interaction feature provides users with a closer look at the product and
makes the page feel more dynamic and engaging.
5. Implementing a Simple Shopping Cart with JavaScript:
o JavaScript adds interactivity to the page by managing a basic shopping cart
function.
o When the user clicks the “Buy Now” button, the selected product is added

6
 to the cart, and a message or alert notifies the user of the addition.
o The cart functionality allows users to track products they intend to purchase,
providing a practical e-commerce experience.
Conclusion:
This E-Commerce product page project combines HTML, CSS, and JavaScript to
create an interactive and responsive shopping interface. The page layout provides users
with detailed product information, while responsive design makes it accessible on various
devices. By incorporating hover effects and a simple JavaScript shopping cart, the project
demonstrates essential front-end techniques for developing functional, user-centric e-
commerce applications. This page provides a foundational template for an online store,
enhancing both user experience and engagement.

7
 CHAPTER-2

PROJECT DESCRIPTION

2.1 TASK-1 Interactive Quiz Game

Objective : create an interactive quiz game.
1. use HTML for the structure, CSS for styling, and java script for interactivity.

2. Design a quiz with multiple-choice question.

3. include a timer and score tracking.

4. Provide feedback on current and incorrect answers

5. display a final score at the end of the quiz.

Here’s a breakdown of the code provided, organized into key points:

2.1.1 HTML Structure:

1. Container Layout: The main container houses the quiz game, question
area, answer buttons, and a results section.

2. Quiz Elements:

• quiz: Displays the question and answers.

• question: Displays the current question.

• answer-buttons: A grid of buttons where the answer options are shown.

• timer: Shows the countdown timer starting from 60 seconds.

• score: Displays the current score.

• start-btn: Button to start the quiz.

• result: Hidden section that shows the final score and has a restart button
after the quiz ends.

3. Result Section: This section is hidden during gameplay and shows the final
score at the end.

CODE:
<!DOCTYPE html>
<html lang="en">

8
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Game</title>
<link rel="stylesheet" href="styles4.css">
</head>
<body>
<div class="container">
<div id="quiz">
<div id="question-container">
<div id="question">Question Text</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<div id="timer">Time: 60</div>
<div id="score">Score: 0</div>
<button id="start-btn" class="start-btn btn">Start</button>
</div>
</div>
<div id="result" class="hide">
<h2>Final Score</h2>
<p id="final-score"></p>
<button id="restart-btn" class="start-btn btn">Restart</button>
</div>
</div>
<script src="script4.js"></script>
</body>
</html>

9
2.1.2 CSS (Styling):
1. General Layout:

• The body has a flexbox layout, centering the quiz on the page.

• The container has a white background, rounded corners, and a shadow

for a clean and centered look.

2. Button Styling:

• Buttons have a blue background, white text, and rounded corners.

• On hover, buttons change color to a darker blue.

3. Hiding Elements: The .hide class is used to hide elements like the result
section.

CODE:

body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
.container {
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
text-align: center;
padding: 20px;
}
.btn {
cursor: pointer;
background: #007bff;
color: white;

10
 border: none;
border-radius: 5px;
padding: 10px 20px;
margin: 5px 0;
font-size: 16px;
width: 100%;
}
.btn:hover {
background: #0056b3;
}
.hide {
display: none;
}
#question {
margin-bottom: 20px;
font-size: 20px;
}
#answer-buttons {
display: flex;
flex-direction: column;
}
.controls {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
2.1.3 JavaScript (Functionality):
1. Game Variables:

• Shuffled Questions: Holds the shuffled list of questions.

• Current Question Index: Tracks the current question number.

• score: Keeps track of the player's score.

• Time Left: Stores the time left for the quiz, starting from 60 seconds.

• Timer Interval: Stores the interval ID for the countdown timer.

11
2. Question Data:

• An array questions contains question objects with text and possible

answers. Each answer has a boolean correct field.

3. Event Listeners:

• Start button (#start-btn) starts the game.

• Restart button (#restart-btn) resets the game after it ends.

4. Game Functions:

• Start Game(): Initializes the game by hiding the start button, resetting
the timer and score, shuffling the questions, and starting the timer.

• Set Next Question(): Prepares and displays the next question in the
shuffled list.

• Show Question(): Displays the current question and answer options.

• Reset State(): Clears previous answer buttons before displaying the new
set of answers.

• Select Answer(): Handles the logic when an answer is selected. It

checks if the answer is correct, updates the score, and moves to the next
question.

• End Game(): Stops the timer and displays the final score.

• Restart Game(): Resets the game by hiding the result section and
showing the start button again.

5. Timer: The timer counts down from 60 seconds. If time runs out, the game
ends.

CODE:

const startButton = document.getElementById('start-btn')

const restartButton = document.getElementById('restart-btn')
const questionContainerElement = document.getElementById('question-
container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
const timerElement = document.getElementById('timer')
const scoreElement = document.getElementById('score')

12
const resultElement = document.getElementById('result')
const finalScoreElement = document.getElementById('final-score')
let shuffledQuestions, currentQuestionIndex
let score = 0
let timeLeft = 60
let timerInterval
const questions = [
{
question: 'What is 2 + 2?',
answers: [
{ text: '4', correct: true },
{ text: '5', correct: false },
{ text: '3', correct: false },
{ text: '6', correct: false }
]
},
{
question: 'Which is the Fastest trainin india?',
answers: [
{ text: 'Gatimaan Express', correct: false },
{ text: 'Rajdhani Express', correct: false },
{ text: 'New Delhi-Bhopal Shatabdi Express', correct: false },
{ text: 'Vande Bharat Express', correct: true }
]
},
{
question: 'When assem became the part of india?',
answers: [
{ text: '1947', correct: false},
{ text: '1950', correct: true },
{ text: '1983', correct: false },
{ text: '1976', correct: false }
]
},
{

13
 question: 'What is the capital of France?',
answers: [
{ text: 'London', correct: false },
{ text: 'Paris', correct: true },
{ text: 'Berlin', correct: false },
{ text: 'Madrid', correct: false }
]
},
{
question: 'Who wrote "To Kill a Mockingbird"?',
answers: [
{ text: 'Harper Lee', correct: true },
{ text: 'Mark Twain', correct: false },
{ text: 'Ernest Hemingway', correct: false },
{ text: 'F. Scott Fitzgerald', correct: false }
]
},
{
question: 'which state is called as "Rice Bowl of India"?',
answers: [
{ text: 'West Bengal', correct: false },
{ text: 'Uttar Pradesh', correct: false },
{ text: 'Andhra Pradesh', correct: true },
{ text: 'Punjab', correct: false }
]
},
{
question: 'Which is the Rainless place in the world?',
answers: [
{ text: 'chile', correct: true },
{ text: 'Dry Valleyes', correct: false },
{ text: 'Dubai', correct: false },
{ text: 'Egypt', correct: false }
]
},

14
 {
question: 'which city is called "The city of Light"?',
answers: [
{ text: 'Paries', correct: true },
{ text: 'Varanasi', correct: false },
{ text: 'New York', correct: false },
{ text: 'None of this', correct: false }
]
},
{
question: '"Smallest city in the world"?',
answers: [
{ text: 'Ngerulmud', correct: false },
{ text: 'Hum', correct: false },
{ text: 'Adamstown', correct: false },
{ text: 'Vatican', correct: true }
]
},
{
question: 'What is the rank of India in Railway?',
answers: [
{ text: '4', correct: true },
{ text: '5', correct: false },
{ text: '3', correct: false },
{ text: '6', correct: false }
]
},
]
startButton.addEventListener('click', startGame)
restartButton.addEventListener('click', restartGame)
function startGame() {
startButton.classList.add('hide')
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')

15
 score = 0
scoreElement.innerText = 'Score: ' + score
timeLeft = 60
timerElement.innerText = 'Time: ' + timeLeft
timerInterval = setInterval(() => {
timeLeft--
timerElement.innerText = 'Time: ' + timeLeft
if (timeLeft <= 0) {
clearInterval(timerInterval)
endGame()
}
}, 1000)
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}

16
 }
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
if (correct) {
score++
scoreElement.innerText = 'Score: ' + score
}
if (shuffledQuestions.length > currentQuestionIndex + 1) {
currentQuestionIndex++
setNextQuestion()
} else {
clearInterval(timerInterval)
endGame()
}
}
function endGame() {
questionContainerElement.classList.add('hide')
resultElement.classList.remove('hide')
finalScoreElement.innerText = 'You scored ' + score + ' out of ' + questions.length
}
function restartGame() {
resultElement.classList.add('hide')
startButton.classList.remove('hide')
}
Game Flow:

1. Click Start to shuffle the questions and begin the quiz.

2. Each question is displayed with four answer options. Selecting the correct
answer increases the score.

3. The quiz runs until all questions are answered or the timer reaches 0.

4. At the end, the final score is shown, and the player can restart the game by
clicking the Restart button

17
2.1.4 Output:

Fig(2.1.4.a) QUESTION FORMAT Fig(2.1.4.b) EXAMPLE QUESTION

Fig(2.1.4.c) EXAMPLE QUESTION 2 Fig(2.1.4.d) FINAL SCORE

Fig(2.1.4.e) RESTART PAGE

18
 2.2 TASK-2 E-Commerce Product Page:

Objective :- Design a product page for an E-Commerce website

1. Use HTML and CSS to structure and style the page
2. Include product details, image, price, and a “Buy Now” button.
3. Ensure the page is responsive for various screen sizes.
4. Add hover effects for product image.
5. Implement a simple shopping cart function using JavaScript.
Here's a detailed overview of each part of the provided code for creating a personal portfolio
webpage, including HTML structure, CSS styling, and JavaScript functionality.
2.2.1 HTML Structure
HTML Document Declaration:
This declaration specifies the document type as HTML5.
Head Section:
Meta Tags:
• charset="UTF-8" sets character encoding for the document.
• viewport tag ensures the page is responsive by scaling it appropriately on different
devices.
• description, keywords, and author tags provide metadata to help with SEO and
identification of the page’s purpose and ownership.
Title: Sets the page title that appears in the browser tab.
Stylesheet Links: Links to the external CSS file styles1.css. (Note: There’s a duplicate
<title> and stylesheet link here that could be removed for optimization.)
Body Content:

• Header: Contains a navigation bar with links to other sections (Home, About,
Projects, Contact) and a welcoming title.
Main Content:

• About Section: Provides a personal introduction.

• Projects Section: Lists featured projects with images and titles. Note that the image
path for "Project 1" points to a local file, which won't display on a live server.
• Footer: Provides copyright information.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>

19
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Page</title>
<link rel="stylesheet" href="e-commerce.css">
</head>
<body>
<div class="container">
<div class="product">
<div class="product-image">
<img src="C:\Users\poorn\OneDrive\Pictures\Screenshots\Screenshot 2024-10-
27 210947.png" alt="Product Image" class="img-hover">
</div>
<div class="product-details">
<B><h1 class="product-title">LED TV</h1></B>
<p class="product-description">Television (TV) is a telecommunication medium
for transmitting moving images and sound.LED TVs are preferred for their energy
efficiency, slimmer design, and enhanced picture quality.LEDs consume less power than
liquid crystal displays.</p>
<span class="product-price">$999.99</span>
<button class="buy-button" onclick="addToCart()">Buy Now</button>
</div>
</div>
</div>
<script src="scr.js"></script>
</body>
</html>
2.2.2 CSS Styling:
• Universal Selector (*): Applies the box-sizing: border-box rule to all elements,
making layout calculations more predictable.
• Body Styling: Sets the font, background color, and overall padding.
• Container Styles: Creates a container centered on the page with a maximum width,
a white background, rounded corners, and a box shadow.
• Product Styling: Contains a product display layout with centered alignment and
hover effects on the images for a smooth enlargement.

• Button Styling: Styles a buy-button class with colors, rounded corners, and hover
effects.
• Media Query: Ensures that on smaller screens (600px and below), the product
items stack vertically for better mobile responsiveness.

20
CODE:
*{
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: auto;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
}
.product-image {
width: 100%;
text-align: center;
}
.product-image img {
max-width: 100%;
border-radius: 8px;
transition: transform 0.3s;
}
.product-image img.img-hover:hover {
transform: scale(1.05);
}
.product-details {
padding: 20px;
text-align: center;
}
.product-title {
font-size: 24px;
margin: 0;
}

21
.product-description {
margin: 10px 0;
color: #555;
}
.product-price {
font-size: 20px;
color: #333;
font-weight: bold;
}
.buy-button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.buy-button:hover {
background-color: #218838;
}
@media (max-width: 600px) {
.product {
flex-direction: column;
padding: 10px;
}
}
2.2.3 JavaScript Functionality

• Cart Array: Initializes an empty cart array to store products added to it.
• AddToCart Function:
✓ Creates a product object with properties title, price, and image.
✓ Adds the product to the cart array and displays an alert to confirm the action.
✓ Logs the updated cart array to the console for debugging purposes.
CODE:
let cart = [];
function addToCart() {
const product = {
title: "Product Title",
price: 29.99,
image: "https://via.placeholder.com/300"
};

22
 cart.push(product);
alert(`${product.title} has been added to your cart!`);
console.log(cart);
}
Potential Improvements

• Remove Duplicates: Remove the duplicate <title> and stylesheet link in the
<head> for optimization.
• Image Paths: Use relative paths for images to ensure they display on a live server.
• Dynamic Cart Display: Display the contents of the cart on the webpage rather than
only in the console.

• Responsive Design Enhancements: Additional media queries can improve the

layout on various screen sizes.
• Accessibility: Add more descriptive alt attributes to images to improve screen
reader compatibility.
• SEO Optimization: Add more specific meta tags to boost SEO ranking and search
visibility.
Conclusion
This code forms a structured foundation for a personal portfolio, styled with CSS for a clean
look and enhanced with JavaScript for a simple cart functionality. Further enhancements
could turn this into a fully interactive and visually engaging portfolio site.
2.2.4 Output

Fig(2.2.4.a) PRODUCT PAGE

23
 Fig(2.2.4.b) ALERT MESSAGE

Fig(2.2.4.c) ADDING PRODUCT TO CART

24
Fig(2.2.4.d)ADDING NO. OF PRODUCT

Fig(2.2.4.e) DROPING OF PRODUCT

25
 CHAPTER 3

SUMMARY AND CONCLUSON

3.1 Summary:
The interactive quiz game is designed to engage users through a structured layout using
HTML, styled with CSS, and made interactive with JavaScript. Key components include:
A main container includes elements for the quiz, such as question display, answer buttons,
timer, score tracker, start button, and a hidden results section.
The layout uses flexbox for centering, featuring a clean container with rounded corners and
button styles that change color on hover.
Variables track shuffled questions, current question index, score, and countdown timer.
An array of questions with possible answers, including correct indicators.
Event listeners for starting and restarting the game.
Functions to initialize the game, display questions, handle answers, and show the final
score.
Players start the quiz by clicking the start button, answer multiple-choice questions, and
receive a final score at the end, with an option to restart the game.
This design promotes user interaction and learning, with features that ensure a dynamic and
engaging experience

The provided code is a foundational structure for an e-commerce product page. It includes
a clean HTML layout for displaying product details (such as title, image, price, and a “Buy
Now” button), styled with CSS for a visually appealing and responsive design. Key CSS
features include hover effects on the product image for interactivity and media queries to
ensure a seamless experience across various screen sizes. Additionally, a JavaScript
function enables a basic shopping cart functionality, where products can be added to a cart,
stored in an array, and logged in the console for confirmation.

26
3.2 Conclusion:
This code effectively sets up a structured and styled product page for an e-commerce
website. The CSS styling and JavaScript functionality create a user-friendly experience,
with hover effects and responsive design making the page visually engaging and easy to
use on different devices. Suggestions for improvement include optimizing code by
removing duplicates, improving image paths, and adding a dynamic cart display on the
webpage. These enhancements could further elevate the page’s functionality, accessibility,
and SEO.

This interactive quiz game effectively combines web development principles to provide an
engaging and educational experience. By using HTML, CSS, and JavaScript, it creates a
functional and visually appealing quiz platform. Key features such as score tracking, a
countdown timer, and real-time feedback enhance user interaction and learning outcomes.

Potential enhancements could include expanding the question set, adding sound effects for
correct/incorrect answers, and implementing a more sophisticated user interface. Overall,
this project showcases fundamental web development skills and can serve as a foundation
for more complex interactive applications.

27
 REFERENCES

• Mozilla Developer Network (MDN). (2024). HTML: HyperText Markup Language.

Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML
• Mozilla Developer Network (MDN). (2024). CSS: Cascading Style Sheets. Retrieved
from https://developer.mozilla.org/en-US/docs/Web/CSS
• Mozilla Developer Network (MDN). (2024). JavaScript Guide. Retrieved from
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
• W3Schools. (2024). Responsive Web Design. Retrieved from
https://www.w3schools.com/html/html_responsive.asp
• FreeCodeCamp. (2024). How to Build an E-commerce Product Page with HTML, CSS,
and JavaScript. Retrieved from https://www.freecodecamp.org/news/build-an-
ecommerce-product-page/
• GeeksforGeeks. (2024). How to Build a Quiz App using JavaScript. Retrieved from
https://www.geeksforgeeks.org/how-to-build-a-quiz-app-using-javascript/
• CSS-Tricks. (2024). A Complete Guide to Flexbox. Retrieved from https://css-
tricks.com/snippets/css/a-guide-to-flexbox/
• ReactJS Official Documentation. (2024). React – A JavaScript Library for Building
User Interfaces. Retrieved from https://reactjs.org/docs/getting-started.html

28