Integrating External Libraries and APIs

In this lesson, you'll explore how to integrate external libraries and APIs into your web projects. Learn to set up a workspace, add jQuery, build a weather app with HTML, and fetch data from the OpenWeatherMap API to display weather information.

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 Integrating Libraries and APIs
2 Setting Up Your Project Folder
3 Creating the HTML Structure
4 Adding Basic CSS Styling
5 Creating the JavaScript File
6 Understanding jQuery Syntax, Selectors, and Events
7 Adding a Click Event Listener with jQuery
8 Fetching Weather Data from the API
9 Display More Information
10 Challenge: Display Additional Weather Data
11 Wrap Up

1 - Introduction to Integrating Libraries and APIs

In this lesson, you'll learn how to integrate external libraries and APIs into a web project. Libraries like jQuery simplify JavaScript tasks, while APIs provide data from external sources.

You'll set up a new workspace in VS Code, add jQuery, create an HTML structure for a weather app, learn jQuery syntax, selectors, and events, add a click event listener to fetch data from the OpenWeatherMap API, display the weather for a location, and tackle a challenge to show more data.

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 'WeatherAPI' 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.

3 - Creating the HTML Structure

Now, create the basic HTML structure with a button and a display area.

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 App</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Dublin Weather</h1>
    <button id="getWeather">Get Weather</button>
    <div id="weatherDisplay"></div>
    <script src="js/script.js"></script>
</body>
</html>

This includes a title, a button to fetch weather, a div to display it, and links to CSS and JS files. We've also added jQuery via CDN. A CDN (Content Delivery Network) is a system of distributed servers that deliver web content, like libraries, quickly to users based on their location.

Save the file and open it in a web browser.

+10 XP

4 - Adding Basic CSS Styling

To style your page, create a CSS file.

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

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

h1 {
    color: navy;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

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

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

+5 XP

5 - Creating the JavaScript File

Next, create a new js folder and add a script.js file to it.

For now, leave 'script.js' empty.

Your project is now set up with HTML, CSS, jQuery, and JS linked.

+5 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.