WEB TECHNOLOGY

PROJECT FILE on

“TEMPERATURE
CONVERTER”

NAME :
ROLL NO.:

DECLARATION
I, [Your Full Name], a student of Class 12, [Stream/Subject], at [School Name],

hereby declare that all the information provided by me in the examination form and

school records is accurate and true to the best of my knowledge. I affirm that the

project work submissions are my original creations, and I have properly cited all

references wherever necessary. I assure that I have followed the guidelines set by the

school and board for completing my coursework and preparing for examinations.

Furthermore, I commit to adhering to all the rules and regulations during the

examination and in all school-related activities.

CERTIFICATE
This is to certify that [Student's Name], a student of Class 12, [Stream/Subject],

Roll No. [Roll Number], at [School Name], has completed the project titled [Project

Title] during the academic session [Year]. The project was done under my guidance

and follows the rules set by the [Board Name]. It is the student's own work, and all

sources have been properly mentioned. I wish the student the best for their future.

TABLE CONTENT
 SR. NO. CONTENT
1. INTRODUCTION

(i)Aim of the project

(ii)Feature of the project

(iii)web technology

(iv)working of the web application

2. IMPLEMENTATION

3. OUTPUT

4. CHALLENGES AND LEARNINGS

5. BIBLIOGRAPHY
ACKNOWLEDGEMENT

I would like to express my heartfelt gratitude to my project guide, for their

invaluable guidance, support, and encouragement throughout the completion of

this project. Their insights and expertise were instrumental in shaping my

understanding of the subject and in guiding me through the project process. I

am also thankful to [School Name] for providing the necessary resources and a

conducive environment for learning. Special thanks to my classmates for their

collaboration and constructive feedback, which greatly enriched my project.

Additionally, I am deeply grateful to my family for their unwavering support

and encouragement, which motivated me to give my best effort. This project

would not have been possible without the combined efforts of everyone

involved. Thank you all for your contributions and support.

 INTRODUCTION
ABOUT PROJECT:
The Temperature Converter is a simple yet effective web application designed to

provide users with a quick and accurate way to convert temperatures between Celsius,

Fahrenheit, and Kelvin. With its intuitive and user-friendly interface, this tool allows

individuals to effortlessly input a temperature in one unit and instantly view the

converted values in the other units. The application is equipped with basic validation

features to ensure correct data entries, improving the overall user experience by

providing helpful error messages when necessary. Additionally, the Temperature

Converter incorporates fundamental web technologies such as HTML, CSS, and

JavaScript, making it fully responsive and ensuring smooth compatibility across

various devices, including desktops and mobile phones. Beyond its practical

functionality, this project serves as an excellent introduction to web development,

demonstrating how simple, interactive tools can be created through thoughtful design

and coding practices. Whether for educational purposes, practical day-to-day

conversions, or just curiosity about temperature differences, the Temperature

Converter stands out as a valuable learning project. It showcases how basic web

technologies can create useful tools that enhance user convenience in everyday tasks.

AIM OF THE PROJECT

The primary aim of the Temperature Converter project is to develop a simple and user-

friendly web application that allows users to easily convert temperatures between Celsius,

Fahrenheit, and Kelvin. This project seeks to enhance user experience by providing real-

time conversions, helping users quickly understand temperature differences across various

units. Additionally, the project aims to demonstrate the application of fundamental web

technologies like HTML, CSS, and JavaScript in building interactive and responsive tools.

By prioritizing ease of use and accessibility, the Temperature Converter project aspires to be

both a practical tool for daily use and a learning platform for those new to web

development.

FEATURE OF THE PROJECT

1. Simple and Intuitive Interface: A clean and user-friendly design that allows

users to input temperatures and view the converted values easily.

2. Real-Time Conversion: Instant temperature conversions between Celsius,

Fahrenheit, and Kelvin as soon as the user enters a value.

3. Multiple Conversion Options: Supports conversion in all three directions:

Celsius to Fahrenheit/Kelvin, Fahrenheit to Celsius/Kelvin, and Kelvin to

Celsius/Fahrenheit.

4. Input Validation: Basic validation features to ensure users enter valid

numerical values, with error messages for invalid inputs.

5. Responsive Design: The website is fully responsive, ensuring that it works

well on different screen sizes, from desktops to mobile devices.

6. Clear Output Display: The converted temperature values are displayed

clearly, allowing users to easily read and compare the results.

7. Lightweight and Fast: Minimal use of resources ensures the website loads

quickly and provides a smooth experience.

WEB TECHNOLOGY
Web Technology refers to the tools, techniques, and methodologies used to create

and manage websites and web applications. It plays a pivotal role in enabling

communication, interaction, and services over the internet. Web technology

encompasses both client-side (front-end) and server-side (back-end)

technologies that work together to deliver seamless experiences to users.

1. Client-Side Technologies

Client-side technologies focus on how a website looks and behaves in a user's

browser. These technologies are essential for developing interactive, user-friendly
interfaces.

 HTML (HyperText Markup Language):

HTML is the fundamental language used to structure content on the web. It
defines the placement of elements such as headings, paragraphs, links, images,
and multimedia on a webpage. It forms the backbone of any website.
o Example: <h1>Welcome to My Website</h1>, <p>This is a
paragraph.</p>
 CSS (Cascading Style Sheets):
CSS is used to control the presentation and layout of the HTML structure. It
allows developers to customize the appearance of web pages by defining styles
like colors, fonts, margins, padding, and overall layout, ensuring that websites
are visually appealing and consistent across different devices.
o Example: body {background-color: lightblue; font-family: Arial;}
 JavaScript:
JavaScript is a programming language that enables interactivity on websites. It
is used to create dynamic content, such as pop-up dialogs, interactive forms,
animations, and handling user inputs in real-time without reloading the
webpage. JavaScript can also fetch and update data in the background
o Example: document.getElementById('button').addEventListener('click',
function() { alert('Button clicked!'); });

2. Server -side Technologies

Server-side technologies handle the logic and data processing behind the
scenes. They are responsible for processing user requests, interacting with
databases, and generating dynamic content.
 Working of a Web Application
A web application operates based on a simple request-response cycle between the
client (browser) and the server.

1. User Request:
The user initiates a request by typing a URL into their browser or clicking a
link/button on the website. This request is sent via the internet to the web
server.
2. Web Server Processing:
The web server receives the request and performs the required processing. This
may include fetching data from a database, running scripts, or generating
dynamic content depending on what is requested.
3. Response:
The server processes the request and sends the requested webpage or data back
to the browser. If any data is required from the database (such as user login
details), the server will query the database before sending the final response.

PROJECT REQUIREMENT
 1. Front-End Design:

 HTML:
o A basic HTML form that allows user input.
o The form will include:
 An input field for user data.
 A submit button to process the input.
 A section to display the output or results.
 CSS:
o Basic styling for the form to enhance visual appeal.
o Responsive design to ensure the application looks good on both mobile
and desktop devices.

2.Functionality:

 Input Validation:
o Validate that the user has entered data in the correct format and meets
any specified criteria (e.g., valid dates, numbers).
 Calculation:
o Use JavaScript to perform calculations based on the user input.
o The application should return results based on the calculations
performed (e.g., age, BMI, etc.).
 Display Output:
o After the user submits their input, the calculated result will be displayed
in a designated output area.

TECHNOLOGIES USED IN WEB APPLICATION

1. HTML (HyperText Markup Language)
HTML is the standard markup language for creating web pages. It provides the structure and layout of
a webpage by using various elements and tags.
Key Features of HTML:
  Structure: Defines the structure of web content through elements like headings,
paragraphs, lists, links, and images.
 Forms: Allows users to input data using forms, which are essential for interactive
applications.
 Semantic Elements: Supports semantic HTML, which enhances accessibility and
SEO by providing meaning to the content.
Example Elements:
 <input>: Used for user input fields.
 <button>: Represents a clickable button.
 <div>: A generic container for grouping content.

2. CSS (Cascading Style Sheets)

CSS is a stylesheet language used for describing the presentation of a document written in HTML. It
controls the layout, colors, fonts, and overall visual aesthetics of a webpage.
Key Features of CSS:
 Styling: Defines the look and feel of web pages, allowing customization of elements,
backgrounds, and layouts.
 Responsive Design: Uses media queries to ensure webpages look good on various
devices and screen sizes.
 Animations and Transitions: Enables dynamic effects to enhance user experience.
Example Concepts:
 Selectors: Target specific HTML elements for styling.
 Box Model: Understanding how margins, borders, and padding affect layout.
 Flexbox/Grid: Modern layout techniques for responsive design.
3. JavaScript JavaScript is a powerful scripting language that makes web pages interactive and
dynamic. In the Temperature convertor App, JavaScript is used to handle the logic that performs the
actual temperature conversion.

IMPLEMENTATION
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/
dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />

<title>Temperature Converter</title>
</head>
<body>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-6 text-center">
<h1>Temperature Converter</h1>

<div id="celsius">
<input
type="number"
class="form-control form-control-lg form-padding"
id="input-celsius"
placeholder="celsius"
/>
</div>
 <div id="fahrenheit">
<input
type="number"
class="form-control form-control-lg form-padding"
id="input-fahrenheit"
placeholder="fahrenheit"
/>
</div>

<div id="kelvin">
<input
type="number"
class="form-control form-control-lg form-padding"
id="input-kelvin"
placeholder="kelvin"
/>
</div>
</div>
</div>
<footer>
<p>By Elle J.</p>
<p>
<a href="https://github.com/itsellej" target="_blank"
><img
class="icons"
src="https://res.cloudinary.com/itsellej/image/upload/v1533400136/rock-
paper-scissors/github-icon.png"
alt="Github icon"
/></a>
<a href="https://codepen.io/itsellej/" target="_blank"
><img
 class="icons"
src="https://res.cloudinary.com/itsellej/image/upload/v1533400135/rock-
paper-scissors/codepen-icon.png"
alt="Codepen icon"
/></a>
</p>
<p>
<em
>Credit - icons from <a href="https://pngtree.com/">pngtree</a></em
>
</p>
</footer>
</div>

<script src="main.js" charset="utf-8"></script>

</body>
</html>

Style.css
body {
margin-top: 60px;
text-align: center;
}

h1 {
padding-bottom: 0.5rem;
}

input[type="number"] {
 cursor: pointer;
}

#input-celsius {
background-color: #52ddcf;
font-size: 2.5rem;
}

