How To Create Your Own Weather Website

About a century ago, understanding and predicting the weather was all about guesswork, which most of the time turned to be untrue.

However, today everyone can become an unmistakable oracle and access over 40000 weather stations via free, accurate, and advanced technologies.

Today, you can build your website or app and search for any city by name and access real-time weather information. This write-up presents a step-to-step guide on how to build a weather website.

Pre-Project Setup

Before you start creating a weather website, you’ll need:

• A RapidAPI account. It takes a few minutes to create.
• Node.js; It provides an event-driven, asynchronous, and cross-platform environment where you can build scalable and robust server-side applications using JavaScript.

With the two essentials are in place, you can now progress to creating your application.

How to Create a Weather Website

1. Get an API Key to a Weather API on RapidAPI.com

OpenWeatherMap is an excellent starting point if you want to leverage APIs to get the required data. They boast an expansive database that provides different APIs that are related to weather.

Once you log in to RapidAPI, you need to generate an API key that will grant you access to OpenWeatherMap API. You will see some key stats about the APIs, including popularity, rating, and latency, among others.

The following tasks are presented when it comes to the OpenWeatherMap API:

• Data for Current Weather: With this request, you can get up-to-date weather information from anywhere around the globe. The database is updated regularly with resources from over 40000 weather stations.
• Forecast Weather Data: This provides weather forecasts for any location in the world. Using a flexible algorithm of weather calculations, you can get weather information not only for cities but also for any geographical coordinate.
• Search Weather Data: it allows you to search and collect weather data by city name. When you key in the name of a city, it provides you with a list of most renowned cities with that name around the world.

2. Set up the Project

The second step is to put up your project, and it involves creating an empty directory, naming it, and running it. You need to fill out the required information so that you can initialize the project. Then, you need to create a file and name it app.js. This file will house the main code for the application. With this puzzle pieces on standby, we can now start building a website.

3. Create Server with Express.js

Another imperative component that needs to be up and running is the server. To build the server, we will use Express.js, a minimalist web framework for Node.js. Express must be installed in the console for it to be utilized:

npm install --save express

Now you need to create a new folder in the project directory and name it “geocode.” Add filegeocode.js and the necessary code.

After that, create another folder in the project directory and name it “WeatherAPI”. Add getWeather.js file and some code.

Then, copy the OpenWeatherAPI key ID and use it to replace your RapidAPI key ID. Now make a new folder for “view” where you’ll type city name and receive the current weather data. Add file index.html and some code

Simply put, Ejs allows you to interact with a vast array of variables, and they dynamically create your HTML based on these variables. Ejs are accessible by default in the views directory, and all you need is to create a folder named views to get hold of them.

Using an AJAX post method, we can display the temperature of a given city. This can be achieved by creating a folder “public” and adding new folder JS, and new file name as a postrequest.js, followed by this code.

$(document).ready(function () { 
// SUBMIT FORM 
$("#weatherForm").submit( (event) => {
// Prevent the form from submitting via the browser. 
event.preventDefault(); 
ajaxPost();
});
function ajaxPost() { 
// PREPARE FORM DATA
var formData = {
 cityname: $("#cityname").val(),
}
// DO POST 
$.ajax({
type: "POST",
 contentType: "application/json",
url: window.location + "api/customers/save",
data: JSON.stringify(formData),
dataType: 'json',
success: (output)=> { 
$("#postResultDiv").html("<p>" +
"<br>" +
"" + JSON.stringify(`<code> ${output.addname} </code> Current Tempeature is <code>${output.temp}<sup>o</sup>C </code>`) + "</p>"); 
},
error: (e) => {
alert("Error!"); 
console.log("ERROR: ", e); 
}
}); 
// Reset FormData after Posting 
resetData(); 
} 
function resetData() {
$("#citytname").val(""); 
}
})

4. Make the HTML Response

It is also important to create an HTML template and feed it by data from OpenWeatherMap instead of using HTML mode directly from the API. Start by creating a new file forecast.js and make request weather forecasts for a place such as Ampton.

With forecast as the endpoint, and “Ampton” as the query, we can send results into the res.render () method instead of direct HTML writing. Ejs can aid in making representations more presentable. As in our case, we receive a response in JSON and send it through render ().

5. Run your Code

If you have followed the steps in this article to the letter, at this point, you’ll have your app ready to run. Type the code:

Node server.js 
// Example app listening on port 3000!

Then go to your browser and visit: localhost: 3000. Fill in the name of a city into the field section, and press the enter button. You will receive weather updates on your screen.

Yes, this is enough proof that you built a weather website that can make API calls and respond to clients’ queries in real-time from scratch.

Final Verdict

The primary takeaway from this write-up is that you need to know how to access each part of the returned JSON data from the API response and how well to utilize it. Although, it is not so much technical, at least you need to know the methodologies that will yield the best results. If have been planning to create a weather website, this article sets everything out for you to get started.