Integrate Weather API into your website:
I’m a Computer Science student, currently in the 3rd year of my Bachelor’s degree. I’ve been a huge tech savvy since my high school days. Used to read about all different types of emerging tech trough the times. Now, pursuing my studies in the same field gives immense happiness to me. ✨
I’m learning Web Development (HTML, CSS, JS, React, Node) and various other tools to complement this skill. Moreover, practicing Data Structures & Algorithms on a regular basis to improve my problem solving skills. 💻
Technical Blogging is something I’m loving lately, I get to share things I’m learning which not only helps me but many others who read those blogs. I believe everyone should do this practice as a developer or in any other domain. ✍🏻
Fetching data of the API in the website’s UI
To fetch an API in a static website, one has to use javascript to fetch the data from an API and show it in the website as UI.
Getting the API
Make an account with WeatherAPI and get your personal API key
We will be using this API key in our API URL.
Once we have our API, now let’s write the code for our Website.
Making the UI of the website
HTML:
Index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Title of the Website -->
<title>Weather API</title>
<!-- Using Bootstrap framework for css -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<!-- Fontawesome to get icons -->
<script
src="https://kit.fontawesome.com/d676f25411.js"
crossorigin="anonymous"
></script>
</head>
<body>
<body style="background-color: black">
<div class="text-center my-5">
<h1 style="color: white">
<legend>Check your City's Weather</legend>
</h1>
<!-- form -->
<form class="form-group text-center mt-4">
<!-- field -->
<fieldset class="d-flex justify-content-center">
<input
class="form-control w-25"
placeholder="Enter City Name"
type="text"
name="cityName"
id="cityName"
/>
<!-- search button -->
<button class="btn btn-dark" type="button" id="getApi">
<i class="fas fa-search"></i>
</button>
</fieldset>
</form>
</div>
<div class="container text-center px-5">
<div class="d-flex justify-content-center" id="output"></div>
</div>
<!-- Calling the javascript file -->
<script src="index.js"></script>
<!-- Done calling js file -->
</body>
</body>
</html>
Output:
The above block of Html code will give us an output like this.
JavaScript:
Now let’s add the functionality with Javascript
Index.js
document.getElementById('getApi').addEventListener('click', getApi);const apiId= 'e2d2fe2c76f848a2b1570500222607';function getApi() {
var CityName = document.getElementById('cityName').value;console.log(CityName)const url = `http://api.weatherapi.com/v1/current.json?key=${apiId}&q=${CityName}&aqi=yes`;console.log(url);fetch(url)
.then((res) => res.json())
.then((data) => {
let output = `
<div>
<div style="color:black; width:10rem; background-color:white; border-radius: 10px;" class="p-3">
<p class="m-0" style="font-width:bold; font-size:2rem;">${data.location.name}</p>
<p class="m-0" style="font-width:bold; font-size:4rem;"> ${data.current.temp_c}<sup>°C</sup></p>
</div>
</div>
`;
console.log('printing data', data);
document.getElementById('output').innerHTML = output;
}).catch((err) => console.log(err))
}
This block of code will add functionality to our code.
Output:
