top of page

Weather App

Updated: Apr 24, 2021


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 


bottom of page