Integrate API in your Website
What Is HTML?
HTML, which stands for Hypertext Markup Language, is a pretty simple language. It consists of different elements which we use to structure a web page.
https://www.freecodecamp.org/news/html-basics-for-beginners/
What is CSS?
Like HTML, CSS is not a programming language. It’s not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements. For example, this CSS selects paragraph text, setting the color to red:
https://www.freecodecamp.org/news/best-css-and-css3-tutorial/
What is JavaScript?
JavaScript is a programming language that adds interactivity to your website. This happens in games, in the behavior of responses when buttons are pressed or with data entry on forms; with dynamic styling; with animation, etc.
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
https://javascript.info/first-steps
What is API and how does it look
API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message, or check the weather on your phone, you’re using an API.
Postman
- Making a new collection
- Adding requests
- What is a GET request
- A GET request gets the information from the server. When you make the GET request on the server, then the server responds to the request.
Fetching data of the API in 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 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
Index.html
<!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 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">
<fieldset class="d-flex justify-content-center">
<input class="form-control w-25" placeholder="Enter City Name" type="text" name="cityName"
id="cityName">
<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>
</body></html>Output
The above block of Html code will give us a output like this.
Output:
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 in our code.
Output:
