WEB DEVELOPMENT

A Summer Internship-I report submitted to

JAWAHARLAL NEHRU TECHONOLOGICAL UNIVERSITY ANANTAPUR
ANANTHAPURAMU

in partial fulfilment of the

requirements for the award of the
degree of

BACHELOR OF TECHNOLOGY
in
ELECTRONICS AND COMMUNICATION ENGINEERING

Submitted by

G. BHAVANI SHANKAR GOUD (Roll no: 21121A0464)

Under the Esteemed Supervision of

Dr. AMIT GANGOPADHYAY, M.Tech., Ph.D.
Professor, Department of ECE

Department of Electronics and Communication Engineering

SREE VIDYANIKETHAN ENGINEERING COLLEGE
(AUTONOMOUS)
Sree Sainath Nagar, A. Rangampet, Tirupati − 517102.
(2021-2025)

1
 SREE VIDYANIKETHAN ENGINEERING COLLEGE
(AUTONOMOUS)
Sree Sainath Nagar, A.Rangampet - 517 102

VISION
To be one of the Nation’s premier Engineering Colleges by achieving the highest order of excellence in
Teaching and Research.

MISSION
 To foster intellectual curiosity, pursuit and dissemination of knowledge.
 To explore students’ potential through academic freedom and integrity.
 To promote technical mastery and nurture skilled professionals to face competition in ever
increasing complex world.

DEPARTMENT OF ELECTRONICS AND COMMUNICATION ENGINEERING

Vision
To be a center of excellence in Electronics and Communication Engineering through teaching and
research producing high quality engineering professionals with values and ethics to meet local and
global demands.

Mission
 The Department of Electronics and Communication Engineering is established with the cause
of creating competent professionals to work in multicultural and multidisciplinary
environments.
 Imparting knowledge through contemporary curriculum and striving for development of
students with diverse background.
 Inspiring students and faculty members for innovative research through constant interaction
with research organizations and industry to meet societal needs.
 Developing skills for enhancing employability of students through comprehensive training
process.
 Imbibing ethics and values in students for effective engineering practice.

2
3
 B. Tech. (Electronics and Communication Engineering)

Program Educational Objectives

After few years of graduation, the graduates of B.Tech (ECE) will be:
PEO1. Enrolled or completed higher education in the core or allied areas of electronics and
communication engineering or management.
PEO2. Successful entrepreneurial or technical career in the core or allied areas of electronics and
communication engineering.
PEO3. Continued to learn and to adapt to the world of constantly evolving technologies in the
core or allied areas of electronics and communication engineering.

Program Outcomes
On successful completion of the Program, the graduates of B.Tech. (ECE) Program will be able to:
PO1 Engineering knowledge: Apply the knowledge of mathematics, science, engineering
fundamentals, and an engineering specialization to the solution of complex engineering
problems.
PO2 Problem analysis: Identify, formulate, research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
PO3 Design/development of solutions: Design solutions for complex engineering
problems and design system components or processes that meet the specified needs with
appropriate consideration for the public health and safety, and the cultural, societal, and
environmental considerations.
PO4 Conduct investigations of complex problems: Use research-based knowledge and
research methods including design of experiments, analysis and interpretation of data, and
synthesis of the information to provide valid conclusions.
PO5 Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and modeling to complex
engineering activities with an understanding of the limitations.
PO6 The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.
PO7 Environment and sustainability: Understand the impact of the professional
engineering solutions in societal and environmental contexts, and demonstrate the
knowledge of, and need for sustainable development.
PO8 Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
PO9 Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.
PO10 Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give
and receive clear instructions.
PO11 Project management and finance: Demonstrate knowledge and understanding of
the engineering and management principles and apply these to one’s own work, as a
member and leader in a team, to manage projects and in multidisciplinary environments.

4
 PO12 Lifelong learning: Recognize the need for, and have the preparation and ability to engage
in independent and life-long learning in the broadest context of technological change.

Program Specific Outcomes

On successful completion of the Program, the graduates of B. Tech. (ECE) will be able to
PSO1. Design and develop customized electronic circuits for domestic and industrial applications.
PSO2. Use specific tools and techniques to design, analyze and synthesize wired and wireless
communication systems for desired specifications and applications.
PSO3. Apply suitable methods and algorithms to process and extract information from signals
and images in Radar, Satellite, Fiber optic and Mobile communication systems.

5
6
Department of Electronics and Communication Engineering
SREE VIDYANIKETHAN ENGINEERING COLLEGE
(AUTONOMOUS)
Sree Sainath Nagar, A.Rangampet - 517102.

Certificate
4his is to certify that the Summer Internship-I

Report entitled WEB DEVELOPMENT is the bonafide worA done &

submitted by

G. BHAVANI SHANKAR GOUD (21121A0464) in the Department of

Electronics and Communication Engineering, Sree Vidyanikethan

Engineering College, A.Rangampet and is submitted to Jawaharlal Nehru

Technological University Anantapur, Ananthapuramu in partial fulfilment of

the requirements for the award of degree of Bachelor of 4echnology

in Electronics and Communication Engineering during 2o2r-2o25z

Supervisor Head of the Department

Dr. Amit Gangopadhyay,M.Tech.,Ph.D. Dr. V.Vijaya Kishore, M.Tech., Ph.D.
Professor, Dept. of ECE Professor & Head of Dept. of ECE

Senior Faculty Member

7
8
 ACKNOWLEDGEMENTS

I am deeply indebted to the supervisor, Dr. AMIT GANGOPADHYAY, M.Tech.,Ph.D., Professor

of Department of Electronics and Communication Engineering for valuable guidance, constructive
criticism and keen interest evinced throughout the course of my internship work. I am really
fortunate to associate ourselves with such an advising and helping guide in every possible way, at
all stages, for the successful completion of this work.

