Real Time Clock Application Using JavaScript

HTML code is here:

<!DOCTYPE html>
<html lang="en">
    
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="Bootstrap/bootstrap.css">
        <title>Clock Website</title>
        <style>
            .container {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                margin: auto;
                width: 800px;
                height: 450px;
                background-color: rgba(0, 0, 0, 0.1);
                padding: 32px;
            }
        </style>
    </head>
    
<body>
    <!-- NAVBAR HERE -->
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Times Brand</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
    
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
<li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
</ul>
<form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" id="searchTxt" type="search" placeholder="Search"
                        aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
</div>
</nav>
    <!-- CLOCK SECTION HERE -->
    <div class="container my-5">
        <h1>
Current Time Is: <span id="time"></span></h1>
<br>
        <p>
We have got you covered.</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, vitae. Dolorem temporibus fugiat a, iure similique, blanditiis vel magni, ex voluptate veritatis perferendis dolorum quas sequi in omnis quos. Vero!</p>
<hr>
        <p>
We are here to show you time of different countries</p>
<button class="btn btn-primary">Browse Times</button>
    </div>
<script src="Bootstrap/jquery.js"></script>
    <script src="Bootstrap/bootstrap.js"></script>
    <script src="app.js"></script>
</body>
</html>

JavaScript Code is here:

let dateObj;
let time;
let date;
const options = {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric"
};

setInterval(() => {

    dateObj = new Date();
    time = dateObj.getHours() + ":" + dateObj.getMinutes() + ":" + dateObj.getSeconds();
    date = dateObj.toLocaleDateString(undefined, options);
    document.getElementById("time").innerHTML = time + " <br> On " + date;

}, 1000);

// You can improve this project

Important Note:

This project used Bootstrap for designing so if you use this project you have to include bootstrap CDN link or bootstrap files.

Demo:

https://mystifying-gates-eeee7a.netlify.app/

Search This Blog

Coding References of a Programmer

Clock Application Using HTML, CSS, JavaScript & Bootstrap - Project #02

Real Time Clock Application Using JavaScript

HTML code is here:

JavaScript Code is here:

Important Note:

Demo:

Comments

Post a Comment

Popular Posts

Environment Setup for Machine Learning in Python - ML #00

File CRUD Application - Python Project #07 - Project #29