Web Development: Build a Simple Weather App With Vanilla JavaScript

Build a Simple Weather App With Vanilla JavaScript

Final product image — What You'll Be Creating

In today’s tutorial, we’ll learn how to build a simple, yet fully functional weather app with Vanilla JavaScript. We have a lot of interesting things to cover, so grab a cup of coffee and let’s get started! Here’s a quick navigation menu for you.

What You’ll Learn In This JavaScript Weather API Tutorial:

Scaffolding the Weather App
Define the Page Markup
Specify Some Basic Styles
Set the Main Styles
Add the JavaScript
Bonus: Get Real-Time Weather Data With the weatherstack API

What We’ll be Building

Here’s an introductory video which demonstrates the functionality of the app that we’re going to create:

Here’s the demo on CodePen for you to fork and play with:

Note:This tutorial assumes that you’re familiar with AJAX, an essential front-end technique. If you’re just beginning, check out this series.

1. Scaffolding the Weather App

Before start creating our app, there are a few things that we have to take into consideration.

Find a Weather API

First things first, we have to find a provider that will let us incorporate its weather data into our app. Luckily enough, there are several different providers out there for developing weather apps. Most of them include a free package along with premium subscriptions that scale depending on the services/features.

What is OpenWeather?

In our case, we’re going to use OpenWeatherMap, one of the most popular free choices. OpenWeather describes itself as a group of IT experts and data scientists that does deep weather data science since 2014. For each point on Earth, OpenWeather provides reliable historical, current and forecasted weather data via light-speed APIs.

To take advantage of its capabilities, first, we have to sign up for an API key:

This service comes with different packages. As you can see from the visualization below, the starter (free) one allows 60 calls per minute which suits our needs:

The available packages for the OpenWeatherMap API

So before continuing, please make sure that you’ve registered for an API key. Later, we’ll include that key in our script.

Keep in mind that the best way to test the app is by forking the CodePen demo and including your own key. If we all share the same key, the app will probably not work due to API call limits.

Where To Find Weather Icons and Weather UI Kits

Before we start with the weather API JavaScript code, we’ll need weather app icons. It’s worth noting that OpenWeatherMap comes with its own icon set and we’ll take a look at those. However, we’ll go one step further and use some custom ones.

Now, if you’re a web designer or work on multiple web design projects, Envato Elements is the best option for you.

For a low monthly fee, this subscription-based marketplace gives you unlimited access to everything you’ll need for your projects.

Here we’ll review some top weather icon vector sets and weather UI kits. Keep browsing Envato Elements weather UI kit library for more! Note that you can also now find weather vector icons free on Elements. Check them out!

1. Weather Icons and Font

If you like simple weather app icons, these are for you. This weather icon vector set comes with 32 vector icons and a Forecast font. This complete weather icon vector set includes 32 SVG files as well as HTML and CSS references.

2. UICON Weather Icons

This weather icon vector set features a modern and fresh look. There are 12 weather app icons in two color versions. All weather icons are crafted in EPS with a minimal design.

3. Vector Weather Icons and Fonts

If you’re looking for a complete weather icon vector set, check this out. The weather app icons pack comes with 42 unique icons and one font. Weather icons come in AI, PSD and SVG formats.

4. Weather App Template

Now, if you’d like to build a weather app with a template, we’ve got this weather UI kit. You can edit your own weather app using this template in Photoshop, Illustrator and Adobe XD.

5. Weather Small Widget For Web or Mobile

This is another cool weather UI kit if you want to build a different weather app. This weather UI kit features a clean and minimal design. You can edit it using Sketch.

2. Define the Page Markup

Now that we’ve seen some top weather app icons, it’s time to build a weather website with JavaScript. We’ll define two sections.

The first section will include a heading, a search form, and an empty span element. This element will become visible with an appropriate message under certain conditions. Specifically, if there isn’t any weather data available for a requested city or the data for this city are already known.

The second section will include a list of cities. By default, it won’t contain any cities. But, as we start searching for the weather for a specific city, if weather data is available, a corresponding list item (city) will be appended to the unordered list.

Here’s the initial page markup:

<section class="top-banner">
  <div class="container">
    <h1 class="heading">Simple Weather App</h1>
    <form>
      <input type="text" placeholder="Search for a city" autofocus>
      <button type="submit">SUBMIT</button>
      <span class="msg"></span>
    </form>
  </div>
</section>
<section class="ajax-section">
  <div class="container">
    <ul class="cities"></ul>
  </div>
</section>