I, express my deep sense of gratitude to Dr. V.VIJAYA KISHORE, M.Tech., Ph.D. Professor and
Head of the Department of Electronic and Communication Engineering for his valuable guidance
and constant encouragement given to me during this Summer Internship-I and the course.

I, express gratitude to our principal Dr. B. M. SATISH, Ph.D., for supporting me in completion
of my Summer Internship-I work successfully by providing the facilities. I am pleased to express
my heart full thanks to our faculty in Department of ECE of Sree Vidyanikethan Engineering
College for their moral support and good wishes.

Finally, I have a notation to express my sincere thanks to friends and all those who guided,
inspired and helped me in the completion of my Summer internship-I.

G. BHAVANI SHANKAR GOUD - 21121A0464

-

9
 ABSTRACT
This internship report provides a comprehensive overview of the four-week web
development internship undertaken at Internpe, focusing on the completion of various tasks
designed to enhance practical skills and foster a deeper understanding of web development. The
report covers the development of four distinct projects, each aimed at honing different aspects of
web development. The first project involved the creation of a "Simple Calculator" application.
This task served as a foundational exercise, allowing for hands-on experience in implementing
basic arithmetic functions using HTML, CSS, and JavaScript. The project emphasized the
importance of user interface design and responsiveness, providing a solid introduction to the
principles of front- end development.
The second project centered around the development of an "E-Commerce" website. This
task delved into the complexities of building a dynamic and interactive online shopping platform.
The third project focused on creating a "Todo List" application, emphasizing the importance of
task management and user experience. The implementation of features like task prioritization and
completion tracking further enriched the understanding of interactive web application
development. The final project involved the development of a "Connect Four" game, combining
elements of both front-end and back-end development. The project emphasized the importance of
real-time updates and communication between clients and servers, providing insights into the
world of multiplayer web game development.

10
 CONTENTS

Page no.
Acknowledgements
.. vii

Abstract .. viii
List of Figures .. xi
Chapter 1 : INTRODUCTION 12-14

1.1 Web Development .. 12

1.2 Why we use web development .. 13
1.3 When we use development .. 14
1.4 Where we use development .. 14

Chapter 2: OBJECTIVE .. 15

Chapter 3 : ROAD MAP TO WEBDEVELOPMENT .. 16-19

3.1 HTML .. 16
3.2 CSS .. 17
3.3 JAVA SCRIPT .. 19

Chapter 4: TASKS .. 20-47

4.1 CALCULATOR .. 20
4.2 TEMPERATURE CONVERTOR .. 26
4.3
TO-DO LIST .. 31
4.4
RESUME BUILDER .. 35

11
12
Chapter 5 : 48-51

CASE STUDY .. 49
CONCLUSION .. 50
REFERENCES .. 51

13
 LIST OF FIGURES

Figures Description page no.

Figure 3.1 Road Map To Web Development 16

Figure 4.1 Calculator Output 25

Figure 4.2 Temperature Converter 26

Figure 4.3 TO-DO list Output 31

Figure 4.4 Resume Builder 35

14
 CHAPTER 1
INTRODUCTION
1.1 Web Development
Web development is the work involved in developing a website for the Internet
(World Wide Web) or an intranet (a private network). Web development can range from
developing a single static page of plain text to complex web applications, electronic
businesses, and social network services. A more comprehensive list of tasks to which
Web development commonly refers, may include Web engineering, Web design, and
network security configuration, and e-commerce development.Among Web
professionals, "Web development" usually refers to the main non-design aspects of
building Web sites: writing markup and coding. Web development may use content
management systems (CMS) to make content changes easier and available with basic
technical skills.

For larger organizations and businesses, Web development teams can consist of
hundreds of people (Web developers) and follow standard methods like Agile
methodologies while developing Web sites. Smaller organizations may only require a
single permanent or contracting developer, or secondary assignment to related job
positions such as a graphic designer or information systems technician.Web development
may be a collaborative effort between departments rather than the domain of a designated
department. There are three kinds of Web developer specialization: front-end developer,
back-end developer, and full-stack developer. Front- end developers are responsible for
behavior and visuals that run in the user browser, while back-end developers deal with
the servers.

Web development refers to the creating, building, and maintaining of websites. It

includes aspects such as web design, web publishing, web programming, and database
management. It is the creation of an application that works over the internet that is
websites.

15
The word Web Development is made up of two words, that is:

Web: It refers to websites, web pages or anything that works over the internet.

Development: It refers to building the application from scratch.

Web development tools come as browser add-ons or built-in features in web

browsers. Most popular web browsers, such as Google Chrome, Firefox, Internet
Explorer, Safari, Microsoft Edge and Opera, have built-in tools to help web developers,
and many additional add-ons can be found in their respective plugin download centres.
Web development tools allow developers to work with a variety of web technologies,
including HTML, CSS, the DOM, JavaScript, and other components that are handled by
the web browser. Due to increasing demand from web browsers to do more, popular web
browsers have included more features geared for developers
Web Development can be classified into two ways:

The part of a website where the user interacts directly is termed as front end. It is
also referred to as the ‘client side’ of the application. Popular frontend technologies are
HTML,CSS and Java script which are used in this project.

1.2 Why we use web development

Web development is a crucial aspect of creating and maintaining websites,
enabling individuals and businesses to establish an online presence and interact with a
global audience. It involves a combination of programming, design, and server
management to build dynamic and interactive websites. The primary languages used in
web development include HTML for structuring content, CSS for styling, and JavaScript
for adding interactivity. Server-side scripting languages like PHP, Python, and Ruby are
employed for handling server-related tasks. Web development such as Django, Ruby on
Rails, and Express.js, streamline the development process by providing pre-built
modules and a structured environment. Developers use a variety of tools and techniques
to optimize websites for speed, responsiveness, and cross-browser compatibility. Web
development plays a pivotal role in e- commerce, social media, content management
systems, and various other online platforms, contributing to the growth and success of
businesses in the digital age. Overall, web development is essential for shaping the
online landscape and facilitating efficient communication and interaction on the internet

