Weekly Weather Forecast Application Development

Introduction

In this project, you will learn how to create a weather forecast application that displays the weekly weather information for a specific location. The project involves fetching weather data from an API, parsing the response, and dynamically updating the HTML elements to present the weather forecast to the user.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to fetch weather forecast data from an API using jQuery's AJAX functionality
• How to bind the fetched data to the corresponding HTML elements on the web page
• How to display the weekly weather forecast information in a user-friendly format

🏆 Achievements

After completing this project, you will be able to:

• Create a simple weather forecast application that provides users with weekly weather information
• Understand how to make AJAX requests to fetch data from an API
• Demonstrate the ability to manipulate the DOM and update HTML elements using jQuery

Skills Graph

Set Up the Project Structure

In this step, you will set up the project files and structure. Follow the steps below to complete this step:

Open the project folder. The directory structure is as follows:

├── images        ## image resources
├── js            ## directory for js files and json files
├── index.html    ## weather forecast page
├── style.css     ## css file

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Fetch Weather Forecast Data

In this step, you will learn how to fetch the weekly weather forecast data for W-town using the provided API.

1. Open the js/index.js file in your code editor.
2. Locate the getweather() function, which is responsible for fetching the weather forecast data.
3. Inside the getweather() function, use the jQuery $.get() method to make a GET request to the js/weather.json API endpoint.

// TODO
$.get("js/weather.json", function (data) {
  // Bind the weather forecast data to the HTML elements
  // ...
});

4. The response data from the API will be passed to the callback function as the data parameter. This data contains the weekly weather forecast information.

Bind Weather Forecast Data to the HTML

In this step, you will learn how to bind the fetched weather forecast data to the corresponding HTML elements on the page.

1. Inside the callback function of the $.get() method, locate the code where you will bind the data to the HTML.
2. Use jQuery to select the necessary HTML elements, such as the weather icon, weather description, temperature, and wind information.

function getweather() {
  // TODO
  $.get("js/weather.json", function (data) {
    let item = $(".item");
    let img, one, two, three, time;
    for (let i = 0; i < data.result.length; i++) {
      img = item[i].children[0];
      one = item[i].children[1].children[0];
      two = item[i].children[1].children[1];
      three = item[i].children[1].children[2];
      time = item[i].children[1].children[3].children;
      img.src = data.result[i].weather_icon;
      one.innerText = data.result[i].weather;
      two.innerText = data.result[i].temperature;
      three.innerText = data.result[i].winp;
      time[0].innerText = data.result[i].days;
      time[1].innerText = data.result[i].week;
    }
  });
}

3. The code above iterates through the data.result array, which contains the weekly weather forecast information. For each item, it selects the corresponding HTML elements and updates their content with the data from the API response.
4. Save the changes to the js/index.js file.
5. Refresh the web page, and you should see the weekly weather forecast information displayed as shown in the target image.

Congratulations! You have successfully completed the weather forecast project by fetching the data from the API and binding it to the HTML elements on the page.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.