Weather for Dublin

Project Description

Uses the Fetch API to retrieve current weather information for the city of Dublin, Ireland.

Setting up the base web page

Your first task is to set up the base web page.

  1. In your portfolio/js folder, create a new sub-folder named weather.
  2. Download the following file to this new portfolio/js/weather folder.   index.html
  3. Give it the filename index.html.
  4. Update the website logo, favicon, <title> tag and the <footer> with your own details.

This file contains all the necessary HTML and CSS for this project.

Note: Ensure the file is linked to the lunadoge.min.css stylesheet, and not the older lunadoge.css version.

Project images

In your portfolio/js/weather folder, create an assets/img sub-folder.

Download the following two images to your new portfolio/js/weather/assets/img sub-folder.


You now have all the resources you need for your JavaScript Weather project.

Re-creating the table with JavaScript

Your first task is to transform the table from static HTML into a table that is created by JavaScript. You need only to re-create the table rows in JavaScript and not the full table. Here are the steps.

  1. In your portfolio/js/weather folder, create a new empty file named app.js.
  2. In this app.js file, add the following function.
    function populatetableRows() {
    
    )
  3. At the bottom of your index.html web page, just before the closing </body> tag, link to this app.js file.
  4. In the index.html web page, select and cut the table rows as shown below. weather pic Save the web page.
  5. In the app.js file, add a new variable strTableRows, paste in the table rows and enclose the pasted text inside a pair of back ticks ` as shown below. weather pic
  6. Assign the strTableRows to the table rows in the web page as follows. weather pic

Running the function when the web page loads

You want your populatetableRows() function to run as soon as the web page loads. You have two options.

Immediately-invoked Function Expression (IIFE)

In JavaScript an IIFE (pronounced iffy) is a function that runs without needing to be invoked or called from elsewhere in the program. It has the following syntax.

(function doSomething() {
/* function body */
})()

Note that:

  • The entire function is enclosed within parentheseis ( ).
  • At the end, after the closing parentheseis ) is a pair of parentheseis ().

IIFEs are very useful because they enable code to be run immediately - but do not add variables to the global object.

Transform your populatetableRows() function into an IIFE as shown below.

weather pic

Save your app.js file and reload the index.html in your web browser. The code should now run and the table rows should be created.

Adding an event listener to the web page

A second option for running a JavaScript function when a web page loads is to add an event listener for the web page. The syntax is as follows.

document.addEventListener("DOMContentLoaded", doSomething);

Try this second option by removing the IIFE syntax from your populatetableRows() and adding the following before or after it in the app.js file.

weather pic

Save your app.js file and reload the index.html in your web browser. Once again, the code should now run and the table rows should be created.

Exploring the Open Weather API

A public API from Open Weather provides access to current weather data for any location on Earth including over 200,000 cities. The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations.

Let's try it out.

  1. Open a new tab in your web browser and enter the following web address with an API end-point.
    https://api.openweathermap.org/data/2.5/weather?q=Paris,fr&units=metric&APPID=bc425ac2188d406c884f4fdd88b339f0  
    You can see that the link contains a city name Paris and a country code fr. These two parameters are not case-sensitive. For example, you could enter them as paris and a FR. See below.
    https://api.openweathermap.org/data/2.5/weather?q=paris,FR&units=metric&APPID=bc425ac2188d406c884f4fdd88b339f0   
  2. Here is the current weather in London in the UK.
    https://api.openweathermap.org/data/2.5/weather?q=london,uk&units=metric&APPID=bc425ac2188d406c884f4fdd88b339f0  
  3. And here is the current weather in New York in the US. Note the + character to join the two words New and York.
    https://api.openweathermap.org/data/2.5/weather?q=new+york,us&units=metric&APPID=bc425ac2188d406c884f4fdd88b339f0  

The API requires a key for access. You can obtain one for free at this link: Subscribe for API.

The API provides a wide range of data items. In this project, we will use the following four.

weather pic

Using the Fetch API

The JavaScript Fetch API has the following general syntax. In the example below, the feed data is provided in JSON format.

async function fetchSomeData() { 
   await fetch('https://apinnnnn.com/folders/parameters')

      .then(response => {
         if (response.status !== 200) {
            console.log('Error Status Code: ' + response.status);
            return;
         }
         response.json().then((data) => {
            // Extract data from feed and display in web page
         });
       })

       .catch(error => {
          // handle any error
      });
}

Let's include this API code within the populatetableRows().

  1. Open the app.js file and add the Fetch API code as shown below. weather pic
  2. Save your app.js script and view the web page in your browser. It should look as shown before.
  3. Open your browser console and verify that the data is being obtained in JSON format from the weather feed.
  4. In the JavaScript code, update the four table cells as follows. weather pic You can now remove the console.log statement.
  5. At the top of the app.js file, add this new function.
    const capitalize = s => s && s[0].toUpperCase() + s.slice(1)
  6. Apply this function to the first item of weather data as follows. weather pic

Save your app.js script, view the web page in your browser and verify the page works correctly.

Updating the background image

As a final step, add the following function to app.js that will change the background image according to the time of day.

weather pic

When finished, upload the weather folder as a sub-folder of the portfolio/js folder on your GitHub account.