Build Weather App Using HTML CSS and JavaScript

Creative Javascript | January 14, 2024

Today in this blog, you will learn how to Build Weather App using HTML CSS and JavaScript. This Weather App help you to show weather information of any location.

Video tutorial of Build Weather App Using HTML CSS and JavaScript

This tutorial video can help you to Build Weather App using HTML CSS and JavaScript. This Weather App help you to show weather information of any location.

You might like this

Build Weather App using HTML CSS and JavaScript [Source Codes]

This source code can help you to Build Weather App using HTML CSS and JavaScript
API source

Please use you own API key in line number 7 in script file, if not underustand please look the tutorial video.

HTML Code

Copy

<div class="weather-container">
    <h1>Weather App</h1>
    <form>
      <input type="text" placeholder="Search for a city" autofocus>
      <button type="submit">SUBMIT</button>
      
    </form>
    <span class="msg"></span>
    <div class="weather-card">
      <h2 class="city-name">
        <span id="wa_name">Londan</span>
        <sup id="wa_country">UK</sup>
      </h2>
      <div class="weather-card-bottom">
        <div class="city-temp"><span id="wa_city_temp">5</span><sup>°C</sup></div>
        <figure>
          <img class="city-icon" id="wa_temp_icon" src="">
          <figcaption id="wa_temp_caption">haze</figcaption>
        </figure>
      </div>
    </div>
  </div>



  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #0f4dff;
	background: #003ce9;
	background: #0276ad;
	background: #7107ff;
	background: #003046;
	background: #120546;
	color: #fff;
}
.weather-container{
	width: 500px;
	margin: 50px auto;
}
h1{
	font-size: 60px;
	font-weight: 700;
	text-align: center;
	padding-bottom: 10px;
	margin: 0 0 50px;
	position: relative;
}
h1:after{
	content: "";
	position: absolute;
	left: 0%;
	top: 100%;
	width: 100%;
	border-bottom: 2px dashed;

}
  img {
	display: block;
	max-width: 100%;
  }
  

.weather-container form{
	display: flex;
}
.weather-container input{
	border: 0;
	outline: 0;
	border-bottom: 2px solid #fff; 
	font-size: 26px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 10px 10px 10px 0;
	width: 100%;
	margin-right: 10px;
	background:transparent;
	color: #fff;
}
.weather-container input::placeholder {
	color: currentColor; 
}
.weather-container button{
	background-color: #ff1e42;
	color: #fff;
	font-size: 20px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 10px 45px;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
}
.msg{}
.weather-card{
	background-color: #fff;
	color: #284372;
	padding: 30px;
	border-radius: 15px;
	margin-top: 30px;
	/* display: none; */
}
.weather-card .city-name sup {
	padding: 0.2em 0.6em;
	border-radius: 30px;
	color: #fff;
	background: #ff8c00;
	}
.weather-card-bottom{
	display: flex;
	justify-content: space-between;
}
.weather-card .city-temp {
	font-size: 5rem;
	font-weight: bold;
	margin-top: 10px;
}
  
.weather-card .city sup {
	font-size: 0.5em;
}
.weather-card figure{
	margin: 10px 0;
	text-align: center;
}
.weather-card figure figcaption{
	font-weight: 700;
}

JavaScript Code

Copy

const form = document.querySelector(".weather-container form");
const input = document.querySelector(".weather-container input");
const msg = document.querySelector(".weather-container .msg");
const weatherCard = document.querySelector(".weather-card");

/*SUBSCRIBE HERE FOR API KEY: https://home.openweathermap.org/users/sign_up*/
const apiKey = "";

form.addEventListener("submit", e => {
  e.preventDefault();
  let inputVal = input.value;
  
  

  //ajax here
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${inputVal}&APPID=d85d33be389b5937f9fdbd7487af82f6&units=metric`;

  fetch(url)
    .then(response => response.json())
    .then(data => {
      const { main, name, sys, weather } = data;
      const icon = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/${
        weather[0]["icon"]
      }.svg`;
      console.log(data)
      console.log(sys)
      console.log(weather[0]["icon"])
      weatherCard.style.display="block";
      wa_name = document.getElementById("wa_name");
      wa_name.innerHTML = name;
      wa_country = document.getElementById("wa_country");
      wa_country.innerHTML = sys.country;
      wa_city_temp = document.getElementById("wa_city_temp");
      wa_city_temp.innerHTML = Math.round(main.temp);
      wa_temp_icon = document.getElementById("wa_temp_icon");
      wa_temp_icon.src = icon;
      wa_temp_caption = document.getElementById("wa_temp_caption");
      wa_temp_caption.innerHTML = weather[0]["description"];

    })
    .catch(() => {
      msg.textContent = "Please search for a valid city";
    });

  msg.textContent = "";
  form.reset();
  input.focus();
});