How to Design Digital Clock using JavaScript ?

Clocks are useful elements for any UI if used in a proper way. Clocks can be used on sites where time is the main concern like some booking sites or some app showing arriving times of trains, buses, flights, etc. The clock is basically of two types, Analog and Digital. We will be looking at making a digital one.

Prerequisites

Approach

Create the webpage structure in HTML using a div tag containing dummy time of time format “HH:MM:SS”.
Style the page with CSS using elements and classes defined in HTML.
In JavaScript define a function showTime and render it every second using JavaScript setInterval() method.
Create a new instance of time using JavaScript new Date() .
Convert it into string format and show the output.

Example: In this example, we have followed above explained approach

Javascript

// Calling showTime function at every second setInterval(showTime, 1000); // Defining showTime funcion function showTime() < // Getting current time and date let time = new Date(); let hour = time.getHours(); let min = time.getMinutes(); let sec = time.getSeconds(); // Setting time for 12 Hrs format if (hour >= 12) < if (hour > 12) hour -= 12; > else if (hour == 0) < hour < 10 ? "0" + hour : hour; min = min < 10 ? "0" + min : min; sec = sec < 10 ? "0" + sec : sec; let currentTime = // Displaying the time document.getElementById( ).innerHTML = currentTime;

HTML

< meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Digital Clock

CSS

font-size : 175px ; width : 900px ; margin : 200px ; text-align : center ; border : 2px solid black ; border-radius: 20px ;

Note: You can use digital fonts available online to make the clock look more beautiful. For that, you have to download their file into your project and then use the “font-face” property to use that custom font.

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples .

Like Article -->

Please Login to comment.

Similar Reads

Design a Digital Clock in Neumorphism Style using JavaScript

A clock is a device that is used to measure time. Clocks are a useful element for any UI if used in a proper way. Clocks can be used on sites where time is the main concern like some booking sites or some app showing arriving times of trains, buses, flights, etc. The clock is basically of two types, Analog and Digital. Here, we will design the digi

3 min read Create a Multiple Timezone(Digital & Analog) Clock using React-Native

Multiple Timezone (Digital & Analog) Clock is a React Native app that allows users to select and view the time in different timezones, both in digital and analog formats, enhancing the understanding of time differences across the world. Preview of final output: Let us have a look at how the final output will look like. Prerequisite:React Native

5 min read How to make a digital clock in p5.js ?

The working of the clock is simple. The current hours, minutes and seconds is retrieved using the hour(), minute() and second() methods. The number returned is then padded with a "0" if it is less than 10 using the formatting function we will create. The AM or PM is determined by using the detected hours value. The whole time string is then display

2 min read How to add a Digital Clock in Next.js ?

Adding a digital clock to your Next.js application can enhance the user experience by providing real-time updates in an aesthetically pleasing manner. We can simply add it with packages available on NPM. In this article, we are going to learn how we can add Clock in Next.js ApproachTo add our Clock we are going to use the react-live-clock package.

2 min read Create an Analog Clock using HTML, CSS and JavaScript

Analog clock is a clock that shows the time by using a circular disc and three traditional hour, minute, and second hands. We are going to build this by using HTML, CSS, and JavaScript. PrerequisiteHTMLCSSJavaScriptApproachHTML: It is a simple file having the basic structure of the webpage and ID for the clock's body and for the second, minute, and

3 min read Responsive analog clock using HTML, CSS and Vanilla JavaScript

In this article, we are going to create an Analog Clock. This is mainly based on HTML, CSS & Vanilla JavaScript. Approach: Create an HTML file in which we are going to add the main div, further on we are adding 4 div tags for an hour, minute, and second hands & for the pin.Create a CSS file for styling our web page and for assigning differe

4 min read Create a Build A Simple Alarm Clock in HTML CSS & JavaScript

