javaScript Digital Clock with date

Simple Digital Clock with Date using JavaScript

First an area has been defined which will contain these two circles. Here the width of the area: 430px and height: 520px . Circle height, width 140px and border-radius: 50% is used to make it completely round.

.background width: 430px; height: 520px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; > .background .shape height: 140px; width: 140px; position: absolute; border-radius: 50%; > 

Now those two circles have been placed in a certain place and in both cases we have used different linear-gradient colors . You can adjust the positions of the circles as you wish.

.shape:first-child background: linear-gradient( #1845ad, #23a2f6 ); left: -80px; top: 70px; > .shape:last-child background: linear-gradient( to right, #ff512f, #f09819 ); right: -80px; bottom: 80px; > 

Step 2: Basic structure of digital clock

Now the basic structure of the digital clock has been created. Backdrop-filter: blur (10px) has been used to blur the background of this clock.

.alarm-clock  position: relative; padding: 7px; backdrop-filter: blur(10px); border-radius: 10px; background-color: rgba(255,255,255,0.17); > 

📌📌 Remember, time cannot be seen without JavaScript . I have used the image below to understand what will change after using the above HTML and CSS.

Step 3: Add code to view time

Now I have added the necessary HTML to view the time. Hours, minutes and seconds can be found here. A colon has been used in between each period which will help to enhance the beauty a bit.

 class="time">  class="hours">  class="colon"> :  class="minutes">  class="colon"> :  class="seconds">  

.alarm-clock .time  position: relative; display: flex; align-items: center; justify-content: center; padding: 20px 40px 19px; background-color: rgba(255,255,255,0.13); border-radius: 10px; font-family: "Orbitron", sans-serif; font-size: 62px; > .alarm-clock .time span  position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; color: #09ecf8; text-shadow: 0 0 15px #375f08; line-height: 1.75; margin-bottom: 10px; > 

Step 4: Design the colon and add animation

Now the colon has been designed and animation has been added. In the meantime I have used an animation that will help to show and hide some time intervals.

.alarm-clock .time span.colon  width: 14px; padding: 15px; text-align: center; animation: blink 2s infinite; > 

@keyframes blink  0%  opacity: 0; > 30%  opacity: 1; > 50%  opacity: 0; > 70%  opacity: 1; > 100%  opacity: 0; > > 

📌📌 Remember, time cannot be seen without JavaScript . I have used the image below to understand what will change after using the above HTML and CSS.

Step 5: Add code to view the date

Now we have created a place to see the date in the digital clock. As I said before, months, days and years can be seen here. Now I have used HTML and CSS code to create its basic structure. Later I implemented it with the help of JavaScript.

 class="date">  class="month">  class="day">,  class="year">  

.alarm-clock .date  position: absolute; bottom: 1px; left: 50%; background-color: rgba(255,255,255,0.27); padding: 8px; color: white; font-size: 18px; font-weight: 500; font-family: sans-serif; text-transform: uppercase; transform: translateX(-50%); z-index: 9; > 

📌📌 Remember, time and Date cannot be seen without JavaScript . I have used the image below to understand what will change after using the above HTML, CSS.

Step 6: Activate Digital Clock with Date using JavaScript

Above we have all designed to create this Digital Clock with Date. Now is the time to implement it with JavaScript. For this you must have an idea about basic JavaScript. First some of the class functions have been assigned a constant. Because I can’t directly use the ID function in JavaScript. For that a global constant has to be determined.

const hours = document.querySelector('.hours'); const minutes = document.querySelector('.minutes'); const seconds = document.querySelector('.seconds'); const month = document.querySelector('.month'); const day = document.querySelector('.day'); const year = document.querySelector('.year'); 

In the following function I will add all the calculations. In other words, I will add all the calculations needed to increase this clock in this function.

As I mentioned earlier, the time and date information used here will be collected from the device using JavaScript’s New Date Method.

Now the current information of month day and year has been collected and stored in different constants.

 const mm = now.getMonth(); const dd = now.getDate(); const yyyy = now.getFullYear(); 

In the same way hours minutes minutes and seconds are taken from the device and they are stored in some constant.

 const secs = now.getSeconds(); const mins = now.getMinutes(); const hrs = now.getHours(); 

 const monthName = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 

Now through a few conditions I have managed to add one zero to the time below 10 . When the time is below 10, one zero will be added before that time. As a result, the times will be two numbers. Then those times have been arranged to show in the webpage using innerhtml. innerhtml helps to display any content within a web page. I have given the condition here that if the time is less than 10 then one zero will be added and then that time will be seen in the webpage. Then I gave another condition using else. If the time is not below 10 , then the time can be seen directly on the webpage.

 if (hrs  10)  hours.innerHTML = '0' + hrs; > else  hours.innerHTML = hrs; > if (secs  10)  seconds.innerHTML = '0' + secs; > else  seconds.innerHTML = secs; > if (mins  10)  minutes.innerHTML = '0' + mins; > else  minutes.innerHTML = mins; > 

Now using the same innerhtml, the information of the month, day and year has been arranged in the webpage.

 month.innerHTML = monthName[mm]; day.innerHTML = dd; year.innerHTML = yyyy; 

As I mentioned earlier, all these calculations are stored in a function called set date. Now that function has been instructed to update every 1000 milliseconds or one second. setInterval helps to update any information after a certain period of time. This will update all these calculations every 1 second and we will see the time change every second.

Источник

javaScript Digital Clock with date

javaScript Digital Clock with date. In this javaScript Digital Clock with date tutorial, we will learn how to create digital clock with date in javaScript.

Display current date and time in digital clock using javascript

In the digital clock, the time will be display in the 12-hour format of HH : MM : SS AM/PM.

If you want to show time 24-hour in digital clock, so you can set time format like HH : MM : SS. and the time will be shown in 24-hour format.

javaScript Digital Clock with date

Create one HTML file

In this create one html file and update the below code into your file.

Write digital clock script

Next step, open your HTML file and update the below script code into your file:

Write css for styling

Final step, write a css for styling your digital clock. So open your html file and update the below code into your file for digital clock styling:

 /* Google font */ @import url('https://fonts.googleapis.com/css?family=Orbitron'); #digit_clock_time < font-family: 'Work Sans', sans-serif; color: #66ff99; font-size: 35px; text-align: center; padding-top: 20px; >#digit_clock_date < font-family: 'Work Sans', sans-serif; color: #66ff99; font-size: 20px; text-align: center; padding-top: 20px; padding-bottom: 20px; >.digital_clock_wrapper

The full source code of javascript digital clock with a date is below:

      /* Google font */ @import url('https://fonts.googleapis.com/css?family=Orbitron'); #digit_clock_time < font-family: 'Work Sans', sans-serif; color: #66ff99; font-size: 35px; text-align: center; padding-top: 20px; >#digit_clock_date < font-family: 'Work Sans', sans-serif; color: #66ff99; font-size: 20px; text-align: center; padding-top: 20px; padding-bottom: 20px; >.digital_clock_wrapper  
   

Output:- display current date and time in HTML using javascript

Conclusion

In this javascript digital clock tutorial, you have learned how to create digital clock javascript.

Источник

Make a Digital Clock with Date using JavaScript

In this article, you will learn how to create Digital Clock with Date using JavaScript. Earlier I shared with you many more types of digital and analog clocks designs . This digital watch is made with a Glassmorphism design .

Glassmorphism design is a very popular CSS effect that adds extraordinary beauty to any project. We all use digital watches. Making digital clocks from analog clocks is much easier. The time shown here will be taken from the device i.e. the time that will be on your device will be shown here. This time JavaScript’s newDate method is used to receive.

I fully explained how I took the time from the device to show in this project. There is no reason to worry if you are a beginner. Here I have shared step-by-step tutorials and given possible explanations of each line. As I said before you will see the date with this JavaScript digital clock. That means both time and date can be seen.

If you want to make this digital clock , you must have a basic idea about JavaScript HTML, and CSS. Below I have given a complete step-by-step tutorial on how I created this JavaScript Digital Clock with Date . As I said before it is made with the help of Glassmorphism design . In the case of Glassmorphism design, the background is somewhat transparent, meaning that the content in the background can be seen.

Digital Clock with Date using JavaScript

First, we created two colorful circles on the webpage. Here the background of the project(Digital Clock with Date using JavaScript) is almost transparent so the two colorful circles behind it can be seen somewhat clearly. First, a box was created to show the time here.

Then I made another small box where the date will be shown. Arrangements have been made here to show the month, day, and year between the dates.

Hopefully, the demo above has helped you to know how it works. Above you will find the required source code. However, you can download the source code with the help of the button below the article.

First, we created two colorful circles using HTML and CSS . Then I made the basic design. After all, using JavaScript takes time from the device to make it work.

Step 1: Create two colorful circles

We have created two colorful circles on the webpage using the following HTML and CSS codes. I have created an area to see these. Those two circles can be seen in that area.

Источник