16
1.3 When we use web development
Web development is the process of creating and maintaining websites or web
applications. It encompasses a range of tasks and disciplines, including web design,
front- end development, back-end development, and web server configuration. Front-end
development focuseson the user interface and user experience, involving the creation of
visually appealing and interactive elements using technologies like HTML, CSS, and
JavaScript. Back-end development involves server-side programming and database
management, ensuring the functionality and performance of the website. Web
development also includes considerations for web security, accessibility, and
optimization for various devices and browsers. Continuous advancements in web
technologies and frameworks, such as React, Angular, and Vue.js, contribute to the
evolution of web development practices. The field is dynamic, requiring developers to
stay updated with the latest trends and tools to build efficient, scalable, and responsive
web solutions. Overall, web development plays a crucial role in shaping the online
presence of businesses, organizations, and individuals, serving as a cornerstone for
digital communication and interaction on the internet.

1.4 Where we use web development

Web development is a crucial aspect of modern technology, playing a pivotal
role in awide range of industries and applications. From e-commerce and social media to
information dissemination and online services, the web is the backbone of countless
digital experiences. Businesses leverage web development to create interactive and user-
friendly websites that serve as their virtual storefronts, enabling them to reach a global
audience and conduct transactions efficiently. Educational institutions utilize web
development for online learning platforms, providing flexible and accessible education.
Government agencies employ web development to enhance citizen services, streamline
information dissemination. In the entertainment sector, web development is integral to
the creation of engaging websites and applications for content delivery. Additionally,
web development is crucial in the realm of healthcarefor patient portals, remote
consultations, and the management of medical records. Overall, web development is
omnipresent, powering the digital landscape and shaping the way individuals and
organizations interact, communicate, and conduct business in the contemporary world.

17
 CHAPTER 2
OBJECTIVE
Internships are generally thought of to be reserved for college students looking
to gain experience in a particular field. However, a wide array of people can benefit from
Training Internships to receive real world experience and develop their skills. Utilizing
internships is a great way to build your resume and develop skills that can be emphasized
in your resume for future jobs. When you are applying for a Training Internship, make
sure to highlight any special skills or talents that can make you stand apart from the rest
of the applicants so that you have an improved chance of landing the position. As I have
knowledge of MERN stack, an objective of this position is, I should emphasize the skills
that already possess in the web development and practice my coding skills and advance
towards a career as a full-stack developer.
The primary objective of web development is to create and maintain websites
or web applications that deliver a seamless and engaging user experience. This involves a
multifaceted approach encompassing front-end development for designing the user
interface and ensuring a visually appealing presentation, back-end development for
server- side scripting and database management, and the integration of various
technologies to enable dynamic and interactive web functionality. Additionally, web
development optimize sites for performance, responsiveness, and accessibility across
different devices and browsers. The overarching goal is to meet the specific needs of
users while adhering to industry standards, security protocols, and the ever-evolving
landscape of technology, ultimately providing a reliable and efficient platform for
information dissemination, e- commerce, communication, and various online
activities.

18
19
 CHAPTER 3
ROADMAP TO WEB
DEVELOPMENT

Figure 3.1 Road Map To Web Development

3.1 HTML

HTML, which stands for Hypertext Markup Language, is the standard markup
language used to create and structure content on the World Wide Web. It's the backbone
of most web pages and is responsible for defining the structure and presentation of web
content. HTML is a markup language, not a programming language. It consists of a set of
tags (also known as elements) that are used to annotate the different parts of a document.
These tags provide instructions to web browsers on how to display the content. HTML
documents are made up of HTML elements, which are enclosed in tags. Tags are
enclosed in angle brackets (<>). An HTML element typically consists of an opening tag,
the content, and a closing tag. For example, a basic HTML document structure includes
the following elements:
20
21
 <!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to my web page</h1>
<p>This is a paragraph of text</p>
</body>
</html>
HTML elements can have attributes that provide additional information about the element.
Attributes are placed within the opening tag. For example:

<a href ="https://www.example.com" title="Visit Example">Visit Example</a>

HTML elements can be nested within other elements. This allows you to create a structured
hierarchy of content. For example, you can have a list of items within a <ul> (unordered list)
element, and each item is an <li> (list item) element.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
HTML documents have a specific structure. They start with a <!DOCTYPE> declaration,
followed by the <html> element, which contains both the <head> and <body> sections.
The <head> section includes metadata, and the <body> section contains the visible
content. HTML5 introduced a set of semantic elements like <header>, <nav>, <section>,
<article>, and <footer, among others. These elements provide meaning to the structure of
a web page, making it more understandable for both browsers and dev elopers. For
instance, the
<header> element is used to define a page header, and the <nav> element is used for
navigation menus.

HTML is the foundation of web development, and it works in conjunction with other
technologies like CSS (Cascading Style Sheets) for styling and JavaScript for
interactivity. Together, these technologies allow web developers to create visually
appealing and interactive web pages.

3.2 CSS

CSS, or Cascading Style Sheets, is a stylesheet language used for describing the
presentation and formatting of HTML (Hypertext Markup Language) and XML (extensible

22
Markup Language) documents. In simpler terms, CSS is what makes web pages look
attractive and visually appealing.CSS allows web developers to separate the content
(HTML) of a web page from its presentation (styling and layout). This separation makes
it easier to manage and maintain web pages and enables a consistent design across a
website. CSS operates based on a set of rules that define how HTML elements should be
styled. Each rule consists of a selector and a declaration block. The selector specifies
which HTML elements the rule applies to, and the declaration block contains a list of
property-value pairs that define how those elements should be styled.