In this article, we will develop an interactive simple Alarm Clock application using HTML, CSS, and JavaScript languages. Develop an alarm application featuring date and time input fields for setting alarms. Implement comprehensive validation to prevent duplicate alarms and enforce a maximum limit of three alarms per user. Ensure alarms can only be

5 min read How to create seven segment clock using p5.js library?

The seven-segment display is a form of an electronic display device for displaying decimal numerals that is an alternative to the more complex dot matrix displays. 7 segment display clocks each segment is a single led and all the 7 LEDs connected together with a common pin that may be a common positive or a common negative and arranged in a specifi

4 min read Create an Alarm Clock using React-Native

React Native is a popular JavaScript framework for building cross-platform mobile applications which binds with a lot of features that help you to create versatile and industry-level applications. In this article, we will see the step-by-step process to create an Alarm Clock using React-Native. Preview of final output: Let us have a look at how the

3 min read Create a Responsive Animated Clock in Tailwind CSS

We will create a simple Responsive Animated Clock using the Tailwind CSS and JavaScript. We'll utilize Tailwind CSS for styling to create an attractive user interface and JavaScript for the logic. Prerequisites:HTMLTailwind CSSJavaScriptApproach: Create an HTML file named index.html and link the Tailwind CSS stylesheet for styling.Use SVG to create

2 min read How to add Analog Clock in ReactJS ?

In this article, we are going to learn how we can add Analog Clock in ReactJs. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. Approach to create Analog Clock:To add our Analog clock we are going to use th

2 min read Difference between responsive design and adaptive design

In this article, we will discuss the difference between responsive design and adaptive design. Both are the designing part of a website but how both of them are different from each other. In earlier times, web designers design the user interface of the website by considering the size of the desktop. but nowadays we use websites for Mobile, Tablet,

4 min read Design a Calculator using JavaScript with Neumorphism Effect/Soft UI

In this article, we will learn how to create a working calculator with the Neumorphism effect using HTML, CSS, and JavaScript. Basic mathematical operations such as addition, subtraction, multiplication, and division can be performed using this calculator. Approach: Neumorphism is a contemporary approach to decorating web-elements and creating a 3D

3 min read How to Design a Weather Bot in Telegram using JavaScript ?

Telegram bot can be used to know the complete weather details of any city, state, a country without going using another application. Telegram provides a bunch of API methods to perform different functions. You can use telegram bot API to create a Chatbot that returns weather-based information about a city, state, or country based on the parameters

3 min read Design Dragon's World Game using HTML CSS and JavaScript

Project Introduction: "Dragon's World" is a game in which one dragon tries to save itself from the other dragon by jumping over the dragon which comes in its way. The score is updated when one dragon saves himself from the other dragon. The project will contain HTML, CSS and JavaScript files. The HTML file adds structure to the game followed by sty

6 min read Design a Letter Hover Effect using HTML CSS and JavaScript

In this article, we will learn to implement the bouncing letter hover effect using simple HTML, CSS, and JavaScript. HTML is used to create the structure of the page, CSS is used to set the styling and JavaScript is used for animation. Approach to Create the Bouncing Letter Hover EffectHTML Code: To achieve a dynamic bouncing text effect, start by

2 min read Design a Survey Form using HTML CSS and JavaScript

In this article, we are going to implement a survey form using HTML, CSS, and JavaScript. In this form, we will get data about the interest of people in sports. In this implementation, the data will be stored in a CSV file after successful form validations. Preview of final output: Let us have a look at how the final output will look like. Prerequi

5 min read Design a Tip Calculator using HTML, CSS and JavaScript

The tip is the money given as a gift for good service, to the person who serves you in a restaurant. In this project, a simple tip calculator is made which takes the billing amount, type of service, and the number of persons as input. As per the three inputs, it generates a tip for the serving person. In this article, we are going to learn how to d

4 min read Design a Loan Calculator using JavaScript