#input-fahrenheit {
background-color: #16bac5;
font-size: 2.5rem;
}

#input-kelvin {
background-color: #42a0d9;
font-size: 2.5rem;
}

.form-padding {
padding: 2rem 1rem;
}

::-webkit-input-placeholder {
color: #ffffff !important;
}
::-moz-placeholder {
color: #ffffff !important;
}
:-ms-input-placeholder {
color: #ffffff !important;
}
:-moz-placeholder {
color: #ffffff !important;
}

footer {
padding-top: 1.5rem;
font-size: 0.7rem;
line-height: 0.2rem;
text-align: center;
}

.icons {
max-width: 25px;
height: auto;
}

main.js
const celsiusInput = document.querySelector("#celsius > input");
const fahrenheitInput = document.querySelector("#fahrenheit > input");
const kelvinInput = document.querySelector("#kelvin > input");

const roundToTwoDP = (num) => {

return num.toFixed(2);
};

const celsiusToFaAndKe = () => {

const celsiusTemp = parseFloat(celsiusInput.value);
const fahrenheitTemp = celsiusTemp * 1.8 + 32;
const kelvinTemp = celsiusTemp + 273.15;
 fahrenheitInput.value = roundToTwoDP(fahrenheitTemp);
kelvinInput.value = roundToTwoDP(kelvinTemp);
};

