Your Blog Post
<!DOCTYPE html>
<html lang="en">
<head>
<title>Your Page Title</title>
<style>
/* body {
font-family: Arial, sans-serif;
justify-content: center;
align-items: center;
margin: 0;
background-color: #f4f4f4;
}
#ip-address-container {
text-align: center;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#ip-address {
font-size: 24px;
margin-bottom: 10px;
}
#ip-details {
font-size: 16px;
} */
</style>
</head>
<body>
<div id="ip-address-container">
<h1>IP Address and Location</h1>
<div id="ip-address"></div>
<div id="ip-details"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const ipAddressElement = document.getElementById('ip-address');
const ipDetailsElement = document.getElementById('ip-details');
fetch('https://ipinfo.io/json')
.then(response => response.json())
.then(data => {
const ipAddress = data.ip;
const ipDetails = `
City: ${data.city}
Region: ${data.region}
Country: ${data.country}
Location: ${data.loc}
ISP: ${data.org}
`;
ipAddressElement.innerHTML = `Your IP Address: ${ipAddress}`;
ipDetailsElement.innerHTML = ipDetails;
})
.catch(error => console.error('Error fetching IP information:', error));
});
</script>
</body>
</html>