Note: In our CodePen demo, the autofocus attribute of the search field won’t work. In fact, it’ll throw the following error which you can see if you open your browser console:

The cross-origin error due to the autofocus attribute

However, if you run this app locally (not as a CodePen project), this issue won’t exist.

And here’s the markup associated with a list item that we’ll generate dynamically through JavaScript:

<li class="city">
  <h2 class="city-name" data-name="...">
    <span>...</span>
    <sup>...</sup>
  </h2>
  <span class="city-temp">...<sup>°C</sup></span>
  <figure>
    <img class="city-icon" src="..." alt="...">
    <figcaption>...</figcaption>
  </figure>
</li>

3. Specify Some Basic Styles

With the markup for the weather app ready, we’ll forge on with the CSS. The first step, as always, is to specify some CSS variables and common reset styles:

:root {
  --bg_main: #0a1f44;
  --text_light: #fff;
  --text_med: #53627c;
  --text_dark: #1e2432;
  --red: #ff1e42;
  --darkred: #c3112d;
  --orange: #ff8c00;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
}

button {
  cursor: pointer;
}
 
input {
  -webkit-appearance: none;
}
 
button,
input {
  border: none;
  background: none;
  outline: none;
  color: inherit;
}

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

ul {
  list-style: none;
}

body {
  font: 1rem/1.3 "Roboto", sans-serif;
  background: var(--bg_main);
  color: var(--text_dark);
  padding: 50px;
}

4. Set the Main Styles

Let’s now discuss the main styles of our weather app.

Section #1 Styles

First, we’ll add some straightforward styles to the elements of the first section.

On medium screens and above (>700px) the layout should look like this:

The layout of the first section on large screens

On smaller screens the form elements will split into two lines:

The layout of the first section on small screens

Here are the associated styles:

/*CUSTOM VARIABLES HERE*/

.top-banner {
  color: var(--text_light);
}

.heading {
  font-weight: bold;
  font-size: 4rem;
  letter-spacing: 0.02em;
  padding: 0 0 30px 0;
}

.top-banner form {
  position: relative;
  display: flex;
  align-items: center;
}

.top-banner form input {
  font-size: 2rem;
  height: 40px;
  padding: 5px 5px 10px;
  border-bottom: 1px solid;
}

.top-banner form input::placeholder {
  color: currentColor; 
}

.top-banner form button {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 15px 20px;
  margin-left: 15px;
  border-radius: 5px;
  background: var(--red);
  transition: background 0.3s ease-in-out;
}

.top-banner form button:hover {
  background: var(--darkred);
}

.top-banner form .msg {
  position: absolute;
  bottom: -40px;
  left: 0;
  max-width: 450px;
  min-height: 40px;
}

@media screen and (max-width: 700px) {
  .top-banner form {
    flex-direction: column;
  }
  
  .top-banner form input,
  .top-banner form button {
    width: 100%;
  }

  .top-banner form button {
    margin: 20px 0 0 0;
  }
  
  .top-banner form .msg {
    position: static;
    max-width: none;
    min-height: 0;
    margin-top: 10px;
  }
}

Section #2 Styles

We’ll use CSS Grid to lay out the list items. Remember that each list item will represent a city. Their width will depend on the screen size.

On large screens (>1000px) we’ll have a four column layout.

The unordered list layout on large screens

Then on medium screens (>700px and ≤1000px) a three column layout, on small screens (>500px and ≤700px) a two column layout, and finally on extra small screens (≤500px) all elements will be stacked.

Here are the corresponding styles:

.ajax-section {
  margin: 50px 0 20px;
}

.ajax-section .cities {
  display: grid;
  grid-gap: 32px 20px;
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 1000px) { 
  .ajax-section .cities {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 700px) {
  .ajax-section .cities {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 500px) {  
  .ajax-section .cities {
    grid-template-columns: repeat(1, 1fr);
  }
}

Each column will look like a card with a bottom shadow that will be added via the ::after pseudo-element.

Inside the card, we’ll place weather information about the requested city. These will come from our request, apart from the icons. Those icons, which as mentioned above are grabbed from Envato Elements, will show the current weather condition of this city and match the equivalent OpenWeatherMap icons.

Below you can see a part of the CSS needed for this layout:

/*CUSTOM VARIABLES HERE*/

.ajax-section .city {
  position: relative;
  padding: 40px 10%;
  border-radius: 20px;
  background: var(--text_light);
  color: var(--text_med);
}

.ajax-section .city::after {
  content: ’’;
  width: 90%;
  height: 50px;
  position: absolute;
  bottom: -12px;
  left: 5%;
  z-index: -1;
  opacity: 0.3;
  border-radius: 20px;
  background: var(--text_light);
}

.ajax-section figcaption {
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ajax-section .city-temp {
  font-size: 5rem;
  font-weight: bold;
  margin-top: 10px;
  color: var(--text_dark);
}

.ajax-section .city sup {
  font-size: 0.5em;
}

.ajax-section .city-name sup {
  padding: 0.2em 0.6em;
  border-radius: 30px;
  color: var(--text_light);
  background: var(--orange);
}

.ajax-section .city-icon {
  margin-top: 10px;
  width: 100px;
  height: 100px;
}

5. Add the JavaScript

At this point, we’re ready to build the core functionality of our weather app. Let’s do it!

On Form Submission

Each time a user submits the form by pressing the Enter key or the Submit button, we’ll do two things:

Stop the form from submitting, hence prevent reloading the page.
Grab the value which is contained in the search field.

Here’s the starting code:

const form = document.querySelector(".top-banner form");

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

Next, we’ll check to see whether there are list items (cities) inside the second section.

Perform an AJAX Request

We’ll start with the assumption that the list is empty. That said, it has never run any AJAX request in the past. In such a case, we’ll execute a request to the OpenWeatherMap API and pass the following parameters:

The city name (e.g. athens) or the comma-separated city name along with the country code (e.g. athens,gr) which will be the value of the search field
The API key. Again, you should use your own key to avoid unexpected errors due to API call limits.
The unit of temperature for the requested city. In our case, we’ll go with Celcius.

With all the above in mind, by following the API documentation, our request URL should look something like this:

const apiKey = "YOUR_OWN_KEY";
const inputVal = input.value;

...

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

To perform the AJAX request, we have a lot of options. We can use the plain old XMLHttpRequest API, the newer Fetch API, or even a JavaScript library like jQuery and Axios. For this example, we’ll go with the Fetch API.

To grab the desired data, we have to do the following things:

Pass the URL we want to access to the fetch() method.
This method will return a Promise containing the response (a Response object). But this won’t be the actual response, just an HTTP response. To grab the response data in the desired JSON format (this is the default data format of OpenWeatherMap), we’ll use Response object’s json() method.
This method will return another Promise. When it’s fulfilled, the data will be available for manipulation.
If for some reason the request is unsuccessful, a corresponding message will appear on the screen.

So, our AJAX request would look something like this:

...

 fetch(url)
  .then(response => response.json())
  .then(data => {
    // do stuff with the data
  })
  .catch(() => {
    msg.textContent = "Please search for a valid city 😩";
  });

Tip: Instead of chaining then()s, we could have used the newer and more readable async/await approach for the AJAX request.

Here’s an example of the response data:

Build the List Item Component

With the AJAX request in place, each time we type a city in the search field, the API will return its weather data, if they are available. Our job now is to collect only the data that we need, then create the associated list item and, lastly, append it to the unordered list.

Here’s the code responsible for this job:

const { main, name, sys, weather } = data;
const icon = `https://openweathermap.org/img/wn/${
  weather[0]["icon"]
}@2x.png`;

const li = document.createElement("li");
li.classList.add("city");
const markup = `
  <h2 class="city-name" data-name="${name},${sys.country}">
    <span>${name}</span>
    <sup>${sys.country}</sup>
  </h2>
  <div class="city-temp">${Math.round(main.temp)}<sup>°C</sup>
  </div>
  <figure>
    <img class="city-icon" src=${icon} alt=${weather[0]["main"]}>
    <figcaption>${weather[0]["description"]}</figcaption>
  </figure>
`;
li.innerHTML = markup;
list.appendChild(li);

There are two things here we have to discuss:

If you look again at the response visualization above, you’ll notice that the API returns an icon code (e.g. "50d") which holds the current weather condition for the target city. Based on this code, we’re able to construct the icon URL and display it in the card via the img tag.
Inside the .city-name element of each list item, we’ll append the data-name attribute with value the cityName,countryCode (e.g. madrid,es). Later we’ll use this value to prevent duplicate requests.

Reset Things

Lastly, after the AJAX request, we’ll clear the content of the .msg element, the value of the search field, and give focus to that field as well:

...

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

Great job, folks! We’ve just created the first version of our app. By the time you put your own API key and search for a city, you should see a card layout similar to that one:

Here’s the related CodePen demo:

Add Custom Weather Icons

Let’s now customize a little bit the look and feel of our app. We’ll replace the default OpenWeatherMap PNG icons with the SVGs we downloaded earlier from Envato Elements.

To do this, I’ve uploaded all the new icons to CodePen (via the Asset Manager as I’m a PRO member) and changed their names, so they will match the names and the weather conditions of the original icons, like this:

Then, in the code, we only have to change the icon path:

 //BEFORE
const icon = `https://openweathermap.org/img/wn/${
  weather[0]["icon"]
}@2x.png`;

//AFTER
const icon = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/${
  weather[0]["icon"]
}.svg`;

Prevent Duplicate Requests

There’s still one thing we have to fix. So far, as we perform a successful AJAX request, a list item is created. That said, the list can contain multiple identical list items which refer to the same city, like so:

That’s bad user experience, so let’s make sure that only a single request is triggered for a specific city.

But before that, there’s another thing for taking into consideration. The same city name can exist in more than one country. For example, if we search for “Athens” in the OpenWeatherMap’s search finder, we’ll see these results:

With all the above in mind, we’ll write some code which will ensure that only a single request per city, per country will be executed:

...

//1
const listItems = list.querySelectorAll(".ajax-section .city");
const listItemsArray = Array.from(listItems);

if (listItemsArray.length > 0) {
  //2
  const filteredArray = listItemsArray.filter(el => {
    let content = "";
    //athens,gr
    if (inputVal.includes(",")) {
      //athens,grrrrrr->invalid country code, so we keep only the first part of inputVal
      if (inputVal.split(",")[1].length > 2) {
        inputVal = inputVal.split(",")[0];
        content = el.querySelector(".city-name span").textContent.toLowerCase();
      } else {
        content = el.querySelector(".city-name").dataset.name.toLowerCase();
      }
    } else {
      //athens
      content = el.querySelector(".city-name span").textContent.toLowerCase();
    }
    return content == inputVal.toLowerCase();
  });
  
  //3
  if (filteredArray.length > 0) {
    msg.textContent = `You already know the weather for ${
      filteredArray[0].querySelector(".city-name span").textContent
    } ...otherwise be more specific by providing the country code as well 😉`;
    form.reset();
    input.focus();
    return;
  }
}

Let me explain what actions happen here:

Again during the submit handler, before making an AJAX request, we check to see whether the unordered list is empty or not. If it isn’t empty, that means at least one successful AJAX request has already been executed.
Next, we check to see if there’s a list item who’s the city name or the value of its data-name attribute are equal to the search field’s value.
If so, that means the user already knows the weather for this city, so there’s no need to perform another AJAX request. As the following actions, we’ll show them a related message, clear the value of the search field and give it focus.

Note #1: As I’ve noticed, in case you search for a city with at most two-letters which don’t represent any country code (e.g. athens,aa), the API won’t return anything. On the other hand, if you search for a city along with at least three-letters which also don’t represent any country code (e.g. athens,aaaa), the API will ignore the part after the comma and return all cities named as the first part (e.g. athens).

Note #2: For this exercise, we won’t also cover the special case where a country contains more than one city with the same name (e.g. Athens in USA). So, for example, if a user searches for “athens,us” only one city will appear in the screen and not more. In order to cover the ideal scenario, users should somehow know the city ID (e.g. perhaps make them available as a dropdown) and search based on that instead of searching based on its name.

Excellent job, folks! We’ve just built our app. Let’s take a look:

Your Weather App Is Ready!

And we’re done! This really was quite a long journey, but I hope that you enjoyed it and that it has helped enhance your front-end skills.

Once again, don’t forget to put your own key for live app testing!

As a reminder, let’s look again at how the weather app works:

As always, thanks a lot for reading!

Next Steps

There are so many things that you can do to extend the functionality of this weather app. Here are some thoughts:

Use geolocation to grab the user’s location, and then perform an AJAX request for retrieving weather data for their closest cities.
Use localStorage to persist the data above or even a real-time database like Firebase.
Use a charting library like Highcharts.js for building a meteogram that will give a weather forecast. If you do so, this tutorial might help.
Use an image API like Flickr API to present as a gallery lightbox a list of photos for each city.

If there’s anything else that you might want to see as an app extension, let me know in the comments below!

Bonus: Get Real-Time Weather Data With the weatherstack API

Sponsored: Check out this bonus tutorial by Jeremy McPeak explaining weatherstack; a different source of weather data for your weather-based applications.

Discover More JavaScript Tutorials and Resources

Now you know how to build a weather app with JavaScript and how to build a weather website. If you’d like to explore more about JavaScript and learn more about it, here are more cool tutorials: