HTML JavaScript CSS Computer Science

Advanced

40 mins

Teacher/Student led

+40 XP

What you need:
Chromebook/Laptop/PC

Weather Web App

In this lesson, you'll build a Weather Web App using HTML, CSS, JavaScript, and jQuery. Learn to fetch real-time weather data from an API, style your app, and add a toggle between Celsius and Fahrenheit.

Learning Goals Learning Outcomes Teacher Notes

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Introduction to Weather Web App
2 Setting Up Your Project Folder
3 Creating the HTML Structure
4 Adding CSS Styling
5 Initialising JavaScript
6 Fetching and Displaying Weather Data
7 Challenge: Enhance Your App
8 Wrap Up

1 - Introduction to Weather Web App

In this lesson, you'll create your own Weather Web App using HTML, CSS, JavaScript, and jQuery. The app will display real-time weather data for a specified location.

You'll learn how to add jQuery and Fontawesome, create an HTML structure, style it, initialise JavaScript, fetch and display weather data from an API, and add a feature to toggle between Celsius and Fahrenheit. By the end, you'll have a fully functional, interactive Weather Web App.

2 - Setting Up Your Project Folder

First, create a new workspace for this lesson in VS Code.

Open VS Code and follow these steps:

Click 'File' > 'Open Folder'.
Create a new folder on your computer, for example, name it 'WeatherApp' in your Documents folder.
Select that folder in VS Code to set it as your workspace.

You should see the folder name in the Explorer pane on the left. This is where you'll add your files.

👇 Mark your steps as done as you complete them.

+5 XP

3 - Creating the HTML Structure

Now, create the basic HTML structure for your weather app, including sections for location input, weather display, and toggle button. We'll include jQuery via CDN for DOM manipulation and Fontawesome for icons. Fontawesome is a popular library that provides a wide collection of scalable vector icons that you can easily add to your web pages using simple HTML classes, making it straightforward to enhance your app with visual elements like weather symbols.

Create a new file called index.html and add the following code to it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather Web App</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Weather Web App</h1>
    <div id="weather-app">
        <input type="text" id="location" placeholder="Enter city name">
        <button id="get-weather">Get Weather</button>
        <div id="weather-info"></div>
        <button id="toggle-unit">Toggle to Fahrenheit</button>
    </div>
    <script src="js/script.js"></script>
</body>
</html>

This sets up the structure with an input for location, a button to fetch weather, a display area, and a toggle button. jQuery and Fontawesome are included via CDNs.

Save the file and open it in a web browser to see the basic layout.

4 - Adding CSS Styling

To make your weather app look appealing, add some CSS styles for the structure and headings.

Create a new css folder and add a styles.css file to it. Then add the following code to styles.css:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f8ff;
}

h1 {
    color: #333;
}

#weather-app {
    margin: 20px auto;
    width: 60%;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

input[type="text"] {
    padding: 10px;
    width: 200px;
}

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

button:hover {
    background-color: #0056b3;
}

#weather-info {
    font-size: 1.2em;
    margin-top: 20px;
}

Save the file. Refresh your browser to see the styled layout.

+10 XP

5 - Initialising JavaScript

Create a new js folder and add a script.js file to it. We'll initialise the JavaScript to handle button clicks and prepare for API calls.

Add the following complete JavaScript code to script.js:

$(document).ready(function() {
    let unit = 'metric'; // Default to Celsius

    $('#get-weather').click(function() {
        const location = $('#location').val();
        if (location) {
            // Placeholder for API call
            $('#weather-info').html('<p>Fetching weather for ' + location + '...</p>');
        } else {
            alert('Please enter a location');
        }
    });

    $('#toggle-unit').click(function() {
        unit = (unit === 'metric') ? 'imperial' : 'metric';
        $(this).text((unit === 'metric') ? 'Toggle to Fahrenheit' : 'Toggle to Celsius');
        // Placeholder for refreshing weather
    });
});

This initialises jQuery, sets a default unit, and adds click handlers for the buttons. It includes placeholders for the API functionality.

Save and refresh your browser. Try entering a location and clicking the buttons to see the placeholders.

+15 XP

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started

Copyright Notice
This lesson is copyright of DigitalSkills.org. Unauthorised use, copying or distribution is not allowed.