Skip to content

Commit bb072b3

Browse files
AsmrProg-YTAsmrProg-YT
committed
Adding Day #50
1 parent 95fe073 commit bb072b3

File tree

6 files changed

+233
-0
lines changed

6 files changed

+233
-0
lines changed

‎Day #50 - IP Tracker/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Day #50
2+
3+
### IP Address Tracker
4+
In this tutorial ([Open in Youtube](https://youtu.be/K6YVT7vCHXA)), I am gonna showing to you how to code a ip address tracker with javascript. you can track users on map with their ip address. in this code we used leaflet and ipify api. Also this project is fully responsive❗️
5+
6+
# Screenshot
7+
Here we have project screenshot :
8+
9+
![screenshot](screenshot.jpg)

‎Day #50 - IP Tracker/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Day #50 - IP Tracker | AsmrProg</title>
10+
</head>
11+
12+
<body>
13+
14+
<div class="container">
15+
<h1>IP Adress Tracker</h1>
16+
<form>
17+
<input type="text" id="search" placeholder="Search IP Address..." required autocomplete="off">
18+
<button type="submit">Search</button>
19+
</form>
20+
<div id="result">
21+
<div class="info responsive">
22+
<h4>IP Address</h4>
23+
<p id="ip-address"></p>
24+
</div>
25+
<div class="info">
26+
<h4>Location</h4>
27+
<p id="location"></p>
28+
</div>
29+
<div class="info">
30+
<h4>Time Zone</h4>
31+
<p id="time-zone"></p>
32+
</div>
33+
<div class="info">
34+
<h4>ISP</h4>
35+
<p id="isp"></p>
36+
</div>
37+
</div>
38+
<div id="map"></div>
39+
</div>
40+
41+
42+
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
43+
<script src="script.js"></script>
44+
</body>
45+
46+
</html>

‎Day #50 - IP Tracker/screenshot.jpg‎

275 KB
Loading

‎Day #50 - IP Tracker/script.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// Select DOM elements and assign them to variables
2+
const [ipInput, form, ipAddress, locationIP, timeZone, ISP] = ["#search", "form", "#ip-address", "#location", "#time-zone", "#isp"].map(selector => document.querySelector(selector));
3+
4+
// Initialize a Leaflet map with default settings
5+
const map = L.map('map').setView([0, 0], 13).addLayer(L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
6+
maxZoom: 20,
7+
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
8+
}));
9+
10+
// Function to fetch IP information from API
11+
const getIpInfo = async (ip) => {
12+
const response = await fetch(`https://ipapi.co/${ip}/json/`);
13+
if (!response.ok) throw new Error("Filed to fetch IP Information.");
14+
return response.json();
15+
};
16+
17+
// Function to render IP information on the page
18+
const renderIpInfo = (data) => {
19+
[ipAddress, locationIP, timeZone, ISP].forEach((el, index) => {
20+
el.textContent = index === 0 ? data.ip : index === 1 ? `${data.city}, ${data.region} ${data.postal}` : index === 2 ? `UTC${data.utc_offset}` : data.org;
21+
});
22+
const { latitude, longitude } = data;
23+
map.setView([latitude, longitude], 13).addLayer(L.marker([latitude, longitude]));
24+
};
25+
26+
// Function to show an error alert
27+
const showError = () => alert("Oops, Something went wrong. Please try again later!");
28+
29+
// Event listener for page load
30+
window.addEventListener('load', async () => {
31+
try {
32+
// Fetch the user's IP using ipify API
33+
const userInfo = await fetch('https://api.ipify.org?format=json');
34+
if (!userInfo.ok) throw new Error("Filed to fetch user's IP address.");
35+
const { ip } = await userInfo.json();
36+
37+
// Fetch and render IP information
38+
const ipInfoData = await getIpInfo(ip);
39+
renderIpInfo(ipInfoData);
40+
} catch {
41+
showError();
42+
}
43+
});
44+
45+
// Event listener for form submission
46+
form.addEventListener("submit", async (event) => {
47+
event.preventDefault();
48+
const ipValue = ipInput.value;
49+
try {
50+
// Fetch and render IP info based on user input
51+
const ipInfoData = await getIpInfo(ipValue);
52+
renderIpInfo(ipInfoData);
53+
} catch {
54+
showError();
55+
}
56+
});
57+
58+
// Event listener for Enter key press
59+
ipInput.addEventListener("keydown", (event) => {
60+
if (event.keyCode === 13) {
61+
event.preventDefault();
62+
form.dispatchEvent(new Event("submit"));
63+
}
64+
});

‎Day #50 - IP Tracker/style.css‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
font-family: 'Rubik', sans-serif;
7+
}
8+
9+
body{
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
background-color: #8bc6ec;
15+
background-image: linear-gradient(135deg, #8bc6ec 0%, #9599e2 100%);
16+
}
17+
18+
.container{
19+
width: 50%;
20+
height: 600px;
21+
background-color: #fff;
22+
padding: 30px;
23+
overflow: hidden;
24+
text-align: center;
25+
border-radius: 12px;
26+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
27+
}
28+
29+
h1{
30+
font-size: 28px;
31+
font-weight: 500;
32+
margin-bottom: 20px;
33+
}
34+
35+
form{
36+
display: flex;
37+
justify-content: center;
38+
}
39+
40+
input{
41+
padding: 8px;
42+
width: 50%;
43+
border: 1px solid #000;
44+
border-right: none;
45+
border-radius: 4px 0 0 4px;
46+
font-size: 15px;
47+
outline: none;
48+
}
49+
50+
button{
51+
background-color: #2196f3;
52+
color: #fff;
53+
border: 1px solid #000;
54+
border-left: none;
55+
border-radius: 0 4px 4px 0;
56+
padding: 8px 20px;
57+
font-size: 15px;
58+
cursor: pointer;
59+
transition: all 0.3s ease;
60+
}
61+
62+
button:hover{
63+
background-color: #1976d2;
64+
}
65+
66+
#result{
67+
margin-top: 20px;
68+
display: flex;
69+
justify-content: space-between;
70+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
71+
padding: 15px;
72+
border-radius: 10px;
73+
}
74+
75+
h4{
76+
font-size: 14px;
77+
margin-bottom: 5px;
78+
}
79+
80+
p{
81+
font-size: 13px;
82+
}
83+
84+
#map{
85+
height: 68%;
86+
margin-top: 15px;
87+
border-radius: 8px;
88+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
89+
}
90+
91+
@media screen and (width < 1100px) {
92+
93+
h1{
94+
font-size: 24px;
95+
}
96+
97+
.container{
98+
width: 80%;
99+
}
100+
101+
.responsive{
102+
display: none;
103+
}
104+
105+
#result{
106+
justify-content: space-around;
107+
}
108+
109+
input, button{
110+
font-size: 13px;
111+
}
112+
113+
}

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ Here we have list of projects:
5959
47. Text Encryptor
6060
48. Ai Image Generator
6161
49. Chess Game (VS Computer)
62+
50. IP Address Tracker
6263

6364
## Where is rest 53 Projects
6465

0 commit comments

Comments
 (0)