top of page
Search
    • Apr 23, 2021

Weather App

Updated: Apr 24, 2021


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&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" > 
 </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

bottom of page