23
How to Create a IP Finder Web Application With JS
Hey,
If you are new in JavaScrip it will be interesting for you. Here you can learn to use API on JS. It will be a very very easy project for you. First you have to learn what is an API. API stands for Application Programming Interface pretty messy right but it is a fun thing. In easy way API will send you some data you just have to show them in your Webpage you have to just learn how to fetch a API and how to show the data on your webpage. If you want to learn more about the API just click here and watch the video. It will explain you in a easy way. But again you don't have to learn the internal processing of an API.
First, We have to write some code for our HTML page. Here is a simple code which I used you can use this or write by your own :
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find Your IP</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-items">
<div class="main-text">
<h1>Here Is Your IP :</h1>
<h2 class="ip"></h2>
<h1>Your ISP is :</h1>
<h2 class="isp"></h2>
<h1>Your Location :</h1>
<h2 class="location"></h2>
</div>
</div>
<script src="main.js"></script>
</body>
</html>It will look so simple without any styles you probably know that HTML without CSS it almost like a man without cloths. So, let's put some cloths on our HTML webpage. HA! HA! HA!,
Here is my CSS style file but here again you can style your own webpage in your own way.
style.css
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@1,500&display=swap');
body {
font-family: 'Fira Sans', sans-serif;
background-image: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 119, 1) 24%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}
h1 {
color: rgb(42, 81, 209);
}
.main-text {
width: 25em;
background-color: aliceblue;
text-align: center;
border: 1em solid rgb(73, 167, 230);
border-radius: 2em;
}
.main-text h1 {
margin: .5em;
}
.main-items {
display: flex;
justify-content: center;
align-content: center;
margin-top: 7em;
}Now we will add some brain on our webpage which call JavaScript. First we will have to fetch the API if you don't know how to fetch a API watch the video he explained this clearly Click here . get your own API link from ipify . Then fetch the API in this way :
fetch('Your URL provided by ipify')
.then(response => response.json())
.then(data => changeTheDom(data));here fetch getting response from ipify API and .json making this as json . Then you data is sending on changeTheDom function.
Here the changeTheDom function code:
function changeTheDom(data) {
let IP = data.ip;
let dom1 = document.querySelector('.ip');
dom1.innerHTML = IP;
let ISP = data.isp;
let dom2 = document.querySelector('.isp');
dom2.innerHTML = ISP;
let dom3 = document.querySelector('.location');
dom3.innerHTML = data.location.city + ' , ' + data.location.region + ' , ' + data.location.country;
}in this piece of function we are changing the DOM we are getting the ip element by data.ip. We selected the ip class by querySelector and replacing its innerHTML value with IP.And in this way we changed other values also.
23