/* Example CSS rule */

h1 {
colour: blue;
font-size: 24px;
}
In this example, the h1 selector targets all <h1> elements in the HTML document and
changes their text colour to blue and font size to 24 pixels.

CSS provides a wide range of properties and values that can be used to control
the appearance of elements. Some common CSS properties include colour (text colour),
font- size (text size), margin (spacing around an element), background-colour
(background colour), and many more. The "Cascading" in CSS refers to the order in
which styles are applied. Styles can be defined in different places, such as inline styles,
internal stylesheets, and external stylesheets. If conflicting styles are defined, CSS
follows a specific order of precedence to determine which style should be applied.
Specificity, which is determined by the selector's complexity and specificity of IDs,
classes, and element names, also plays a role in resolving conflicting styles.

CSS allows you to target elements using classes and IDs. Classes are reusable
styles that can be applied to multiple elements, while IDs are unique identifiers for
individual elements. This enables precise styling and reusability. CSS can be applied in
different ways:

External Stylesheet: CSS rules are placed in a separate . css file and linked to HTML
documents. This approach promotes reusability and easy maintenance across multiple
pages.

Internal Stylesheet: CSS rules are defined within the HTML document using the
<style> element in the document's <head>. This is useful for individual documents.

23
3.3 Java Script

JavaScript is a versatile and widely-used programming language that plays a

fundamental role in web development. It is primarily responsible for adding
interactivity,

dynamic behaviour, and functionality to websites and web applications. JavaScript is

primarily used for client-side scripting, meaning it runs in the user's web browser. When
a web page is loaded, the browser executes JavaScript code to interact with the Document
Object Model (DOM) and make changes to the page content and behaviour without
requiring a round-trip to the web server. This enables dynamic and interactive web
experiences. JavaScript is a versatile language that can be used for a wide range of
purposes, including web development, server-side programming (with platforms like
Node.js), mobile app development (using frameworks like React Native), game
development, and more. Its flexibility makes it a valuable language for both front-end
and back-end development.
JavaScript's syntax is similar to many other programming languages, making it
relatively easy for developers to learn and use. It uses functions, variables, control
structures (if statements, loops), and objects to organize and control code. JavaScript is
commonly used to manipulate the Document Object Model (DOM), which represents the
structure of an HTML document. Developers can access and modify elements on a web
page, change content, respond to user input (e.g., form submissions, button clicks), and
create dynamic effects (e.g., animations) by interacting with the DOM.JavaScript allows
developers to define event handlers to respond to user actions or events, such as clicks,
keypresses, and mouse movements. This enables the creation of interactive web
applications that respond to user input in real-time.
Asynchronous JavaScript and XML (AJAX) is a technique that uses JavaScript to
make asynchronous requests to a web server without reloading the entire web page. This
is crucial for building responsive and dynamic web applications that can fetch and
display data from servers in the background.

24
 CHAPTER
4 TASKS
4.1 CALCULATOR
Brief introduction to calculator:
A calculator is a handheld electronic device or software application
designed to perform mathematical calculations. It can handle basic arithmetic operations
such as addition, subtraction, multiplication, and division, as well as more advanced
functions like trigonometry, logarithms, and statistical calculations. Calculators come in
various forms, including basic pocket calculators, scientific calculators, graphing
calculators, and even specialized calculators for specific fields like engineering or
finance. They are widely used in education, business, science, and everyday life to
simplify and expedite mathematical tasks.

USES:
Calculators have a wide range of uses in various fields. Some common uses include:

1. Arithmetic Calculations: Basic calculators are used for everyday arithmetic

operations like addition, subtraction, multiplication, and division.

2. Scientific Calculations: Scientific calculators can handle more complex functions

such as trigonometric, logarithmic, and exponential calculations, making them useful in
mathematics, science, and engineering.

3. Financial Calculations: Financial calculators help with tasks like calculating interest
rates, loan payments, and investment returns, making them essential in the finance and
accounting sectors.

4. Engineering and Technical Fields: Specialized calculators cater to engineers,

architects, and other technical professionals for tasks like structural analysis, electrical
calculations, and more.

5. Conversions: Many calculators have unit conversion features to switch between

different measurement systems like length, weight, and temperature.

