Index

Certificate....................................................................................................2
1.0 Benefits of the Micro-Project:...............................................................3
2.0 Course Outcomes Addressed................................................................3
3.0Proposed Methodology..........................................................................3
5.0Resources Required................................................................................4
2.0 Aim of the Micro-Project:......................................................................5
3.0 Course Outcomes Addressed................................................................5
4.0 Literature Review..................................................................................6
5.0Advantages of JavaScript:.......................................................................7
6.0 Actual Methodology Followed .............................................................8
7.0CODING:.................................................................................................9
8.0 Skills developed out of this project.....................................................27
9.0 Applications of this Micro-Projec........................................................27
Micro Project Evaluation Sheet.................................................................29
 Certificate
This is to certify that Mr. Saurabh Singh Enrollment No 2104790139003 of 7th
Semester of B.Tech in Information Technology of Institute, Rajshree Institute Of
Management & Technology Bly has completed the Mini Project satisfactorily in
Subject – Weather App the academic year 2023-24. as prescribed in the
curriculum.

Place: Enrollment No: 2104790139003

Date: ……………………

Project Coordinator Head of the Department

 Annexure – I

Title of Project : Weather App

1.0 Aim /Benefits of the Micro-Project:

This Micro-Project aims at:
1. Build a Weather App that fetches weather data from an API by using HTML, JavaScript,
CSS.
2. To show the weather forecast of an particular region.
3. To show current timing and date.
2.0 Course Outcomes Addressed
(Tick appropriate COs)
1. Create interactive web pages using program flow control structure [✔]
2. Implement Arrays and functions in javascript [✔]
3. Create event based web forms using javascript [✔]
4. Use javascript for handling cookies [ ]
5. Create interactive webpage using regular expressions for validations.[ ]
6. Create menu and navigation in webpage [ ]
3.0 Proposed Methodology

First Phase :- Data Gathering, rquirements, information collection.

Second Phase :- Analysis will be done to define functional requirements of the project.
Third Phase :- On the basis of analysis the next step will be writing an abstract.Abstract which
gives brief introduction about the project.
Fourth Phase :- Step wise procedure writing which explain the working and the functionality of
project.
Fifth Phase :- Code was tested and write the code and display the output.

Sixth Phase :- Project report was made

Seventh Phase :- Project was demonstrated and submitted

5.0 Resources Required
S. No. Name of Specifications Qty Remarks
Resource/material

1 Hardware computer system Computer (i3-i5 preferable),RAM 1 I3 Processor

minimum 2 GB and onwards but
not limited to

2 Operating system Windows XP/windows 7/ 1 Windows 7

Linux version 5 or later

3 Software Notepad++ 1 Latest version

 Annexure – II A
1.0
Rationale
Importance :
JavaScript is limited featured client side programming language. JavaScript runs at the client
end through the user's browser without sending message back and forth to the server. It is
widely used by the developers to do things such as build dynamic webpages, respond to events,
create interactive forms, validate data that the visitors enters into a form, control the browser etc.
This course helps student to create highly interactive web pages using these features.Client-side
JavaScript is the most common form of the language. The script should be included in or
referenced by an HTML document for the code to be interpreted by the browser.It means that a
web page need not be a static HTML, but can include programs that interact with the user,
control the browser, and dynamically create HTML content.The JavaScript client-side
mechanism provides many advantages over traditional CGI server-side scripts. For example,
you might use JavaScript to check if the user has entered a valid e-mail address in a form
field.The JavaScript code is executed when the user submits the form, and only if all the entries
are valid, they would be submitted to the Web Server.JavaScript can be used to trap user-
initiated events such as button clicks, link navigation, and other actions that the user initiates
explicitly or implicitly.

2.0 Aim of the Micro-Project:

This Micro-Project aims at:
1. Build a Weather App that fetches weather data from an API by using HTML, JavaScript,
CSS.
2. To show the weather forecast of an particular region.
3. To show current timing and date.

3.0 Course Outcomes Addressed

1. Create interactive web pages using program flow control structure
2. Implement Arrays and functions in javascript
3. Create event based web forms using javascript
4.0 Literature Review

JavaScript is a dynamic computer programming language. It is lightweight and most commonly

