MAHARISHI
UNIVERSITY
EXPERIMENT -6
Build a simple weather app that displays current weather conditions for a specified
location .You can also use HTML to structure the layout and display the weather
information.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="card">
<div class="search">
<input type="text" placeholder="Enter city name" spellcheck="false">
<button><img src="images/[Link]"></button>
</div>
<div class="weather">
<img src="images/[Link]" class="weather-icon">
<h1 class="temp">22°c</h1>
<h2 class="city">lucknow</h2>
<div class="details">
<div class="col">
<img src="images/[Link]">
MAHARISHI
UNIVERSITY
<div>
<p class="humidity">50%</p>
<p>Humidity</p>
</div>
</div>
<div class="col">
<img src="images/[Link]">
<div>
<p class="wind">15km/h</p>
<p>wind speed</p>
</div>
</div>
</div>
</div>
<script>
const apiKey = "3da22db7410bfdb9f4a90de98a3d1308";
const apiUrl = "[Link]
const searchBox = [Link](".search input");
const searchBtn = [Link](".search button");
const weatherIcon = [Link](".weather-icon");
async function checkWeather(city) {
try {
const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
if (![Link]) {
throw new Error('City not found');
MAHARISHI
UNIVERSITY
}
const data = await [Link]();
[Link](".city").innerHTML = [Link];
[Link](".temp").innerHTML = [Link]([Link]) +
"°c";
[Link](".humidity").innerHTML = [Link] + "%";
[Link](".wind").innerHTML = [Link] + " km/h";
switch([Link][0].main) {
case 'Clouds':
[Link] = "images/[Link]";
break;
case 'Clear':
[Link] = "images/[Link]";
break;
case 'Rain':
[Link] = "images/[Link]";
break;
case 'Drizzle':
[Link] = "images/[Link]";
break;
case 'Mist':
MAHARISHI
UNIVERSITY
[Link] = "images/[Link]";
break;
} catch (error) {
[Link]('Error:', error);
[Link](".city").innerHTML = "City not found";
[Link]("click", () => {
if ([Link]()) {
checkWeather([Link]);
});
[Link]("keypress", (event) => {
if ([Link] === "Enter" && [Link]()) {
checkWeather([Link]);
});
checkWeather("London");
</script>
</div>
MAHARISHI
UNIVERSITY
</body>
</html>
CSS CODE
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
body{
background-color: #222;
.card{
width: 90%;
max-width: 470px;
background:linear-gradient(135deg, #00feba, #5b548a);
color:#fff;
margin: 100px auto 0;
border-radius: 20px;
padding: 40px 35px;
text-align: center;
.search{
display: flex;
align-items: center;
justify-content: space-between;
MAHARISHI
UNIVERSITY
width:100%;
.search input{
border: 0;
outline: 0;
background: #ebfffc;
color: #555;
padding: 10px 25px;
border-radius: 30px;
font-size: 18px;
flex: 1;
margin-right: 16px;
height: 60px;
.search button{
width: 60px;
height: 60px;
border-radius: 50%;
border: 0;
outline: 0;
background: #ebfffc;
cursor: pointer;
.search button img{
width: 16px;
}
MAHARISHI
UNIVERSITY
.weather-icon
width: 100px;
margin-top: 30px;
.weather h1{
font-size: 80px;
font-weight: 500;
weather h2{
font-size: 45px;
font-weight: 400;
margin-top: -10px;
.details{
display: flex;
justify-content: space-between;
margin-top: 50px;
align-items: center;
padding: 0 20px;
.col{
display: flex;
align-items: center;
text-align: left;
}
MAHARISHI
UNIVERSITY
.col img{
width: 40px;
margin-right: 10px;
.humidity,.wind{
font-size: 28px;
margin-top: -6px;