top of page

Weather App


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




In,back end data fetch using api

HTML code


<!DOCTYPE html>
<html lang="en">

 <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>

 <div class="app-main">
 <div class="search-inputBox">
 <input type="text" id="input-box" class="input-box" placeholder="Enter city name..." autocomplete="off">
 <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 class="weather-status">
 <div class="temp" id="temp">34&deg;C</div>
 <div class="min-max" id="min-max">00&deg;C(Min) /00&deg;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" > 

Css code


 margin: 0;
 padding: 0;
 box-sizing: border-box;
 background-image: url("images/background2.webp");
 height: 100vh;
 overflow: hidden;
 background-repeat: no-repeat;
 background-position: top center;
 font-family: Arial, Helvetica, sans-serif;
 width: 50vh;
 margin: 100px auto;
 background-color: rgba(255, 165, 0);
 padding: 20px;
 text-align: center;
.app-main > *{
 margin-bottom: 20px;
 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;
 background-color: whitesmoke;
 color: #582233;
 padding: 20px;
 line-height: 2rem;
 border-radius: 10px;
 background-color: rgba(255,255,255,0.6);
 height: 50vh;
 display: none;
 font-weight: bold;
 padding: 20px;
 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;

 overflow: hidden;
 background-repeat: no-repeat;
 background-position: top center;
 width: 80px;
 height: 70px;
 margin-left: 50px;
 align-items: center;


If You want to Javascript code Then Contact at .

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  directly 

27 views0 comments

Recent Posts

See All
bottom of page