Building a Simple Weather App using JavaScript: A Step-by-Step Guide

3 min readAug 31, 2023

Weather apps have become an integral part of our daily lives, helping us stay prepared for the elements and plan our activities accordingly. In this tutorial, we’ll walk through the process of creating a simple weather app using JavaScript. By the end of this guide, you’ll have a basic yet functional weather app that fetches and displays weather information for a given location.

Prerequisites

Before we dive into the coding, make sure you have the following:

Basic understanding of HTML, CSS, and JavaScript.
Text editor or integrated development environment (IDE) for coding.
An API key from a weather service provider. In this tutorial, we’ll use the OpenWeatherMap API.

Step 1: Set Up Your Project

weather-app/
├── index.html
├── styles.css
└── script.js

Step 2: Create the HTML Structure

In the index.html file, set up the basic structure of your weather app:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Weather App</title>
</head>
<body>
    <div class="container">
        <h1>Weather App</h1>
        <input type="text" id="cityInput" placeholder="Enter city">
        <button id="searchBtn">Search</button>
        <div id="weatherInfo">
            <!-- Weather information will be displayed here -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: Style Your App

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
    margin-top: 0;
}

input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}

#weatherInfo {
    margin-top: 20px;
}

Step 4: Fetch Weather Data using JavaScript

Now, let’s move on to the script.js file to handle the functionality of fetching and displaying weather data:

const apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key
const searchBtn = document.getElementById('searchBtn');
const cityInput = document.getElementById('cityInput');
const weatherInfo = document.getElementById('weatherInfo');

searchBtn.addEventListener('click', () => {
    const city = cityInput.value;
    if (city) {
        fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
            .then(response => response.json())
            .then(data => {
                const { name, main, weather } = data;
                const temperature = main.temp;
                const description = weather[0].description;
                weatherInfo.innerHTML = `<h2>${name}</h2>
                                        <p>Temperature: ${temperature}°C</p>
                                        <p>Weather: ${description}</p>`;
            })
            .catch(error => {
                console.error('Error fetching weather data:', error);
                weatherInfo.innerHTML = '<p>City not found</p>';
            });
    }
});

Replace 'YOUR_API_KEY' with the API key you obtained from OpenWeatherMap.

Step 5: Testing Your App

Open the index.html file in your web browser. Enter a city name in the input field and click the "Search" button. Your app should fetch and display the current temperature and weather description for the specified city.

Congratulations! You’ve successfully built a simple weather app using JavaScript. This is just the beginning — you can further enhance the app by adding features like 5-day forecasts, location detection, and more advanced styling.

Remember to explore different weather APIs and experiment with new features to take your weather app to the next level. Happy coding!