used as a part of web pages, whose implementations allow client-side script to interact with the
user and make dynamic pages. It is an interpreted programming language with object-oriented
capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly
because of the excitement being generated by Java. JavaScript made its first appearance in
Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has
been embedded in Netscape, Internet Explorer, and other web browsers.
The ECMA-262 Specification defined a standard version of the core JavaScript language.

 JavaScript is a lightweight, interpreted programming language.

 Designed for creating network-centric applications.
 Complementary to and integrated with Java.
 Complementary to and integrated with HTML.
 Open and cross-platform

Client-Side JavaScript :
Client-side JavaScript is the most common form of the language. The script should be included
in or referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need not be a static HTML, but can include programs that interact with
the user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism provides many advantages over traditional CGI server-
side scripts. For example, you might use JavaScript to check if the user has entered a valid e-
mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the entries are
valid, they would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and
other actions that the user initiates explicitly or implicitly.
Advantages of JavaScript:
The merits of using JavaScript are −

1. Less server interaction − You can validate user input before sending the page off to the
server. This saves server traffic, which means less load on your server.
2. Immediate feedback to the visitors − They don't have to wait for a page reload to see
if they have forgotten to enter something.
3. Increased interactivity − You can create interfaces that react when the user hovers
over them with a mouse or activates them via the keyboard.
4. Richer interfaces − You can use JavaScript to include such items as drag-and- drop
components and sliders to give a Rich Interface to your site visitors.

Limitations of JavaScript:
We cannot treat JavaScript as a full-fledged programming language. It lacks the following
important features −

1. Client-side JavaScript does not allow the reading or writing of files. This has been kept
for security reason.
2. JavaScript cannot be used for networking applications because there is no such support
available.
3. JavaScript doesn't have any multi-threading or multiprocessor capabilities.

Once again, JavaScript is a lightweight, interpreted programming language that allows you to
build interactivity into otherwise static HTML pages.
5.0 Actual Methodology

Followed Description :

We learn how to build a simple, yet fully functional weather app with
JavaScript.First things first, we have find a provider that will let us incorporate its
weather data into our app. Luckily enough, there are several different providers out
there for developing weather apps. Most of them include a free package along with
premium subscriptions that scale depending on the services/features. In our case,
we’re going to use OpenWeatherMap, one of the most popular free choices. To
take advantage of its capabilities, first, we have sign up for an API key

The Page Markup:

The first section will include a heading, a search form, and an empty span element.
This element will become visible with an appropriate message under certain
conditions. Specifically, if there isn’t any weather data available for a requested
city or the data for this city are already known.

Some Basic Styles:

With the markup for the app ready, we’ll forge on with the CSS. The first step, as
always, is to specify some CSS variables and common reset styles:

Add the JavaScript :

On Form Submission
Each time a user submits the form by pressing the Enter key we’ll do two things:

1. Stop the form from submitting, hence prevent reloading the page.
2. Grab the value which is contained in the search field.
 CODING:
1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Сurrent weather</title>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/icon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/icon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./icon/favicon-32x32.png"
/>
<link rel="manifest" href="/site.webmanifest" />

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-
z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqL
g0DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/
Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
 crossorigin="anonymous"
></script>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="main">
<div class="container-fluid">
<header>
<div class="row justify-content-center align-items-center">
<div class="col-lg-8 d-flex align-items-center">
<div class="city text-white">
<i class="fa-solid fa-location-dot fa-xl text-white"></i>
<span class="d-inline-block ms-2" id="cityn">Bareilly</span>,<em
class="opacity-50 ms-2"
id="country"
>India</em
>
</div>
<div class="search text-white flex-grow-1">
<input
type="search"
name="search-city"
class="form-control"
id="search-city"
placeholder="Search the city pls "
/>
</div>
<div class="search2 text-white" id="button">
<i class="fa-solid fa-magnifying-glass fa-xl"></i>
</div>
</div>
</div>
</header>
<div class="section">
<div class="row g-4">
<div class="col-lg-4">
<div class="weather-slid">
<img src="./img/main-weather-bg.png" alt="" class="main-img" />
<div class="search-date text-center">
<p>
<span class="day me-2" id="day">Sunday</span
><em class="date me-2" id="date">11 Octber 2023</em
><span class="time" id="time">5:00 AM</span>
</p>
</div>
<div class="d-flex mt-5 justify-content-center">
<div class="weather-img p-0 text-center">
<img
 src="./img/weather-icon/thunderstorm-rain.svg"
alt=""
class="img2"
id="weatherimg"
/>
</div>
</div>
<div
class="d-flex mt-3 justify-content-between align-items-center"
>
<div class="weather-temp pb-3 d-flex align-items-start">
<p class="temp" id="temp">29°</p>
<div class="cal">
<span>C</span>
</div>
</div>
<div class="quality">
<label for="" class="lab1">Air Quality</label>
<p class="mb-0 d-flex p2 align-items-center">
<span
class="a-color me-2"
style="background-color: red"
id="AQIcolor"
></span
><span id="air-quality">40</span>
</p>
</div>
</div>
<div class="weather-type pt-2">
<img
src="./img/weather-icon/thunderstorm-rain.svg"
height="35"
/>
Thunderstom with Heavy Rain
</div>
<div class="air-quality-value">
<p>Air Quality Index Value</p>
<div class="row">
<div class="col-sm-6 indexs d-flex justify-content-between">
<div>
<span
class="color"
style="background-color: #6bdf4e"
></span>
<span class="value">Good</span>
</div>
<span class="index"> 0-20 </span>
</div>
 <div class="col-sm-6 indexs d-flex justify-content-between">
<div>
<span
class="color"
style="background-color: yellow"
></span>
<span class="value">Fair</span>
</div>
<span class="index"> 20-80 </span>
</div>
<div class="col-sm-6 indexs d-flex justify-content-between">
<div>
<span
class="color"
style="background-color: #ffa023"
></span>
<span class="value">Modrate</span>
</div>
<span class="index"> 80-250 </span>
</div>
<div class="col-sm-6 indexs d-flex justify-content-between">
<div>
<span
class="color"
style="background-color: #cd5f00"
></span>
<span class="value">Poor</span>
</div>
<span class="index"> 250-350 </span>
</div>
<div class="col-sm-6 indexs d-flex justify-content-between">
<div>
<span
class="color"
style="background-color: #c60000"
></span>
<span class="value">Very Poor</span>
</div>
<span class="index"> 350-500 </span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="main-light">
<img src="./img/highlight-bg.png" alt="" class="main-img" />
<h6>Trend</h6>
 <div class="d-flex align-items-start">
<p id="feellike">31.40</p>
<em class=" ">°</em>
<span class="spn3">C</span>
</div>

<img src="/img/feels-ico.svg" alt="" />

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="./js/main.js"></script>
<!-- <script src="/js/m.js"></script> -->
</body>
</html>
 2. Style.css
