Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    Which One Do You Need?

    August 16, 2022

    Working with Liquidity Providers: Things to Know

    August 16, 2022

    How is Sensex Different from Nifty?

    August 16, 2022
    FunnyVot
    • Home
    • Fun Corner

      Turkish President builds f**k off palace to get Kevin McCloud’s attention

      August 16, 2022

      North Korea behind all One Star Reviews

      August 16, 2022

      ‘What I did on my holibobs’ by Boris Johnson

      August 16, 2022

      Government to cap train fares and golf club memberships

      August 16, 2022

      Cost of cremation deterring people from dying

      August 16, 2022
    • Best of Web

      Everything The FBI Seized During The Raid At Mar-A-Lago

      August 16, 2022

      Everything You Need To Know About ‘Game Of Thrones: House Of Targaryen’

      August 15, 2022

      The Onion’s Most Consequential Cat Journalism

      August 9, 2022

      Biggest Revelations From Josh Hawley’s New Book ‘Manhood’

      August 3, 2022

      Parents Explain Why They Are Not Vaccinating Their Children Against Covid-19

      August 2, 2022
    • Laugh Time

      Which One Do You Need?

      August 16, 2022

      Working with Liquidity Providers: Things to Know

      August 16, 2022

      How is Sensex Different from Nifty?

      August 16, 2022

      Try These 2 Grey Lenses to Mesmerize People with your Eyes

      August 16, 2022

      How Does an Order Matching Engine Work in Crypto?

      August 16, 2022
    • Parody News

      25 Times People Had A Horrible Time During This Year’s Thanksgiving

      November 29, 2021

      Grab This Free LibreOffice Impress Cheat Sheet

      August 7, 2021

      How to View Your Steam Purchase History

      August 7, 2021

      5 Ways to Fix the “System Restore Is Disabled by Your System Administrator” Error on Windows

      August 7, 2021

      What Is the Difference Between Aspect Ratio and Resolution?

      August 7, 2021
    • Fashion & Lifestyle

      WooCommerce Review (2022): Do the 9 Pros Outweigh the Cons?

      June 20, 2022

      10 Best Tools to Sell Digital Goods Online in 2022

      April 27, 2022

      6 Top Payment Gateways for eCommerce Compared (2022)

      April 27, 2022

      Shopify Review: Is It the Right eCommerce Platform for You? (Read This First)

      April 27, 2022

      8 Best Helpdesk Software for eCommerce Stores & Small Businesses in 2022

      April 4, 2022
    FunnyVot
    Home » How to Create a Digital Clock Using HTML, CSS, and JavaScript
    Parody News

    How to Create a Digital Clock Using HTML, CSS, and JavaScript

    1278-funnyvotBy 1278-funnyvotJune 27, 2021No Comments6 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte Email
    Share
    Facebook Twitter LinkedIn Pinterest Email


    The Digital Clock is among the best beginner projects in JavaScript. It’s quite easy to learn for people of any skill level.

    In this article, you’ll learn how to build a digital clock of your own using HTML, CSS, and JavaScript. You’ll get hands-on experience with various JavaScript concepts like creating variables, using functions, working with dates, accessing and adding properties to DOM, and more.

    Let’s get started.

    Components of the Digital Clock

    The digital clock has four parts: hour, minute, second, and meridiem.

    Components of the digital clock

    Folder Structure of the Digital Clock Project

    Create a root folder that contains the HTML, CSS, and JavaScript files. You can name the files anything you want. Here the root folder is named Digital-Clock. According to the standard naming convention, the HTML, CSS, and JavaScript files are named index.html, styles.css, and script.js respectively.

    Digital Clock Folder Structure

    Adding Structure to the Digital Clock Using HTML

    Open the index.html file and paste the following code:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset = "utf-8">
    <title> Digital Clock Using JavaScript </title>
    <link rel = "stylesheet" href = "https://www.makeuseof.com/create-a-digital-clock-html-css-javascript/styles.css">
    </head>
    <body>
    <div id = "digital-clock"> </div>
    <script src = "https://www.makeuseof.com/create-a-digital-clock-html-css-javascript/script.js"> </script>
    </body>
    </html>

    Here, a div is created with an id of digital-clock. This div is used to display the digital clock using JavaScript. styles.css is an external CSS page and is linked to the HTML page using a <link> tag. Similarly, script.js is an external JS page and is linked to the HTML page using the <script> tag.

    Adding Functionality to the Digital Clock Using JavaScript

    Open the script.js file and paste the following code:

    function Time() {
    // Creating object of the Date class
    var date = new Date();
    // Get current hour
    var hour = date.getHours();
    // Get current minute
    var minute = date.getMinutes();
    // Get current second
    var second = date.getSeconds();
    // Variable to store AM / PM
    var period = "";
    // Assigning AM / PM according to the current hour
    if (hour >= 12) {
    period = "PM";
    } else {
    period = "AM";
    }
    // Converting the hour in 12-hour format
    if (hour == 0) {
    hour = 12;
    } else {
    if (hour > 12) {
    hour = hour - 12;
    }
    }
    // Updating hour, minute, and second
    // if they are less than 10
    hour = update(hour);
    minute = update(minute);
    second = update(second);
    // Adding time elements to the div
    document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " + period;
    // Set Timer to 1 sec (1000 ms)
    setTimeout(Time, 1000);
    }
    // Function to update time elements if they are less than 10
    // Append 0 before time elements if they are less than 10
    function update(t) {
    if (t < 10) {
    return "0" + t;
    }
    else {
    return t;
    }
    }
    Time();

    Understanding the JavaScript Code

    The Time() and update() functions are used to add functionality to the Digital Clock.

    Getting the Current Time Elements

    To get the current date and time, you need to create a Date object. This is the syntax for creating a Date object in JavaScript:

    var date = new Date();

    The current date and time will be stored in the date variable. Now you need to extract the current hour, minute, and second from the date object.

    date.getHours(), date.getMinutes(), and date.getSeconds() are used to get the current hour, minute, and second respectively from the date object. All of the time elements are stored in separate variables for further operations.

    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();

    Assigning the Current Meridiem (AM/PM)

    Since the Digital Clock is in a 12-hour format, you need to assign the appropriate meridiem according to the current hour. If the current hour is greater than or equal to 12, then the meridiem is PM (Post Meridiem) otherwise, it’s AM (Ante Meridiem).

    var period = "";
    if (hour >= 12) {
    period = "PM";
    } else {
    period = "AM";
    }

    Converting the Current Hour in 12-Hour Format

    Now you need to convert the current hour into a 12-hour format. If the current hour is 0, then the current hour is updated to 12 (according to the 12-hour format). Also, if the current hour is greater than 12, it’s reduced by 12 to keep it aligned with the 12-hour time format.

    Related: How to Disable Text Selection, Cut, Copy, Paste, and Right-Click on a Web Page

    if (hour == 0) {
    hour = 12;
    } else {
    if (hour > 12) {
    hour = hour - 12;
    }
    }

    Updating the Time Elements

    You need to update the time elements if they’re less than 10 (Single-Digit). 0 is appended to all the single-digit time elements (hour, minute, second).

    hour = update(hour);
    minute = update(minute);
    second = update(second);
    function update(t) {
    if (t < 10) {
    return "0" + t;
    }
    else {
    return t;
    }
    }

    Adding the Time Elements to the DOM

    First, the DOM is accessed using the target div’s id (digital-clock). Then the time elements are assigned to the div using the innerText setter.

    document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " + period;

    Updating the Clock Every Second

    The clock is updated every second using the setTimeout() method in JavaScript.

    setTimeout(Time, 1000);

    Styling the Digital Clock Using CSS

    Open the styles.css file and paste the following code:

    Related: How to Use CSS box-shadow: Tricks and Examples

    /* Importing Open Sans Condensed Google font */
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');

    #digital-clock {
    background-color: #66ffff;
    width: 35%;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 64px;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    The above CSS is used to style the Digital Clock. Here, the Open Sans Condensed font is used to display the text of the clock. It’s imported from Google fonts using @import. The #digital-clock id selector is used to select the target div. The id selector uses the id attribute of an HTML element to select a specific element.

    Related: Simple CSS Code Examples You Can Learn in 10 Minutes

    If you want to have a look at the complete source code used in this article, here’s the GitHub repository. Also, if you want to take a look at the live version of this project, you can check it out through GitHub Pages.

    Note: The code used in this article is MIT licensed.

    Develop Other JavaScript Projects

    If you’re a beginner at JavaScript and want to be a good web developer, you need to build some good JavaScript-based projects.  They can add value to your resume as well as your career.

    You can try out some projects like Calculator, a Hangman game, Tic Tac Toe, a JavaScript weather app, an interactive landing page, a Weight Conversion Tool, Rock Paper Scissors, etc.

    If you’re looking for your next JavaScript-based project, a simple calculator is an excellent choice.


    man holding calculator
    How to Build a Simple Calculator Using HTML, CSS, and JavaScript

    Simple, calculated code is the way to go when programming. Check out how to build your own calculator in HTML, CSS, and JS.

    Read Next


    About The Author

    Yuvraj Chandra
    (28 Articles Published)

    Yuvraj is a Computer Science undergraduate student at the University of Delhi, India. He’s passionate about Full Stack Web Development. When he’s not writing, he’s exploring the depth of different technologies.

    More
    From Yuvraj Chandra

    Subscribe To Our Newsletter

    Join our newsletter for tech tips, reviews, free ebooks, and exclusive deals!

    One More Step…!

    Please confirm your email address in the email we just sent you.

    .





    Source link

    Related

    Share. Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp Email
    Previous ArticleHow to Opt Out of Amazon Sidewalk
    Next Article What Can You Do With Linux on a Chromebook?
    1278-funnyvot
    • Website

    Related Posts

    25 Times People Had A Horrible Time During This Year’s Thanksgiving

    November 29, 2021

    Grab This Free LibreOffice Impress Cheat Sheet

    August 7, 2021

    How to View Your Steam Purchase History

    August 7, 2021

    5 Ways to Fix the “System Restore Is Disabled by Your System Administrator” Error on Windows

    August 7, 2021

    Leave A Reply Cancel Reply

    Recent Posts
    • Which One Do You Need?
    • Working with Liquidity Providers: Things to Know
    • How is Sensex Different from Nifty?
    • Try These 2 Grey Lenses to Mesmerize People with your Eyes
    • How Does an Order Matching Engine Work in Crypto?
    Recent Comments
    • Lizette Spenser on Here Is How I Increased My Income in 30 Days Or Less
    • Nicole on Here Is How I Increased My Income in 30 Days Or Less
    • Rebekah on Here Is How I Increased My Income in 30 Days Or Less
    • Michelle on Here Is How I Increased My Income in 30 Days Or Less
    • SEO on Hobo Dinner Foil Packets Recipe—How Long Does it Take to Cook a Hobo Dinner
    Archives
    • August 2022
    • July 2022
    • June 2022
    • May 2022
    • April 2022
    • March 2022
    • February 2022
    • January 2022
    • December 2021
    • November 2021
    • October 2021
    • September 2021
    • August 2021
    • July 2021
    • June 2021
    • April 2021
    • January 2021
    • December 2020
    Categories
    • Animals
    • Best of Web
    • Fashion & Lifestyle
    • Fun Corner
    • Laugh Time
    • Most Featured
    • Parody News
    • Sketch
    • Uncategorized
    Meta
    • Log in
    • Entries feed
    • Comments feed
    • WordPress.org
    Don't Miss

    Which One Do You Need?

    Working with Liquidity Providers: Things to Know

    How is Sensex Different from Nifty?

    Try These 2 Grey Lenses to Mesmerize People with your Eyes

    Demo
    Our Picks

    Remember! Bad Habits That Make a Big Impact on Your Lifestyle

    January 13, 2021

    The Right Morning Routine Can Keep You Energized & Happy

    January 13, 2021

    How to Make Perfume Last Longer Than Before

    January 13, 2021

    Stay off Social Media and Still Keep an Online Social Life

    January 13, 2021
    Don't Miss
    Laugh Time

    Which One Do You Need?

    By 1278-funnyvotAugust 16, 20220

    When you are in the final leg of a real estate transaction to buy a…

    Working with Liquidity Providers: Things to Know

    August 16, 2022

    How is Sensex Different from Nifty?

    August 16, 2022

    Try These 2 Grey Lenses to Mesmerize People with your Eyes

    August 16, 2022

    Subscribe to Updates

    Get the latest creative news from SmartMag about art & design.

    About Us
    About Us

    FunnyVot is your best source for FUN! We deliver the most popular memes, breaking stories, awesome GIFs, and viral videos on the internet!

    Our Sites:
    NewVot.com
    CryptoVot.com
    Gamesvot.com
    Healthvot.com

    Email Us: contact@funnyvot.com

    Our Picks

    Remember! Bad Habits That Make a Big Impact on Your Lifestyle

    January 13, 2021

    The Right Morning Routine Can Keep You Energized & Happy

    January 13, 2021

    How to Make Perfume Last Longer Than Before

    January 13, 2021

    Stay off Social Media and Still Keep an Online Social Life

    January 13, 2021
    • GDPR DPA
    • Privacy Policy
    • Do not sell my personal information
    • Opt out / Unsubscribe
    © 2022 ALL RIGHTS RESERVED FUNNYVOT.

    Type above and press Enter to search. Press Esc to cancel.