technilesh.com

Project : The Digital Clock Using the JavaScript ,CSS and html .Beginners Project on JavaScript by Using the boot Strap - Technilesh

Digital Clock Using the JavaScript ,CSS  and html - Technilesh.com

Hello Guys , Welcome to other post of my blog ,In this post we will discuss about the JavaScript ,CSS ,Html project and how to make your first project using the JavaScript :


After You Completing This Course , You will Get full Idea of JavaScript , Which used as both Frontend and Back End programming and also used on server side with NODE JS.SO lets start


HTML -( Hyper Text Markup Language ) "Used for making structure of site .very important                                                                                     component"
CSS - " Used For adding the some Beauties' in Structure "

JavaScript - " Used for Providing the Feature to the Site and also used in Beauties' to make site                                             more attractive"


1)Creating the Nav Bar:

WE will used the Bootstrap , it very best Method ,to do web development . It reduces the time and also help in customization .below is code template that I always used while web development . You can used other also .The all Details are present on Bootstrap .
       
 <footer>
        <div class="row">
            <div class="col-md-6">
                <p>Copyright &copy; 2019 Tutorial Republic</p>
            </div>
            <div class="col-md-6 text-md-right">
                <a href="#" class="text-dark">Terms of Use</a> 
                <span class="text-muted mx-2">|</span> 
                <a href="#" class="text-dark">Privacy Policy</a>
            </div>a<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Technilesh Nav Bar Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
    <div class="container-fluid">
        <a href="#" class="navbar-brand mr-3">Technilesh Project</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Technilesh</a>
                <a href="#" class="nav-item nav-link">Technilesh</a>
                <a href="#" class="nav-item nav-link">Technilesh</a>
            </div>
            <div class="navbar-nav ml-auto">
                <a href="#" class="nav-item nav-link">Technilesh</a>
                <a href="#" class="nav-item nav-link">Login</a>
            </div>
        </div>
    </div>    
</nav> <footer>
        <div class="row">
            <div class="col-md-6">
                <p>Copyright &copy; 2021 Technilesh</p>
            </div>
            <div class="col-md-6 text-md-right">
                <a href="#" class="text-dark">Terms of Use</a> 
                <span class="text-muted mx-2">|</span> 
                <a href="#" class="text-dark">Privacy Policy</a>
            </div>
        </div>
    </footer>
</div>
</body>
</html>
        </div>
    </footer>
</div>
</body>
</html>



Also Add the Html and CSS for to Clock To show Output : below is code
This Contain container which is used to create the one container for inside elements .

<div class="container"> <div class="jumbotron"> <h1 class="display-4">Current Time is : <span id="time2">:</span></h1> <p class="lead"></p> <hr class="my-4"> <p>We are here you to show you the time of diffrent country</p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div> </div>

2) Adding JS

This is Script which works on server side ,which request to the server to get the time , date and other thing . WE create on Variable Array which container different parameter ,The we cerate the date Object which is used to access the data on server. then we create two variable which store the data of time , date , second and other stuff. using Document.GetelementedById method used to locate the are where we want to place the data which we stored in the date and time variable. Also add the the sleep or delay to change time , time to time.


<script> setInterval(() => { const option = {weekday:'long',year:'numeric',month:'long',day:'numeric'}; a = new Date; let date=a.toLocaleDateString(undefined,option); let time=a.getHours()+":"+a.getMinutes()+":"+a.getSeconds() document.getElementById('time2').innerHTML = time +" On date "+date; }, 1000); </script>

Full Code :

If you don't get just copy and paste and then analyze this code 


<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Time with Technilesh</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> <div class="container"> <div class="jumbotron"> <h1 class="display-4">Current Time is : <span id="time2">:</span></h1> <p class="lead"></p> <hr class="my-4"> <p>We are here you to show you the time of diffrent country</p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div> </div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script> --> </body> <script> setInterval(() => { const option = {weekday:'long',year:'numeric',month:'long',day:'numeric'}; a = new Date; let date=a.toLocaleDateString(undefined,option); let time=a.getHours()+":"+a.getMinutes()+":"+a.getSeconds() document.getElementById('time2').innerHTML = time +" On date "+date; }, 1000); </script> </html>

Outputs & Video:

1) Mobile View:


2) Desktop View




Amazon Offering Full time for SDE and Creative Asset Library: Apply Now Google Swags 2022 | Google Winter Swags : Apply Now