const fahrenheitToCeAndKe = () => {

const fahrenheitTemp = parseFloat(fahrenheitInput.value);
const celsiusTemp = (fahrenheitTemp - 32) * (5 / 9);
const kelvinTemp = (fahrenheitTemp + 459.67) * (5 / 9);

celsiusInput.value = roundToTwoDP(celsiusTemp);
kelvinInput.value = roundToTwoDP(kelvinTemp);
};

const kelvinToCeAndFa = () => {

const kelvinTemp = parseFloat(kelvinInput.value);
const celsiusTemp = kelvinTemp - 273;
const fahrenheitTemp = 1.8 * (kelvinTemp - 273) + 32;

celsiusInput.value = roundToTwoDP(celsiusTemp);
fahrenheitInput.value = roundToTwoDP(fahrenheitTemp);
};

const main = () => {

celsiusInput.addEventListener("input", celsiusToFaAndKe);
fahrenheitInput.addEventListener("input", fahrenheitToCeAndKe);
kelvinInput.addEventListener("input", kelvinToCeAndFa);
};
main();
OUTPUT
 CHALLENGES AND LEARNINIG
Challenges
 1. Basic HTML Structure: Understanding how to properly structure the webpage
with elements like input fields, buttons, and labels can be confusing when
you're just starting out.
2. CSS for Layout and Styling: Applying CSS to make the page look clean and
organized can be challenging, especially when you're trying to create a simple,
user-friendly interface.
3. JavaScript for Conversion Logic: Writing the JavaScript code to correctly
convert between Celsius, Fahrenheit, and Kelvin can be tricky, especially if
you're new to functions and handling input/output.
4. User Input Validation: Ensuring that the user enters valid numeric values and
handling cases where they input incorrect data requires learning basic
validation techniques.
5. Real-Time Conversion: Implementing real-time conversion, where the result
updates as the user types, can be challenging if you're still learning about event
handling in JavaScript.
6. Responsive Design: Making sure the website looks good on different devices
(desktop and mobile) using responsive design can be a new concept to grasp.

Learning:
1. HTML Structure: gained a solid understanding of how to create a basic
webpage structure using HTML, including forms, input fields, and buttons.
2. CSS Styling:learnt how to use CSS to style your webpage, making it visually
appealing by applying colors, fonts, spacing, and aligning elements to create a
clean, organized layout.
3. JavaScript Basics: understood how JavaScript works by writing the logic for
converting between Celsius, Fahrenheit, and Kelvin, using basic functions,
variables, and operators.
4. Understanding Conversion Logic: mathematical thinking by applying formulas
to convert between different temperature units and ensuring the accuracy of the
output.
5. Error Handling: handled errors in a user-friendly way, such as displaying
helpful messages when users enter incorrect data (like letters instead of
numbers).

BIBILIOGRAPHY

1. https://www.w3schools.com
2. https://www.geeksforgeeks.org/web-
development/
3.CBSE Class 12 Computer Science