Digital Clock using HTML, CSS, and Javascript

Submitted by keerio on Saturday, May 4, 2024 - 10:00.

Language

Below, you'll find the full source code for a basic Digital Clock created using HTML, CSS, and JavaScript. This project serves as a helpful resource for students or beginners in JavaScript, offering insights and techniques for building and enhancing web applications, particularly in DOM manipulation and retrieving current Date and Time.

The digital clock script presented here generates a single-page display in the browser with an appealing user interface. Positioned at the center of the page or screen, the clock showcases time in a 12-hour format.

The digital clock will appear as follows:

Digital Clock using HTML, CSS, and JavaScript

Below are the scripts needed to build the Digital Clock Web Application:

CSS

To begin, in your source code file directory, create a new CSS (Cascading Stylesheet) file named style.css. This file houses the script for the user-interface designs, including element sizing, backgrounds, and more.

  1.     /* RESET CSS */
  2.     * {
  3.       margin: 0;
  4.       padding: 0%;
  5.     }
  6.  
  7.     /* CSS VARIABLES */
  8.     :root {
  9.       --bg-color: #191830;
  10.       --card1-color: #facf29;
  11.       --card2-color: #02ccfc;
  12.       --card3-color: #ff3124;
  13.       --card4-color: #0a2dbb;
  14.       --seconds-color: #f9d426;
  15.     }
  16.  
  17.     body {
  18.       background-color: var(--bg-color);
  19.     }
  20.  
  21.     .container {
  22.       width: 100%;
  23.       height: 100vh;
  24.       display: flex;
  25.       justify-content: center;
  26.       align-items: center;
  27.     }
  28.  
  29.     .card1 {
  30.       background: linear-gradient(180deg, #facf29, #ff3124);
  31.       width: 250px;
  32.       height: 250px;
  33.       transform: translateY(130px);
  34.       border-radius: 400px;
  35.       margin-right: 140px;
  36.       animation-name: top-down1;
  37.       animation-duration: 4s;
  38.       animation-iteration-count: infinite;
  39.       animation-direction: alternate;
  40.     }
  41.  
  42.     @keyframes top-down1 {
  43.       0% {
  44.         transform: translateY(130px);
  45.       }
  46.       100% {
  47.         transform: translateY(160px);
  48.       }
  49.     }
  50.  
  51.     .card2 {
  52.       background: linear-gradient(180deg, #02ccfc, #0a2dbb);
  53.       width: 300px;
  54.       border-radius: 400px;
  55.       height: 300px;
  56.       margin-bottom: 270px;
  57.       margin-left: 140px;
  58.       animation-name: top-down2;
  59.       animation-duration: 4s;
  60.       animation-iteration-count: infinite;
  61.       animation-direction: alternate;
  62.     }
  63.  
  64.     @keyframes top-down2 {
  65.       0% {
  66.         transform: translateY(0px);
  67.       }
  68.       100% {
  69.         transform: translateY(60px);
  70.       }
  71.     }
  72.  
  73.     .glass-card {
  74.       min-width: 10px;
  75.       min-height: 10px;
  76.       max-width: 750px;
  77.       transition: 1s ease-in-out;
  78.       max-height: 290px;
  79.       width: 100%;
  80.       height: 100%;
  81.       box-shadow: rgba(0, 0, 0, 0.059) 0px 10px 15px -3px,
  82.         rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  83.       background-color: rgba(255, 255, 255, 0.06);
  84.       position: absolute;
  85.       border-radius: 30px;
  86.       display: flex;
  87.       justify-content: space-around;
  88.       align-items: center;
  89.       backdrop-filter: blur(30px);
  90.       animation-name: fade-up;
  91.       animation-duration: 0.5s;
  92.     }
  93.  
  94.     .hour-card {
  95.       backdrop-filter: blur(70px);
  96.       display: flex;
  97.       justify-content: center;
  98.       align-items: center;
  99.       width: 170px;
  100.       height: 170px;
  101.  
  102.       border-radius: 10px;
  103.       box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
  104.         rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
  105.         rgba(0, 0, 0, 0.07) 0px 16px 16px;
  106.     }
  107.  
  108.     .clock-hour {
  109.       font-family: Arial, Helvetica, sans-serif;
  110.       font-weight: bold;
  111.       color: white;
  112.       font-size: 120px;
  113.     }
  114.  
  115.     .minute-card {
  116.       backdrop-filter: blur(70px);
  117.       display: flex;
  118.       justify-content: center;
  119.       align-items: center;
  120.       width: 170px;
  121.       height: 170px;
  122.       border-radius: 10px;
  123.       box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
  124.         rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
  125.         rgba(0, 0, 0, 0.07) 0px 16px 16px;
  126.     }
  127.  
  128.     .clock-minute {
  129.       font-family: Arial, Helvetica, sans-serif;
  130.       font-weight: bold;
  131.       color: white;
  132.       font-size: 120px;
  133.     }
  134.  
  135.     .second-card {
  136.       backdrop-filter: blur(70px);
  137.       display: flex;
  138.       justify-content: center;
  139.       align-items: center;
  140.       width: 170px;
  141.       height: 170px;
  142.       border-radius: 10px;
  143.       box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
  144.         rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
  145.         rgba(0, 0, 0, 0.07) 0px 16px 16px;
  146.     }
  147.  
  148.     .clock-second {
  149.       font-family: Arial, Helvetica, sans-serif;
  150.       font-weight: bold;
  151.       color: var(--seconds-color);
  152.       font-size: 120px;
  153.     }
  154.  
  155.     .colons {
  156.       display: flex;
  157.       justify-content: space-evenly;
  158.       position: absolute;
  159.       width: 750px;
  160.     }
  161.  
  162.     .colon1 {
  163.       margin-right: -11px;
  164.     }
  165.  
  166.     .colon2 {
  167.       margin-right: 127px;
  168.     }
  169.  
  170.     .colon {
  171.       font-size: 90px;
  172.       color: white;
  173.     }
  174.  
  175.     .am-pm-txt {
  176.       margin: 20px;
  177.       color: var(--seconds-color);
  178.       font-family: Arial, Helvetica, sans-serif;
  179.       font-weight: bold;
  180.       font-size: 30px;
  181.     }
  182.  
  183.     .am-pm {
  184.       backdrop-filter: blur(70px);
  185.       display: flex;
  186.       justify-content: center;
  187.       align-items: center;
  188.       width: 88px;
  189.       height: 80px;
  190.       border-radius: 10px;
  191.       box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
  192.         rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
  193.         rgba(0, 0, 0, 0.07) 0px 16px 16px;
  194.     }
  195.     /* RESPONSIVE */
  196.     @media only screen and (max-width: 850px) {
  197.       .colon {
  198.         display: none;
  199.       }
  200.       .card1 {
  201.         width: 200px;
  202.         margin-right: 10px;
  203.         height: 200px;
  204.       }
  205.       .card2 {
  206.         width: 200px;
  207.         margin-left: 10px;
  208.         height: 200px;
  209.       }
  210.       .glass-card {
  211.         max-height: 550px;
  212.         max-width: 200px;
  213.         justify-content: space-evenly;
  214.         flex-direction: column;
  215.       }
  216.       .hour-card {
  217.         width: 130px;
  218.         height: 130px;
  219.       }
  220.       .clock-hour {
  221.         font-size: 80px;
  222.       }
  223.       .minute-card {
  224.         width: 130px;
  225.         height: 130px;
  226.       }
  227.       .clock-minute {
  228.         font-size: 80px;
  229.       }
  230.       .second-card {
  231.         width: 130px;
  232.         height: 130px;
  233.       }
  234.       .clock-second {
  235.         font-size: 80px;
  236.       }
  237.     }
  238.  

HTML

Next, create a new HTML file and save it as index.html. This file includes various elements for the Page UI.

  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8" />
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9.     <script src="https://kit.fontawesome.com/4f6c794eb6.js" crossorigin="anonymous"></script>
  10.     <link rel="stylesheet" href="style.css" />
  11.     <link rel="icon"
  12.         href="https://images-platform.99static.com//0ZStLQvlGJmlJVOhWzw4-QFumJ4=/378x2270:1015x2908/fit-in/500x500/99designs-contests-attachments/124/124379/attachment_124379801" />
  13.     <title>JS Clock</title>
  14. </head>
  15.  
  16. <body>
  17.     <div class="container">
  18.         <div class="card1"></div>
  19.         <div class="card2"></div>
  20.         <div class="glass-card">
  21.             <div class="colons">
  22.                 <div class="colon1 colon">:</div>
  23.                 <div class="colon2 colon">:</div>
  24.             </div>
  25.             <div class="hour-card">
  26.                 <p class="clock-hour" id="hours"></p>
  27.             </div>
  28.             <div class="minute-card">
  29.                 <p class="clock-minute" id="minutes"></p>
  30.             </div>
  31.             <div class="second-card">
  32.                 <p class="clock-second" id="seconds"></p>
  33.             </div>
  34.             <div class="am-pm">
  35.                 <p class="am-pm-txt" id="AMPM"></p>
  36.             </div>
  37.         </div>
  38.     </div>
  39.     <script src="script.js"></script>
  40. </body>
  41.  
  42. </html>

JavaScript

Lastly, create a new JS file and save it as script.js. This file contains the JavaScript codes responsible for retrieving the current time and updating the HTML content.

  1. let hours = document.getElementById("hours");
  2. let minutes = document.getElementById("minutes");
  3. let seconds = document.getElementById("seconds");
  4. let AMPM = document.getElementById("AMPM");
  5.  
  6. setInterval(()=> {
  7.     let clock = new Date();
  8.     let hrs = clock.getHours();
  9.     let min = clock.getMinutes();
  10.     let sec = clock.getSeconds();
  11.  
  12.     if(hrs > 12){
  13.     hrs = hrs - 12;
  14.     }
  15.     if (hrs < 10) {
  16.         hrs = "0" + hrs;
  17.     }
  18.     if (min < 10) {
  19.         min = "0" + min;
  20.     }
  21.     if (sec < 10) {
  22.         sec = "0" + sec;
  23.     }
  24.     if (hrs == 0) {
  25.         hrs = 12;
  26.     }
  27.     if (hrs < 12) {
  28.         AMPM.innerHTML = "PM";
  29.     } else {
  30.         AMPM.innerHTML = "AM";
  31.     }
  32.     hours.innerHTML = hrs;
  33.     minutes.innerHTML = min;
  34.     seconds.innerHTML = sec;
  35.  
  36. })

And there you have it! You can view the result of the source code by opening the index.html file in your preferred web browser. Additionally, the complete source code zip file is available for free download on this website. Simply click the "Download" button below this article.

Explore more on this website for additional Free Source Codes, Tutorials, and Articles covering various programming languages.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags

Add new comment

About text formats
  • 209 views