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

    0