Local Time Display Using JavaScript

In this project, we will build a simple web page that displays the current local time, updating every second. The project involves HTML for the structure, CSS for styling, and JavaScript for functionality. Let's break down each part of the code.

HTML and CSS Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="../styles.css" />
    <title>Your Local Time</title>
    <style>
      body {
        background-color: #212121;
        color: #fff;
      }
      .center {
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      #clock {
        font-size: 40px;
        background-color: orange;
        padding: 20px 50px;
        margin-top: 10px;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div class="center">
      <div id="banner"><span>Your local time</span></div>
      <div id="clock"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

JavaScript Code

const clock = document.getElementById('clock');

setInterval(function () {
  let date = new Date();
  clock.innerHTML = date.toLocaleTimeString();
}, 1000);

Explanation of JavaScript

Selecting the Clock Element: This line selects the div element with the id of clock and assigns it to the clock variable.
```
 const clock = document.getElementById('clock');
```
Creating the date Object and storing it:
```
   let date = new Date();
   clock.innerHTML = date.toLocaleTimeString();
```
Now, a new Date object is created and stored inside the variable date, and date.toLocaleTimeString() converts the date object to a string representing the time in the local time zone, and then the innerHTML of the clock element is used to represent time in that local time zone.

But time is updated only when we refresh the page, so it doesn't run continuously as we were expecting it to run, so we will use a method called 'setInterval()' which controls the events of javascript.

It takes 2 parameters, a function, and a time interval at which it will continuously run that function which is provided to 'setInterval()' method.

Updating the Clock Every Second:
- setInterval() is a JavaScript function that repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
- Inside setInterval(), a new Date object is created every second.
- date.toLocaleTimeString() converts the date object to a string representing the time in the local time zone.
- The innerHTML of the clock element is updated with the current local time every second.

Putting It All Together

When you load the HTML page in a browser, it will display a centered banner saying "Your local time" and a clock below it. The clock will show the current local time, updating every second.

This simple project demonstrates how to use JavaScript to dynamically update content on a web page, along with basic HTML and CSS to structure and style the page. Feel free to customize the styles and add more functionality as needed!

Creating a Local Time Display with JavaScript

Table of contents

HTML and CSS Code

JavaScript Code

Putting It All Together