Weather
Weather refers to day-to-day temperature and precipitation activity, whereas climate is the term for the averaging of atmospheric conditions over longer periods of time. When used without qualification, "weather" is generally understood to mean the weather of Earth.
Build App
HTML
CSS
JAVASCRIPT
In,back end data fetch using api
HTML code
index.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">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>Weather App</title>
</head>
<body>
<div class="app-main">
<div class="search-inputBox">
<input type="text" id="input-box" class="input-box" placeholder="Enter city name..." autocomplete="off">
</div>
<div class="weather-body">
<div class="location-details">
<div class="city" id="city">City,County</div>
<div class="date" id="date">Date onth (Day), Year</div>
</div>
<div class="weather-status">
<div class="temp" id="temp">34°C</div>
<div class="min-max" id="min-max">00°C(Min) /00°C (Max)</div>
<div class="weather" id="weather"> Clear</div>
<div class="img" id="img">
<img src="images/weather-app.png" alt="" style="width: 80px;height:70px" >
</div>
</div>
</div>
</div>
</body>
</html>Css code
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: url("images/background2.webp");
height: 100vh;
overflow: hidden;
background-repeat: no-repeat;
background-position: top center;
background-size:cover;
font-family: Arial, Helvetica, sans-serif;
}
.app-main{
width: 50vh;
margin: 100px auto;
background-color: rgba(255, 165, 0);
padding: 20px;
text-align: center;
}
.app-main > *{
margin-bottom: 20px;
}
.input-box{
width: 100%;
background-color: rgba(255,255,255,0.6);
border: none;
outline: none;
color: blueviolet;
font-size: 1.2rem;
height: 50px;
border-radius: 5px;
padding: 0 10px;
text-align: center;
}
.input-box:focus{
background-color: whitesmoke;
}
.weather-body{
color: #582233;
padding: 20px;
line-height: 2rem;
border-radius: 10px;
background-color: rgba(255,255,255,0.6);
height: 50vh;
display: none;
}
.location-details{
font-weight: bold;
}
.weather-status{
padding: 20px;
}
.temp{
font-size: 50pt;
font-weight: 700;
margin: 20px 0;
text-shadow: 2px 4px rgba(0,0,0,0.3);
}
.min-max, .weather{
font-size: 12pt;
font-weight: 600;
}
.img{
overflow: hidden;
background-repeat: no-repeat;
background-position: top center;
background-size:cover;
width: 80px;
height: 70px;
margin-left: 50px;
align-items: center;
}If You want to Javascript code Then Contact at contact@codersarts.com .
Contact us for this Weather App assignment Solutions by Codersarts Specialist who can help you mentor and guide for such Weather App assignments.
If you have project or assignment files, You can send at contact@codersarts.com directly
Commentaires