In this tutorial, we will be creating a dynamic world clock using HTML, CSS, and JavaScript. We will be using the JavaScript Date() object to get the current time and display it on our webpage. We will also be using CSS to style our clock and make it visually appealing.
This tutorial will walk you through the process of setting up the HTML and CSS structure, creating a JavaScript function to update the time, and implementing it all together to create a functional world clock. Whether you're a beginner or an experienced developer, this tutorial will provide you with the knowledge and skills you need to create your own dynamic world clock.
we will be using the JavaScript setInterval() function to automatically update the time every second, ensuring that our clock always displays the correct time. We will also be creating a dropdown menu to allow users to select different time zones and update the clock accordingly.
This will give your users the ability to easily check the time in different parts of the world without having to manually calculate the time difference. By the end of this tutorial, you will have a fully functional and dynamic world clock that can be easily customized to fit your needs.
Here is the entire code of World Clock.
<!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>World Clock</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="shortcut icon" href="image.jpg" type="image/x-icon">
</head>
<body style="background-image: url(./bg.jpg); color: rgb(188, 4, 4);">
<h1 class="text-center my-5 text-light">World Clock</h1>
<div class="container my-5">
<main>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">India</h4>
</div>
<div class="card-body">
<div>
<i class="far fa-clock fa-4x"></i>
</div>
<h2 class="card-title pricing-card-title my-4" id="india"></h2>
<button
type="button"
class="w-100 btn btn-lg btn-outline-danger"
>
Learn More
</button>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">USA</h4>
</div>
<div class="card-body">
<div>
<i class="far fa-clock fa-4x"></i>
</div>
<h2 class="card-title pricing-card-title my-4" id="usa"></h2>
<button type="button" class="w-100 btn btn-lg btn-outline-danger">
Learn More
</button>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div
class="card-header py-3"
>
<h4 class="my-0 fw-normal">China</h4>
</div>
<div class="card-body"><div>
<i class="far fa-clock fa-4x"></i>
</div>
<h2 class="card-title pricing-card-title my-4" id="china"></h2>
<button type="button" class="w-100 btn btn-lg btn-outline-danger">
Learn More
</button>
</div>
</div>
</div>
</div>
</main>
<main>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Rassia</h4>
</div>
<div class="card-body"><div>
<i class="far fa-clock fa-4x"></i>
</div>
<h2 class="card-title pricing-card-title my-4" id="rassia"></h2>
<button
type="button"
class="w-100 btn btn-lg btn-outline-danger"
>
Learn More
</button>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">London</h4>
</div>
<div class="card-body"><div>
<i class="far fa-clock fa-4x"></i>
</div>
<h2 class="card-title pricing-card-title my-4" id="london"></h2>
<button type="button" class="w-100 btn btn-lg btn-outline-danger">
Learn More
</button>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div
class="card-header py-3"
>
<h4 class="my-0 fw-normal">Japan</h4>
</div>
<div class="card-body"><div>
<i class="far fa-clock fa-4x"></i>
</div>
<h2 class="card-title pricing-card-title my-4" id="japan"></h2>
<button type="button" class="w-100 btn btn-lg btn-outline-danger">
Learn More
</button>
</div>
</div>
</div>
</div>
</main>
</div>
<footer>
<center class="mb-3 text-light">Codingfizz @ 2023-24</center>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<script src="script.js"></script>
</body>
</html>
JavaScript Code
const updatetime = () => {
let d = new Date();
usa.innerHTML = d
.toLocaleString("en-US", {
timeZone: "America/Los_Angeles",
})
.split(", ")[1];
india.innerHTML = d
.toLocaleString("en-US", {
timeZone: "Asia/Kolkata",
})
.split(", ")[1];
china.innerHTML = d
.toLocaleString("en-US", {
timeZone: "Asia/Shanghai",
})
.split(", ")[1];
rassia.innerHTML = d
.toLocaleString("en-US", {
timeZone: "Asia/Yekaterinburg",
})
.split(", ")[1];
london.innerHTML = d
.toLocaleString("en-US", {
timeZone: "Europe/London",
})
.split(", ")[1];
japan.innerHTML = d
.toLocaleString("en-US", {
timeZone: "Asia/Tokyo",
})
.split(", ")[1];
};
setInterval(updatetime, 1000)Output:
Overall, this tutorial has covered the process of creating a dynamic world clock using HTML, CSS and JavaScript. With the knowledge and skills you've gained, you can now create your own world clock and add it to your website or application.
Don't forget to share your creations in the comments below and feel free to reach out if you have any questions or need help troubleshooting. Happy coding!
1 Comments
great project :)
ReplyDelete