Open your VSCode Editor or any code editor that you prefer.

Add an HTML file -- The so-called "index.html"

Add a card using Bootstrap or you can code using div element and CSS

We will be using Rapid API for fetching the information on weather. We will be using Ninja API which is a free API available in Rapid API platform.

Wherever we will be displaying the elements of API, add the id and span tag for that. An example is given below.

<li>Temperature is <span id="temp"></span></li> Here, you can see that to see the temp we will be using the id "temp"

Then we will be using the Fetch code from the API which is already provided by Ninja API

const options = {

method: 'GET', headers: { 'X-RapidAPI-Key': 'SIGN-UP-FOR-KEY', 'X-RapidAPI-Host': 'weather-by-api-ninjas.p.rapidapi.com' }

};

fetch('https://weather-by-api-ninjas.p.rapidapi.com/v1/weather?city=Seattle', options)

.then(response => response.json())

.then(response => console.log(response))

.catch(err => console.error(err));

.then(response => console.log(response)) inside this block, add the tag using innerHTML

.then(response => { console.log(response) temp.innerHTML = response.temp })

Voila, You have created your website for weather application.

Now as we can see that only Seattle is in the query. So in order to change the city we can directly change the HTTPS address by changing the query, eg:city=Delhi or we can twerk around. We can use the navbar provided by Bootstrap, and add a tag named "city" inside the input tag. Then change the above.

Here is the link to the Github for the project repo: https://github.com/srummanf/Weather-App