25
PROGRAM CODE:
HTML & CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, rgb(137, 76, 152), rgb(79, 195, 215));
}
.calculator {
border: 2px rgb(239, 128,
63); border-radius: 20px;
padding: 20px;
background: transparent;
box-shadow: 0px 3px 15px rgb(211, 159, 61);
}
input {
width: 100%;
height: 49px;
background: transparent;
border: none;

26
 text-align: end;
font-size: 26px;
padding: 20px;
margin: 9px;
box-shadow: 0px 3px 15px aqua;
cursor: pointer;
}
input::placeholder {
color: #ffff;
}
button {
width: 58px;
height: 38px;
border: none;
border-radius: 50%;
margin: 10px;
background: none;
box-shadow: 0px 3px 15px #2a4c62;
cursor: pointer;
}.equal {
width: 134px;
margin: 11px;
background: transparent;
color: #c8d911;
;
}
.op {
background: transparent;
color: #d93b11;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" placeholder="0" id="inputBox">
<div>

27
 <button class="op">AC</button>
<button class="op">DEL</button>
<button class="op">%</button>
<button class="op">/</button>
</div>
<div>
<button>9</button>
<button>8</button>
<button>7</button>
<button class="op">*</button>
</div>
<div>
<button>6</button>
<button>5</button>
<button>4</button>
<button class="op">-</button>
</div>
<div>
<button>3</button>
<button>2</button>
<button>1</button>
<button class="op">+</button>
</div>
<div>
<button>00</button>
<button>.</button>
<button class="equal">=</button>
</div>
</div>
<script src="script.js">
let input = document.getElementById('inputBox');
let buttons = document.querySelectorAll('button');
let string = "";
let arr = Array.from(buttons);
arr.forEach(button => {

28
 button.addEventListener('click', (e) => {
if (e.target.innerHTML == '=') {
string = eval(string);
input.value = string;

}
else if (e.target.innerHTML == 'AC')
{ string = "";
input.value = string;
}
else if (e.target.innerHTML == 'DEL') {
string = string.substring(0, string.length - 1);
input.value = string;
}
else {
string += e.target.innerHTML;
input.value = string;
}
})
})
</script>
</body>
</html>

Javascript:
let input = document.getElementById('inputBox');
let buttons = document.querySelectorAll('button');
let string = "";
let arr = Array.from(buttons);
arr.forEach(button => {
button.addEventListener('click', (e) =>{
if(e.target.innerHTML == '='){
string = eval(string);
input.value = string;
}
else if(e.target.innerHTML ==
'AC'){string = "";
input.value = string;

29
 }
else if(e.target.innerHTML == 'DEL'){
string = string.substring(0, string.length-
1); input.value = string;
}
else{
string += e.target.innerHTML;
input.value = string;
}

})
})

OUTPUT:

Figure 4.1 Calculator

30
4.2 TEMPERATURE CONVERTER
Brief introduction to Temperature converter:
The user will input a temperature in either Fahrenheit or Celsius and press a "convert"
button. The converted temperature will then be displayed with the correct unit.

Key aspects of e-commerce include:

1. Online Marketplaces: E-commerce is often facilitated through online marketplaces
like Amazon, eBay, and Alibaba, where various sellers can list their products for a global
customer base.

2. Online Stores: Many businesses operate their own e-commerce websites, allowing
them to directly sell their products or services to customers online.

3. Digital Products: E-commerce isn't limited to physical goods. It also includes the
sale of digital products such as software, e-books, music, and online courses.

4. Payment Processing: Secure online payment systems, like credit card transactions,
digital wallets (e.g., PayPal), and cryptocurrencies, are essential for completing e-
commerce transactions.

5. Customer Reviews and Feedback: Online reviews and feedback are integral to e-
commerce, influencing consumer purchasing decisions .E-commerce has experienced
rapid growth, particularly in the last few decades, transforming traditional retail and
reshaping the way people shop. It offers convenience, a wide variety of choices, and the
ability to compare prices and products easily. The ongoing evolution of technology
continues to drive innovations in the e-commerce sector, making it an integral part of the
modern economy.

USES:
E-commerce, or electronic commerce, has a wide range of uses and applications, including:

1. Online Retail: E-commerce allows businesses to sell products directly to consumers

over the internet, providing a convenient way to shop for a wide variety of goods.

2. Digital Products: It's used to sell digital goods and services such as ebooks, software,
music, and online courses.

31
3. Online Marketplaces: Platforms like Amazon and eBay connect buyers and sellers,
enabling individuals and businesses to sell a wide range of products.

4. Food Delivery: E-commerce is used to order food from restaurants for delivery or
pickup through services like Uber Eats and Door Dash.

5. Travel and Accommodation: Booking flights, hotels, and vacation rentals online is a
common use of e-commerce.

6. Online Banking and Payments: E-commerce enables secure online banking,

digital wallets, and payment processing for a wide range of transactions

These are just some examples of the many uses of e-commerce in various
industries, making it a fundamental part of the modern economy.

PROGRAM CODE:
HTML:
<!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.0" />
<title>Temperature Converter</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1 class="heading">Temperature Converter</h1>
<div class="temp-container">
<label for="celsius">Celsius:</label>
<input onchange="computeTemp(event)" type="number" name="celsius" id="celsius"
placeholder="Enter Temperature" class="input" />
<div class="temp-container">
<label for="kelvin">Kelvin:</label>
<input onchange="computeTemp(event)" type="number" name="kelvin" id="kelvin"
placeholder="Enter Temperature" class="input" />
</div>
</div>

32
 <script src="script.js"></script>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?
family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+
Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&f
amily=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,7
00&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,70
0;1,700&display=swap');
body {
margin: 0;
background-image: linear-gradient(45deg, #020024 0%, #090979 35%, #00d4ff 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
color: white;
}
.container {
background: rgba(255, 255, 255, 0.3);
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
width: 85%;
max-width: 450px;
min-width: 350px;
display: flex;
flex-direction: column;
align-items: center;
}
.heading {
font-size: 32px;
}
33
.temp-container {
width: 100%;
padding: 15px;
font-weight: bold;
font-size: 18px;
}
.input::placeholder {
color: lightgrey;
}

JAVASCRIPT
const celsiusEl = document.getElementById("celsius");
const fahrenheitEl = document.getElementById("fahrenheit");
const kelvinEl = document.getElementById("kelvin");
function computeTemp(event) {
const currentValue = +event.target.value;
switch (event.target.name) {
case "celsius":
kelvinEl.value = (currentValue + 273.32).toFixed(2);
fahrenheitEl.value = (currentValue * 1.8 + 32).toFixed(2);
break;
case "fahrenheit":
celsiusEl.value = ((currentValue - 32) / 1.8).toFixed(2);
kelvinEl.value = ((currentValue - 32) / 1.8 + 273.32).toFixed(2);
break;
case "kelvin":
celsiusEl.value = (currentValue - 273.32).toFixed(2);
fahrenheitEl.value = ((currentValue - 273.32) * 1.8 + 32).toFixed(2);
break;
default:
break;
}
}

34
OUTPUT:

Figure 4.2 TEMPERATURE CONVERTER

35
4.3 TO-DO LIST
Brief introduction to TO-DO list:

A to-do list is a powerful tool that helps individuals stay organized and manage their
tasks efficiently. It serves as a central hub for recording, tracking, and prioritizing the
various activities and responsibilities that one needs to address. Whether you're a student
managing assignments, a professional juggling work tasks, or a homemaker organizing
household chores, a to-do list can be an invaluable asset in your daily life.

Here's a detailed introduction to the components and benefits of a to-do list:

1. Purpose: The primary purpose of a to-do list is to provide a structured way to

manage tasks and responsibilities. It helps you remember what needs to be done,
ensuring that important items aren't forgotten or overlooked.

2. Components: A typical to-do list includes the following components:

Task Description: A brief description of the task or item to be completed.

Due Date/Deadline: If applicable, a date by which the task needs to be completed.

Priority: Tasks are often categorized by priority, such as high, medium, or low, to help
you focus on the most critical items first.

Status: This indicates whether a task is pending, in progress, or completed.

Notes: Additional information or details related to the task.

3. Benefits:

Organization: To-do lists provide a clear structure to your day, week, or month, helping
you allocate your time effectively.

Productivity: By listing your tasks and prioritizing them, you can tackle important items
first, leading to increased productivity.

Reduced Stress: Knowing that you have a plan in place can reduce stress and anxiety,
as you're less likely to forget important commitments.

Time Management: To-do lists help you allocate your time wisely, ensuring that you
don't waste time on unimportant tasks.

Flexibility: To-do lists can be adjusted as your priorities change, allowing you to adapt to

36
 new information or unexpected events.

Types of To-Do Lists: There are various types of to-do lists, such as daily, weekly, and
long-term lists. Some people prefer paper lists, while others opt for digital apps and tools
for convenience and accessibility.

Tips for Effective To-Do Lists:

- Keep it manageable by not overloading with tasks.

- Set realistic deadlines.
- Prioritize tasks based on importance and urgency.
- Regularly review and update your list.
- Cross off completed tasks for a sense of accomplishment.
- Don't hesitate to delegate or eliminate non-essential tasks.

PROGRAM CODE:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do-LIST</title>
<link rel="stylesheet" href="todo.css">
<script src="https://kit.fontawesome.com/f30fac2c61.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?
family=Abril+Fatface&family=Catamaran:wght@200&famil
y=Courgette&family=Edu+TAS+Beginner:wght@700&family=Lato:wght@300;900&family=Mukta:
wght@700&family=Mulish:wght@300&family=Open+Sans&family=PT+Sans:ital,wght@1,700&fam
ily=Poppins:wght@300&family=Raleway:wght@100&family=Roboto+Condensed:wght@700&famil
y=Roboto+Slab&family=Roboto:wght@300;400&family=Source+Sans+Pro:wght@300&display=swa
p"

<div class="text">
</div>
</div>
<script src="Todo.js"></script>
</body>
</html>

37
CSS:
body {
background-color: rgb(4, 29, 29);
font-family: 'Poppins', sans-serif;
}
.container
{ width:
360px;
padding: 33px;
text-align: center;
background-color: #fff;
margin-left: 33%;

margin-top: 5px;
}
input {
width: 270px;
padding: 8px;
border: 2px solid rgb(6, 145, 145);
outline: none;
font-size: 19px;
}
button {
width: 60px;
height: 41px;
background-color: rgb(4, 29, 29);
color: white;
border: none;
cursor: pointer;
outline: none;
border-radius: 2px;
font-size: 19px;
}
.text ul {

38
39
 font-size: 19px;
padding: 7px;
text-align: left;
}
.text ul i {
position: absolute;
right: 10px;
cursor: pointer;}

Javascript:
let inputs = document.getElementById("inp");
let text = document.querySelector(".text");
function Add(){
if(inputs.value == "")
{ alert("Please Enter
Task")
}else{
let newEle = document.createElement("ul"); newEle.innerHTML=`$
{inputs.value} <i class="fa-solid fa-trash"></i>`;
text.appendChild(newEle);
inputs.value="";
newEle.querySelector("i").addEventListener("click" , remove);
function remove(){
newEle.remove()
}}}

OUTPUT:

Figure 4.3 TO-DO List

40
41
4.4 RESUME BUILDER
Introduction to Resume builder:
The Resume Builder Application is a web-based tool developed to streamline and
simplify the resume creation process for job seekers. Built with modern web
development technologies, this application allows users to create, customize, and
download professional resumes in just a few easy steps. The Resume Builder project
addresses the need for a user-friendly platform that enables individuals to present their
qualifications, experience, and skills in an organized and visually appealing format.

Objectives

The primary objectives of the Resume Builder application are:

1. Ease of Use: To provide an intuitive interface where users can input their
information without extensive knowledge of resume formatting.

2. Customization: To offer customizable templates, fonts, and colors so users can

personalize their resumes based on industry standards or personal preferences.

3. Responsive Design: To ensure the application is accessible and visually consistent

across multiple devices (desktop, tablet, mobile).

4. Efficient Data Storage and Retrieval: To securely save user data for easy resume
editing and updating.

5. PDF Export: To allow users to download their resumes in PDF format, ensuring
compatibility with job application portals and recruiters.

42
PROGRAM CODE:
HTML:

<div class="card mx-5 mt-3" id="cv-form">

<div class="card-header">
<h1 class="text-center my-2">Resume Generator</h1>
</div>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- first col -->
<h2>Personal Information</h2>
<div class="form-group">
<label for="nameField">
<h4>Your Name</h4>
</label>
<input type="text" id="nameField" placeholder="Enter here" class="form-control" />
</div>
<div class="form-group mt-2">
<label for="contactField">
<h4>Your Contact</h4>
</label>
<input type="text" id="contactField" placeholder="Enter here" class="form-control" />
</div>
<div class="form-group mt-2">
<label for="addressField">
<h4>Your Address</h4>
</label>
<textarea id="addressField" placeholder="Enter here" class="form-control" rows="5"></textarea>
</div>
<div class="form-group mt-3">
<label for="">

43
<h4>Select your photo</h4>
</label>
<input id="imgField" type="file" class="form-control" />
</div>
<p class="text-secondary my-3">Important Links</p>
<div class="form-group mt-2">
<label for="fbField">
<h4>Facebook</h4>
</label>
<input type="text" id="fbField" placeholder="Enter here" class="form-control" />
</div>
<div class="form-group mt-2">
<label for="instaField">
<h4>Instagram</h4>
</label>
<input type="text" id="instaField" placeholder="Enter here" class="form-control" />
</div>
<div class="form-group mt-2">
<label for="linkedField">
<h4>LinkedIn</h4>
</label>
<input type="text" id="linkedField" placeholder="Enter here" class="form-control" />
</div>
</div>
<!-- new textarea -->

<div class="container text-center mt-2" id="projectsAddButton">

<button onclick="addNewProjectsField()" class="btn btn-primary btn-sm">
Add
</button>
</div>
</div>
<div class="form-group mt-2" id="aq">
<label for="">
<h4>Academic Qualification</h4>
44
</label>
<textarea placeholder="Enter here" class="form-control eqField" rows="3"></textarea>
<div class="container text-center mt-2" id="aqAddButton">
<button onclick="addNewAQField()" class="btn btn-primary btn-sm">
Add
</button>
</div>
</div>
</div>
</div>
<div class="container text-center mt-3">
<button onclick="generateCV()" class="btn btn-primary btn-lg">
Generate CV
</button>
</div>
</div>
</div>
</div>
<div class="container" id="cv-template">
<div class="row">
<div class="col-md-4 text-center py-5 background">
<!-- first col -->

<img src="https://retailx.com/wp-content/uploads/2019/12/iStock-476085198.jpg" alt="" class="img-fluid

myimg" id="imgTemplate" />
<div class="container">
<h5 id="nameT1">user</h5>
<p id="contactT"></p>
<p id="addressT"></p>
<hr />
<p>
<a id="fbT" href="#1"></a>
</p>
<p>
<a id="instaT" href="#1"></a>
45
</p>
<p>
<a id="linkedT" href="#1"></a>
</p>
</div>
</div>
<div class="col-md-8 py-5">
<!-- second col -->
<h1 id="nameT2" class="text-center" style="font-weight: 980; color:white">
Prakash
</h1>
<!-- objective card -->
<div class="card mt-4">
<div class="card-header background">
<h3>Objective</h3>
</div>
<div class="card-body">
<p id="objectiveT">
</p>
</div>
</div>

<!-- work Experience -->

<div class="card mt-4">

<div class="card-header background">
<h3>Work Experience</h3>
</div>
<div class="card-body">
<ul id="weT">
<li>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Odit, ad.
</li>
<li>
46
Lorem ipsum dolor, sit amet consectetur adipisicing .
</li>
<li>

<!-- academic Qualification -->

<div class="card mt-4">

<div class="card-header background">
<h3>Academic Qualification</h3>
</div>
<div class="card-body">
<ul id="aqT">
<li>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Odit, ad.
</li>
<li>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</li>
<li>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Odit, ad.
</li>
</ul>
</div>
</div>
<div class="container mt-3 text-center">
<button onclick="printCV()" class="btn background">Print CV</button>
</div>
</div>
</div>
</div>

47
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.background {
background-color: #333;
color: white;
}
.col-md-4 {
background-color: #444;
padding: 20px;
}
.myimg {
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
margin-bottom: 20px;
}

48
.text-center {
text-align: center}
.py-5 {
padding-top: 40px;
padding-bottom: 40px;
}
h5#nameT1, h1#nameT2 {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 10px;
}
#contactT, #addressT {
font-size: 0.9rem;
color: #bbb;
}
hr {
border: 1px solid #555;
margin: 20px 0;
}
a{
color: #bbb;
text-decoration: none;
font-size: 1.2rem;
margin: 10px 0;
}
a:hover {
color: white;
}
.col-md-8 {
padding: 20px;
background-color: #555;

49
}
h3 {
font-size: 1.5rem;
font-weight: bold;
color: white;
padding: 10px;
}
.card {
margin-top: 20px;
border: none;
}
.card-header {
background-color: #333;
padding: 10px 15px;
}
.card-body {
padding: 15px;
color: #ddd;
}
.card-body ul {
list-style-type: none;
}
.card-body li {
padding: 5px 0;
font-size: 0.9rem;
}
.btn {
padding: 10px 20px;
font-size: 1rem;
font-weight: bold;
color: white;

50
 border: none;
cursor: pointer;
background-color: #444;
transition: background-color 0.3s;
.btn:hover {
background-color: #666;
}
.mt-4 {
margin-top: 1.5rem;
}
.mt-3 {
margin-top: 1rem;
}

Javascript:

function addNewWEField() {
let newNode = document.createElement("textarea");
newNode.classList.add("form-control");
newNode.classList.add("weField");
newNode.classList.add("mt-2");
newNode.setAttribute("rows", 3);
newNode.setAttribute("placeholder", "Enter here");
let weOb = document.getElementById("we");
let weAddButtonOb = document.getElementById("weAddButton");
weOb.insertBefore(newNode, weAddButtonOb);
}
function addNewProjectsField() {
let newNode = document.createElement("textarea");
newNode.classList.add("form-control");
newNode.classList.add("ProjectsField");
newNode.classList.add("mt-2");
newNode.setAttribute("rows", 3);
newNode.setAttribute("placeholder", "Enter Project name and description..");

51
 let Project = document.getElementById("Projects");
let projectAddButton = document.getElementById("projectsAddButton");
Project.insertBefore(newNode, projectAddButton);
}
function addNewAQField() {
let newNode = document.createElement("textarea");
newNode.classList.add("form-control");
newNode.classList.add("eqField");
newNode.classList.add("mt-2");
newNode.setAttribute("rows", 3);
newNode.setAttribute("placeholder", "Enter here");
let aqOb = document.getElementById("aq");
let aqAddButtonOb = document.getElementById("aqAddButton");
aqOb.insertBefore(newNode, aqAddButtonOb);
}
//generating cv
function generateCV() {
// console.log("generating CV");
let nameField = document.getElementById("nameField").value;
let nameT1 = document.getElementById("nameT1");
nameT1.innerHTML = nameField;
//direct
document.getElementById("nameT2").innerHTML = nameField;
document.getElementById("contactT").innerHTML = document.getElementById(
"contactField"
).value;
//address
document.getElementById("addressT").innerHTML = document.getElementById(
"addressField"
).value;
document.getElementById("fbT").innerHTML = document.getElementById(
"fbField"
).value;
document.getElementById("instaT").innerHTML = document.getElementById(
"instaField"
52
 ).value;
document.getElementById("linkedT").innerHTML = document.getElementById(
"linkedField"
).value;

document.getElementById("objectiveT").innerHTML = document.getElementById(
"objectiveField"
).value;
//we
let wes = document.getElementsByClassName("weField");
let str = "";
for (let e of wes) {
str = str + `<li> ${e.value} </li>`;
}
document.getElementById("weT").innerHTML = str;
let Pro = document.getElementsByClassName("ProjectsField")
let str2 = "";
for (let e of Pro) {
str2 = str2 + `<li> ${e.value} </li>`;
}
document.getElementById("ProjectsT").innerHTML = str2;
//aq
let aqs = document.getElementsByClassName("eqField");
let str1 = "";
for (let e of aqs) {
str1 += `<li> ${e.value} </li>`;
}
document.getElementById("aqT").innerHTML = str1;
//code for setting image
let file = document.getElementById("imgField").files[0];
console.log(file);
let reader = new FileReader();
reader.readAsDataURL(file);
console.log(reader.result);
//set the image to template
53
 reader.onloadend = function() {
document.getElementById("imgTemplate").src = reader.result;
};
document.getElementById("cv-form").style.display = "none";
document.getElementById("cv-template").style.display = "block";
}
//print cv
function printCV() {
window.print();}

OUTPUT:

Figure 4.4 RESUME TEMPLATE

54
55
 CHAPTER 5
CASE STUDY:
Web Development Internship Report- 12 weeks Tasks:
Week 1: Calculator
During the first week of the internship, I focused on developing a simple calculator web
application. This task involved using HTML for the structure, CSS for styling, and
JavaScript for implementing the calculator's functionality. The calculator allows users to
perform basic arithmetic operations and provides a user-friendly interface.

Week 2: Temperature Converter

In the second week, I developed the application of Temperature converter. This project
required a combination of front-end and back-end development. The front-end was built
using HTML, CSS, and JavaScript to create a responsive and visually appealing interface.

Week 3: TODO List Application

During the third week, I tackled the creation of a Todo List web application. This
involved designing an interactive and dynamic interface using HTML and CSS, while
incorporating JavaScript to manage task creation, deletion, and completion. I also
explored local storage to save user tasks, providing a seamless experience even after page
refresh.

Week 4: Connect Four Game

In the final week, I focused on a more complex task - developing a Connect Four game.
This project required a deep understanding of JavaScript for game logic, HTML for the
game board structure, and CSS for styling. The game allows two players to take turns
dropping colored discs into a vertically suspended grid, with the objective of connecting
four of their own discs in a row horizontally, vertically, or diagonally.

56
Challenges and Learning Opportunities
Throughout the internship, I encountered challenges such as debugging complex
JavaScript logic, ensuring cross-browser compatibility, and implementing responsive
design. These challenges provided valuable learning opportunities, allowing me to
enhance my problem-solving skills and gain a deeper understanding of web development
concepts

57
58
 CONCLUSION
The four-week internship at Internpe provided invaluable hands-on
experience in web development. Through collaborative projects and exposure to diverse
tasks, I gained practical insights into front-end and back-end development, enhancing my
proficiency in HTML, CSS, JavaScript, and various frameworks. The mentorship and
real-world challenges fostered a deeper understanding of industry practices, project
management, and team collaboration. Overall, this internship significantly contributed to
my skill set, preparing me for future endeavors in the dynamic field of web development.
In conclusion, the four-week internship provided a comprehensive hands-on experience
in web development. The projects undertaken allowed me to apply theoretical knowledge
to practical scenarios, improve my coding skills, and gain confidence in building
interactive and dynamic web applications. The combination of different projects also
enhanced my versatility in using various web technologies and frameworks. Overall, the
internship was instrumental in expanding my skill set and preparing me for future
challenges in the field of web development.

59
 REFERENCES

[1] HTMLhttps://www.geeksforgeeks.org/html-comments/?ref=lbp
https://www.w3schools.com/html/
[2] CSShttps://www.geeksforgeeks.org/css-introduction/?ref=dhm

https://www.w3schools.com/css/default.asp
[3] JAVASCRIPThttps://www.geeksforgeeks.org/introduction-to-javascript/?ref=dhm

https://www.w3schools.com/js/

[4] SOFTWARE USED - Visual studio Code

[5] YOUTUBE CHANNELShttps://www.youtube.com/watch?v=ESnrn1kAD4E&t=21927s

60