HomeJavascriptWeather App With Javascript

Weather App With Javascript

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a weather app. To build this app we need HTML, CSS and Javascript.

This tutorial is suitable for javascript intermediates who have basic knowledge of fetch(). If you are looking for more projects to improve your Javascript skills, you should check out this playlist. This playlist consists of 90+ javascript projects.

The difficulty of these projects varies from easy to quite complex. Hence these projects are suitable for javascript beginners as well as experts.

The project consists of a search bar. The user enters the desired city into the input field and clicks on the search button. On hitting the search button we first verify if such a city exists in the database. If no, we display an error message saying – “No city found.”

In case, the city exits, we display the weather information for that particular city. This information includes – City name, temperature, weather icon, maximum temperature, and minimum temperature.

We obtain this information from API. The API that we are using here is – Open Weather API.

Video Tutorial:

If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. Also subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.

Project Folder Structure:

Before we begin the actual coding, let us first take a look at the project folder structure. We create a project folder called – “Weather App”. Within this app, we have 4 files. These files are index.html which is the HTML document. Next, we have style.css which is the stylesheet. Finally, we have key.js and script.js which are both script files.

HTML:

We start with HTML. First, copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather App</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="container">
        <div class="search-container">
          <input
            type="text"
            placeholder="Enter a city name"
            id="city"
            value="mumbai"
          />
          <button id="search-btn">Search</button>
        </div>
        <div id="result"></div>
      </div>
    </div>
    <!-- Script -->
    <script src="key.js"></script>
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we style our app using CSS. Now copy the code provided to you below and paste it into the stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
:root {
  --white: #ffffff;
  --off-white: #e5e5e5;
  --transp-white-1: rgba(255, 255, 255, 0.25);
  --transp-white-2: rgba(255, 255, 255, 0.1);
  --blue-1: #62b8f5;
  --blue-2: #4475ef;
  --shadow: rgba(3, 46, 87, 0.2);
}
body {
  height: 100vh;
  background: linear-gradient(135deg, var(--blue-1), var(--blue-2));
}
.wrapper {
  font-size: 16px;
  width: 90vw;
  max-width: 28em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.container {
  width: 100%;
  background: var(--transp-white-2);
  backdrop-filter: blur(10px);
  padding: 3em 1.8em;
  border: 2px solid var(--transp-white-2);
  border-radius: 0.6em;
  box-shadow: 0 1.8em 3.7em var(--shadow);
  text-align: center;
}
.shape {
  position: absolute;
  background-color: var(--transp-white-1);
  backdrop-filter: blur(1.2em);
  border: 2px solid var(--transp-white-2);
  border-radius: 50%;
}
.shape-1 {
  height: 13em;
  width: 13em;
  right: -6.5em;
  top: 1.8em;
}
.shape-2 {
  height: 11em;
  width: 11em;
  bottom: -3.7em;
  left: -2.5em;
}
.search-container {
  font-size: 1em;
  display: grid;
  grid-template-columns: 9fr 3fr;
  gap: 1.25em;
}
.search-container input,
.search-container button {
  outline: none;
  font-size: 1em;
  border: none;
}
.search-container input {
  padding: 0.7em;
  background-color: transparent;
  border-bottom: 2px solid var(--transp-white-1);
  color: var(--white);
  font-weight: 300;
}
.search-container input::placeholder {
  color: var(--off-white);
}
.search-container input:focus {
  border-color: var(--white);
}
.search-container button {
  color: var(--blue-2);
  background-color: var(--white);
  border-radius: 0.3em;
}
#result h2 {
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin: 1.25em 0;
}
.weather,
.desc {
  color: var(--off-white);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.9em;
  font-weight: 500;
  line-height: 2em;
}
.weather {
  margin-top: -0.7em;
}
#result img {
  margin: 0.6em 0 0 0;
  width: 6.2em;
  filter: drop-shadow(0 1.8em 3.7em var(--shadow));
}
#result h1 {
  font-size: 4em;
  margin: 0.3em 0 0.7em 0;
  line-height: 0;
  font-weight: 400;
  color: var(--white);
}
.temp-container {
  display: flex;
  justify-content: center;
}
.temp-container div {
  padding: 0.3em 1em;
}
.temp-container div:first-child {
  border-right: 1px solid var(--transp-white-1);
}
.temp-container .title {
  font-weight: 600;
  color: var(--white);
}
.temp-container .temp {
  font-weight: 300;
  color: var(--off-white);
}
.msg {
  margin-top: 1.8em;
  color: var(--white);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 450px) {
  .wrapper {
    font-size: 14px;
  }
}

Javascript:

We now sign up at Open Weather API. And copy-paste the API key in our key.js file as a global variable.

//Assign the copied API key to the 'key' variable
key = "";

We now sign up at Open Weather API. And copy-paste the API key in our key.js file as a global variable.

Finally, we add functionality to the code using Javascript. Once again copy the code below and paste it into your script file.

let result = document.getElementById("result");
let searchBtn = document.getElementById("search-btn");
let cityRef = document.getElementById("city");

//Function to fetch weather details from api and display them
let getWeather = () => {
  let cityValue = cityRef.value;
  //If input field is empty
  if (cityValue.length == 0) {
    result.innerHTML = `<h3 class="msg">Please enter a city name</h3>`;
  }
  //If input field is NOT empty
  else {
    let url = `https://api.openweathermap.org/data/2.5/weather?q=${cityValue}&appid=${key}&units=metric`;
    //Clear the input field
    cityRef.value = "";
    fetch(url)
      .then((resp) => resp.json())
      //If city name is valid
      .then((data) => {
        console.log(data);
        console.log(data.weather[0].icon);
        console.log(data.weather[0].main);
        console.log(data.weather[0].description);
        console.log(data.name);
        console.log(data.main.temp_min);
        console.log(data.main.temp_max);
        result.innerHTML = `
        <h2>${data.name}</h2>
        <h4 class="weather">${data.weather[0].main}</h4>
        <h4 class="desc">${data.weather[0].description}</h4>
        <img src="https://openweathermap.org/img/w/${data.weather[0].icon}.png">
        <h1>${data.main.temp} &#176;</h1>
        <div class="temp-container">
            <div>
                <h4 class="title">min</h4>
                <h4 class="temp">${data.main.temp_min}&#176;</h4>
            </div>
            <div>
                <h4 class="title">max</h4>
                <h4 class="temp">${data.main.temp_max}&#176;</h4>
            </div>
        </div>
        `;
      })
      //If city name is NOT valid
      .catch(() => {
        result.innerHTML = `<h3 class="msg">City not found</h3>`;
      });
  }
};
searchBtn.addEventListener("click", getWeather);
window.addEventListener("load", getWeather);

That’s it for this tutorial. If you face any issues while creating this project you can download the source code by clicking on the ‘Download Code’ button below. Also, if you have any queries, suggestions or feedback you can comment below.
Happy Coding!

Previous articleMCQ – 5/7/22
Next articleMCQ – 7/7/22
RELATED ARTICLES

4 COMMENTS

  1. What about getting the weather including The countries of any location typed ..instead of bringing only the location

LEAVE A REPLY

Please enter your comment!
Please enter your name here

thirteen − 10 =

Most Popular