Next, you will need to create a template for the home page that will display the weather data to the user in the web browser. Make sure you have a directory/folder in your project called views with an index.ejs file in it if you don’t already have this.

Add the following code to the views/index.ejs template file:

Test your code

Run the server (using the command node index.js) and navigate to http://localhost:3000 in your browser. The index.ejs template file you just created will be rendered when the home page is requested and the weather data will be displayed in the browser.

Create a theme for the app

The next step is to use some CSS code to apply a style to the website. Go to your server code (index.js file) and add the following line near the top of your code (just make sure it is below the const app = express(); line of code. This will set the folder containing static files (eg. CSS files) to 'public'.

app.use(express.static('public'));

Now create a directory/folder called "public" in your project directory. In the public directory, you can create another directory called “css” which will just be used to store CSS files. In the public/css directory, create a new file called style.css .

Add the following code to the style.css file (public/css.style.css):

Get user input and apply the theme

Now we will modify the index.ejs (template file) in the views directory to reference the style.css file to apply the new theme. At the same time, we will add a text input field to the web page so that the user can enter their own own custom location (city/suburb) name and get weather data for that location. Replace the existing code in the index.ejs file with the following code:

This new code now references the CSS file so that it applies the theme to the page. The HTML code has also been modified to add a form with a textbox input where the user can enter the name of their city, suburb or town, and a button that can be clicked to submit the form. Currently, the weather for Sydney is displayed on the home page by default but now the user will have the option to enter a city/suburb name to get the weather for their preferred location.

There is an if statement that checks if the error variable is null (empty, meaning there is no error) and if that is true, it will then check to make sure the temperature and the humidity variables are set and contain data, and then the temperature and humidity values will be displayed, otherwise an error message will be displayed if the weather data could not be fetched.

Update the server code to handle user input

Now, let's go back to the index.js file and update the code to add an app.post('/') route for the POST request (which is made when the form is submitted by the user) - this will make a request to the weather API for weather information for the specific suburb that the user entered in the text input box, and then display the weather information back to the user for that custom location. The code for the app.post('/') route will be added below the existing code for the app.get(‘/’) route.

Here is the complete code for the index.js file:

Start the server and navigate to http://localhost:3000 in your browser. The home page should now use the CSS stylesheet to apply a theme, and you can now request weather data for a custom location by entering a suburb/city name into the text box and clicking the ‘Get weather’ button.

The app can be extended further by displaying different icon images for current conditions (eg. sunny, cloudy, rainy), displaying more weather information (eg. minimum and maximum temperature, forecasts), and by improving the theme (eg. to display different background images for different cities). You can refer to the OpenWeatherMap API documentation for more ways to use the API.

Next lesson: Creating a Movie Reviews app (Part 1 - Setting up the project)