The Loan Calculator can be used to calculate the monthly EMI of the loan by taking the total amount, months to repay, and the rate of interest. Formula Used:interest = (amount * (rate * 0.01))/months;total = ((amount/months) + interest);ApproachExtract values from HTML input elements (#amount, #rate, #months).Calculate monthly interest using the fo

2 min read Design Random Color Generator using HTML CSS and JavaScript

The Random Color Generator application can Generate new and random colors each time the user clicks on the Generate Color button. The user has the feature to Copy the HEX and RGB code of the generated color for the application. There is Dark Mode functionality, through which the user can view the generated color in the Dark Mode also and can toggle

4 min read Design an Online Voting System Card using Tailwind CSS and JavaScript

Online Voting System in Tailwind CSS is a web-based platform designed to facilitate the voting process. It allows users to cast their votes securely and efficiently through a user-friendly interface. The system is built using Tailwind CSS, a utility-first CSS framework, which ensures a responsive and visual design. Approach to create Online Voting

3 min read How to Design a Custom Alert Box using JavaScript ?

An alert box is a built-in feature in JavaScript that displays a small window with a message to the user. It's primarily used for providing information to the user, displaying warnings, or prompting the user for confirmation. The below approaches can be used to create a custom alert box in JavaScript: Table of Content Using JavaScript to toggle dis

4 min read Design a Stock Market Dashboard using HTML CSS & JavaScript

We will walk through the step-by-step process of designing a Stock Market Dashboard template using HTML, CSS, and JavaScript. This application will provide users with a dashboard interface where they can view a watchlist of stocks, search for specific stocks, and see detailed information about each stock. Prerequisites:HTMLCSSJavaScriptApproach to

11 min read Design a simple counter using HTML CSS and JavaScript

A simple counter is a numeric display that increments or decrements based on user interaction. To design one using HTML, CSS, and JavaScript, create a display area and buttons. Use JavaScript to increment or decrement the counter value and update the display accordingly. Here is the Sample Image of the counter that we are going to make: Before we s

4 min read Design a Social Media Profile Card using HTML CSS & JavaScript

To implement and Design a Social Media Profile Card using HTML CSS, and JavaScript language. In this application, we have created an attractive card component that represents the Social Media Profile information of the user. This information includes Profile Image, Name, Designation, Location, Followers, Following, and Social Media Handlers with th

4 min read Design a Video Slide Animation Effect using HTML CSS and JavaScript

Nowadays, Video Slide animations are very popular. In this article, we will see how to make Video Slide Animation using HTML, CSS, and JavaScript on any webpage. Below are the two steps on how to do it. It will help the beginner to build some awesome Video Slide animations using HTML, CSS, and JS by referring to this article. What is CSS Animation?

4 min read Design Hit the Mouse Game using HTML, CSS and Vanilla Javascript

In this article, we are going to create a game in which a mouse comes out from the holes, and we hit the mouse with a hammer to gain points. It is designed by using HTML, CSS & Vanilla JavaScript. HTML Code: First, we create an HTML file (index.html).Now after creating the HTML file, we are going to give a title to our webpage using the <tit

5 min read Design a Responsive Sliding Login & Registration Form using HTML CSS & JavaScript

In this article, we will see how to create the Responsive Sliding Login & Registration Form using HTML CSS & JavaScript, along with understanding its implementation through the illustration. Many websites, nowadays, implement sliding login & registration forms for their sites. A Registration form is used to register or create a new acco

5 min read Design Background color changer using HTML CSS and JavaScript

Background color changer is a project which enables to change the background color of web pages with ease. There are color boxes on a web page when the user clicks on any one of them, then the resultant color will appear in the background of the web page. It makes web pages look attractive. File structure: --index.html--style.css--script.jsPrerequi

3 min read Pig Game Design using JavaScript

In this article, we will be explaining the steps and various logic required in making of the famous Pig Game, which is a virtual dice game. About Game: In this game, User Interface (UI) contains user/player that can do three things, they are as follows: There will be two players in this game. At the start of the game Player 1 will be the CurrentPla