@import url("https://fonts.googleapis.com/css2?
family=Oswald:wght@300&family=Poppins:wght@300;400;500;600;700&display=swap");
body {
background-color: #060c19;
}
header {
padding: 20px 0px;
}
.search {
margin-left: 50px;
position: relative;
}
.search2 {
margin-left: 5px;
width: 89px;
height: 52px;
border-radius: 20px;
justify-content: center;
align-items: center;
box-shadow: none !important;
border: none !important;
outline: none !important;
background: #2b313c !important;

display: flex;
}
.form-control {
background: #2b313c !important;
position: relative;
color: #fff !important;
border-radius: 50px;
height: 56px;
z-index: 2;
box-shadow: none !important;
border: none !important;
outline: none !important;
padding-left: 50px;
font-size: 19px;
}
::placeholder {
color: #61656d !important;
opacity: 1 !important; /* Firefox */
}
.main-img {
position: absolute;
object-fit: cover;
 top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
:not(.main-img) {
.value {
opacity: 0.7;
}
.index {
font-weight: 500;
}
}
.h6 {
font-size: 18px;
margin-bottom: 20px;
color: white;
}
.main-light {
position: relative;
border-radius: 40px;
overflow: hidden;
padding: 20px 30px;
color: #fff;
}
.main-light:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: transparent;
backdrop-filter: blur(50px);
--webkit-backdrop-filter: blur(50px);

background-color: rgba(255, 255, 255, 0.07);

z-index: 1;
}

.trend {
min-height: 375px;
background: transparent;
backdrop-filter: blur(50px);
--webkit-backdrop-filter: blur(50px);
background-color: rgba(0, 0, 0, 0.2);
 border-radius: 14px;
}
.windtype {
opacity: 0.5;
margin-top: 15px;
}
.common {
font-family: Oswald;
font-size: 70px;
font-weight: 300;
position: relative;
padding-right: 36px;
}
.p3 {
line-height: 55px;
margin-top: 15px;
}
.em {
opacity: 0.5;
font-style: normal;
font-size: 21px;
font-family: Poppins;
font-weight: 300;
}
.style {
margin-top: 100px;
}
h5 {
font-family: Poppins;
font-size: 16px;
font-weight: 300;
padding: 25px 0 0 25px;
}
.h51 {
width: 100%;
}
.span1:nth-child(6) {
top: 41px;
right: 30px;
}
.span1:nth-child(7) {
bottom: 3px;
right: 13px;
}

.circle-in {
width: 100%;
 height: 100%;
border-bottom: 0;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.circle {
width: 100%;
height: 100%;
border-top-right-radius: 380px;
border-top-left-radius: 380px;
border: 22px solid #1fb5fe;
border-bottom: 0;
position: absolute;
z-index: 1;
transform: rotate(-135deg);
transform-origin: bottom;
}
.sunrise-set {
.circle-box {
margin-top: 82px;
.circle-out {
width: 100%;
height: 100%;
border: dashed 2px rgba(255, 255, 255, 0.2);
border-bottom: 0;
}
.circle-in {
.circle {
border: dashed 2px yellow;
border-bottom: 0;
position: relative;
&:before {
content: "";
position: absolute;
bottom: -4px;
right: -10px;
width: 20px;
height: 20px;
background: url(../img/sun-notch-ico.svg) no-repeat center center/20px;
}
}
}
}
.sun-dealits {
width: 100%;
 display: flex;
justify-content: center;
border-top: solid 1px rgba(255, 255, 255, 0.19);
}
.sun-box {
width: 269px;
height: auto;
position: relative;
&::before {
content: "";
position: absolute;
top: -2px;
width: 13px;
height: 4px;
border-radius: 5px;
background-color: yellow;
}
&::after {
content: "";
position: absolute;
top: -2px;
width: 13px;
height: 4px;
border-radius: 5px;
background-color: yellow;
}
&::before {
left: 9px;
}
&::after {
right: 9px;
}
}
}
.sun-time {
margin-top: 6px;
.spn2 {
display: block;
font-size: 10px;
font-family: Poppins;
font-weight: 300;
color: yellow;
margin-top: 3px;
}
p{
font-family: Poppins;
font-size: 14px;
 font-weight: 400;
}
}
.highlight-value {
p{
font-family: Oswald;
font-size: 40px;
font-weight: 300;
line-height: 43px;
}
em {
font-family: Poppins;
font-size: 16px;
font-weight: 300;
display: inline-block;
margin-left: 5px;
opacity: 0.5;
}
}
.short {
min-height: auto;
h5 {
padding: 0px !important;
}
}
.spn3 {
font-family: Oswald;
font-size: 18px;
font-weight: 300;
display: inline-block;
color: white;

margin-left: 2px;
opacity: 0.5;
}
.trend:hover {
outline: 1px solid skyblue;
cursor: pointer;
}
.my-styled-div {
font-family: Poppins;
font-size: 16px;
font-weight: 300;
display: inline-block;
margin-left: 5px;
opacity: 0.5;
 3. script.js
const search = document.querySelector("#search-city");
const button = document.querySelector("#button");
const cityn = document.querySelector("#cityn");
const country = document.querySelector("#country");
const day = document.querySelector("#day");
const daate = document.querySelector("#date");
const time = document.querySelector("#time");
const temp = document.querySelector("#temp");
const aqicolor = document.querySelector("#AQIcolor");
const weatherimg = document.querySelector("#weatherimg");
const feel = document.querySelector("#feellike");
const humality = document.querySelector("#humidity");
const visibility = document.querySelector("#visibility");
const wind = document.querySelector("#wind");
const uv = document.querySelector("#uv");
console.log(humidity);
console.log(weatherimg);

const AQI = document.querySelector("#air-quality");

// AQI.innerHTML = "ol";
console.log(AQI);
let arr = [];
let arr2 = [];
let airwrong = [];
async function my() {
let url = "https://restcountries.com/v3.1/all?fields=name,altSpellings";
let response = await fetch(url);
let data = await response.json();
arr = data;
}

my();
console.log(search);
async function weather(cityName) {
const apiKey = "75c1392a4d080822c2d92bd764771ac7";
let response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}`
)
.then((response) => response.json())
.then((data) => {
console.log(data);
let coun = arr.find((country) => {
return country.altSpellings[0] == data.sys.country;
});
if (coun != undefined) {
country.innerText = coun.name.common;
}
const getDay = () => {
const currentDate = new Date(data.dt * 1000);
const options2 = { weekday: "long" };
const dayName = currentDate.toLocaleDateString("en-US", options2);
return `${dayName}`;
};
day.innerText = getDay();
const getCurrentDate = () => {
const currentDate = new Date(data.dt * 1000);
const options = { month: "long", day: "numeric", year: "numeric" };
const formattedDate = currentDate.toLocaleDateString("en-US", options);
return `${formattedDate}`;
};

daate.innerText = getCurrentDate();
cityn.innerText = data.name;
temp.innerText = `${Math.round(data.main.temp - 273.15)}°`;

switch (data.weather[0].main) {
case "Clear":
weatherimg.src = "/img/weather-icon/clear-sky.svg";
break;
case "Haze":
weatherimg.src = "/img/weather-icon/haze.png";
break;

case "few clouds":

weatherimg.src = "/img/weather-icon/few-clouds.svg";
break;
case "clouds":
weatherimg.src = "/img/weather-icon/scattered-clouds.svg";
break;
// case "clouds":
// weatherimg.src = "/img/weather-icon/broken-clouds.svg";
 // break;
case "shower rain":
weatherimg.src = "/img/weather-icon/shower-rain.svg";
break;
case "rain":
weatherimg.src = "/img/weather-icon/rain.svg";
break;
case "thunderstorm":
weatherimg.src = "/img/weather-icon/thunderstorm.svg";
break;
case "snow":
weatherimg.src = "/img/weather-icon/snow.svg";
break;
case "mist":
Z;
weatherimg.src = "/img/weather-icon/mist.svg";
break;
case "thunderstorm rain":
weatherimg.src = "/img/weather-icon/thunderstorm-rain.svg";
break;
}
human = data.main.humidity;
humidity.innerText = human;
// const visible = data.visibility / 1000;
// update.classList.add("my-styled-div");
wind.innerHTML = (data.wind.speed * 3.6).toFixed(2);
// visibility.innerText = `${visible.toFixed(2)} `;
console.log("okdone", data.weather[0].description, data.weather[0].main);
feel.innerText = Math.round(data.main.feels_like - 273.15);
});
}

async function air(cityName) {

const api = "CXMBKB8G8ATEPHC3HRTD7RWUJ";
const url = `https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/$
{cityName}?unitGroup=metric&key=${api}&contentType=json`;
let response = await fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data);
const currentTime = data.currentConditions.datetime;
 const [hours, minutes] = currentTime.split(":");
let formattedTime;
if (hours > 12) {
formattedTime = hours - 12 + ":" + minutes + " PM";
} else if (hours === "0") {
formattedTime = "12:" + minutes + " AM";
} else if (hours === "12") {
formattedTime = "12:" + minutes + " PM";
} else {
formattedTime = hours + ":" + minutes + " AM";
}
time.innerText = formattedTime;
visibility.innerHTML = data.currentConditions.visibility;
})
.catch((error) => {
console.log("Error fetching air pollution data:", error);
});
}
async function aqi(cityName) {
const url = `https://api.waqi.info/feed/${cityName}/?token=359ee8c9409d247d0928fd5533026101d7b40c45`;
const res = await fetch(url)
.then((response) => response.json())
.then((data) => {
let airQuality = data.data.aqi;
// let lat = data.coord.lat;
// let lon = data.coord.lon;
// console.log("my", lat);
// AQI.innerText = airQuality;
if (airQuality != undefined) {
AQI.innerText = airQuality;
function updateAQI(airQuality) {
if (airQuality >= 0 && airQuality <= 20) {
aqicolor.style.backgroundColor = "#6bdf4e";
} else if (airQuality >= 20 && airQuality <= 80) {
aqicolor.style.backgroundColor = "yellow";
} else if (airQuality >= 80 && airQuality <= 250) {
aqicolor.style.backgroundColor = "#ffa023";
} else if (airQuality >= 250 && airQuality <= 350) {
aqicolor.style.backgroundColor = "#cd5f00";
} else if (airQuality >= 350 && airQuality <= 500) {
aqicolor.style.backgroundColor = "red";
 }
console.log("op", data);
}
updateAQI(airQuality);
} else {
const apiKey = "75c1392a4d080822c2d92bd764771ac7";
const city = "Bareilly";

fetch(
`https://api.openweathermap.org/geo/1.0/direct?q=${cityName}&limit=1&appid=${apiKey}`
)
.then((response) => response.json())
.then((data) => {
const lat = data[0].lat;
console.log("city", data);
const lon = data[0].lon;
fetch(
`http://api.openweathermap.org/data/2.5/air_pollution?lat=${lat}&lon=${lon}&appid=${apiKey}`
)
.then((response) => response.json())
.then((data) => {
const airQuality = data.list[0].main.aqi;
AQI.innerText = `${airQuality} Unit`;
//
function updateAQI(airQuality) {
if (airQuality >= 0 && airQuality <= 3) {
aqicolor.style.backgroundColor = "#6bdf4e";
} else if (airQuality >= 3 && airQuality <= 4) {
aqicolor.style.backgroundColor = "yellow";
} else if (airQuality >= 4 && airQuality <= 7) {
aqicolor.style.backgroundColor = "#ffa023";
} else if (airQuality >= 7 && airQuality <= 8) {
aqicolor.style.backgroundColor = "#cd5f00";
} else if (airQuality >= 8 && airQuality <= 9) {
aqicolor.style.backgroundColor = "red";
}
}
updateAQI(airQuality);
});
// Now you can use these latitude and longitude values to fetch the air quality data.
})
 .catch((error) => {
console.log(
"An error occurred while fetching the latitude and longitude."
);
});
}

console.log("ok", data.data);
})

.catch((error) => {
// Handle any errors
console.error(error);
});
}
async function uvi(city) {
const apiKey = "d2ecff41a7a7454d841fba25b9d1dc5a";

await fetch(
`https://api.weatherbit.io/v2.0/current/uv?city=${city}&key=${apiKey}`
)
.then((response) => response.json())
.then((data) => {
const uvIndex = data?.data[0]?.uv;
uv.innerHTML = uvIndex.toFixed(1);
})
.catch((error) => {
console.error("An error occurred while fetching the UV index:", error);
});
}

button.addEventListener("click", () => {
weather(search.value);
air(search.value);
aqi(search.value);
uvi(search.value);
});
7.0 OUTPUT
8.0 Skills developed out of this project.
1. Develop a JavaScript Program Using different Concepts

2. Able to debug and run a Javascript Program

3. Documentation of Project

4. Time management

5. Technical Writing

6. Team work

7. Problem solving

9.0 Applications of this Micro-Project

1. Websites

2. Web application

3. Information
Annexure - III
 Annexure – IV

Micro Project Evaluation

Sheet
Name of Student: Saurabh Singh, Enrollment No:2104790139003
Name of Program: Information Technology Semester: 7th
Title of the Micro-Project: Mini Project
Course Outcomes Addressed
(Tick appropriate COs)

1. Create interactive web pages using program flow control structure [ ✔]

2. Implement Arrays and functions in javascript [ ✔]
3. Create event based web forms using javascript [ ✔]
4. Use javascript for handling cookies [ ]
5. Create interactive webpage using regular expressions for validations [ ]
6.create menu and navigation in webpages [ ]

Sr.
Characteristic to be Poor Average Good Excellent
No
assessed Sub Total
. ( Marks1-3 ) (Marks 4-5 ) (Marks 6-8) ( Marks9-10)

(A) Process and Product Assessment (Convert Above Total marks out of 6 Marks)
1 Relevance to the course

2 Information Collection

3 Project Proposal

Completion of the Target as

4
per project proposal

Analysis of Data and

5
representation

6 Quality of Prototype/Model

7 Report Preparation

(B) Individual Presentation / Viva (Convert above total marks out of 4 marks)

8 Presentation

9 Defense
Comments/Suggestions about team work/leadership/inter-personal communication
The project was implemented with good leadership & teamwork with active co-operation of
all the team members. Everyone contributed equally and met with good outcome. Hence,
overall project was done with harmony with good team spirit.

Name and designation of the Faculty Member: Mr. Ashish Saxena

Signature