Realtime Date and Time using HTML CSS and JS

Hello, learner In this article, we are going to create a Realtime Date and Time using HTML CSS and JS In the earlier past post, we have created a Responsive Gallery Design using HTML, CSS, and Javascript. Now it is time to create a Social media icon.

Realtime Date and Time using HTML, CSS and Javascript

A clock or watch in which the hours, minutes, and sometimes seconds are shown by digits, as opposed to an analog clock, where the time is indicated by the positions of spinning hands. In our program, we are going to create a digital clock with a date and 7 weeks As we see in the above image it is the output of the below code. there are 7-week names at the top of the box and below that there is the time at the bottom corner of the other is date with year, month and date

Realtime Date and Time using HTML CSS and JS [Source code]

To create Realtime Date and Time using HTML, CSS and JS you have to create three HTML, CSS, and js files named index.html, style.css, and script.js in the same folder and you have to link the CSS and JS file to HTML. after that paste the HTML code in index.htm. paste the CSS code in style.css at last paste the JS code in Style.js that’s all after pasting the code. Now your Realtime date and time Design is ready.

At first, you have to create an HTML file named index.html paste the below code on it, and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <title>Realtime clock </title>  
   <link rel="stylesheet" href="style.css" />  
 <script type = "text/javascript" src = "script.js">
  </head>  
  <body>  
<div class="clock">
	<ul class="days">
		<li>Sun</li>
		<li>Mon</li>
		<li>Tue</li>
		<li>Wed</li>
		<li>Thu</li>
		<li>Fri</li>
		<li>Sat</li>
	</ul>
	
	<div class="numbers">
		<p class="hours number">-</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1904381440953809"
     crossorigin="anonymous"></script>
<!-- Python top -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1904381440953809"
     data-ad-slot="1414312307"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>

		<p class="number"> : </p>
		<p class="minutes number">-</p><div class='code-block code-block-4' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1904381440953809"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-hx-k+g-bj+nx"
     data-ad-client="ca-pub-1904381440953809"
     data-ad-slot="6788407307"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>

	</div>
	
	<div class="date">
		<div class="number day-month">-</div>
		<div class="number">/</div>
		<div class="number month">-</div>
		<div class="number">/</div>
		<div class="number year"></div>
	</div>
	
	<div class="preloader"></div>
</div>
   </body> 
 </html>

After pasting the HTML code the second you have to create a CSS file named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

@import url('https://fonts.googleapis.com/css2?family=Squada+One&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: #fff;
	font-family: sans-serif, Arial, Helvetica;
	pointer-events: none;
}

.number {
	font-family: 'Squada One', cursive;
	font-size: 80px;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: #111;
}

.clock {
	padding: 7px;
	border-radius: 5px;
	box-shadow: inset 0 0 7px #444;
	background: #000;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.preloader {
	width: 100%;
	height: 100%;
	background: #000;
	position: absolute;
	border-radius: 5px;
}

.days {
	list-style: none;
	display: flex;
}

.days li {
	margin: 10px;
}

.days li.actual {
	text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
}

.numbers {
	display: flex;
	margin-top: 20px;
}

.date {
	position: absolute;
	display: flex;
	bottom: 10px;
	right: 10px;
	opacity: 0.7;
}

.date * {
	font-size: 15px;
}

After pasting both HTML and CSS code Now at last You have to create a JS file named script.js. after creating the file now paste the Below code in the js file. Remember to give .js extension to the javascript file.

const days = document.querySelectorAll('.days li')
const hours = document.querySelector('.numbers .hours')
const minutes = document.querySelector('.numbers .minutes')
const month = document.querySelector('.date .month')
const dayMonth = document.querySelector('.date .day-month')
const year = document.querySelector('.date .year')

let date = new Date()

days[date.getDay()].classList.add('actual')

const addSpace = num => {
	splitNum = num.toString().split('')
	result = num
	
	if(splitNum.length !== 2) {
		result = '0' + num
	}
	
	return result
}

setInterval(() => {
	let date = new Date()
	
	hours.textContent = addSpace(date.getHours())
	minutes.textContent = addSpace(date.getMinutes())
	
	month.textContent = addSpace(date.getMonth() + 1)
	dayMonth.textContent = addSpace(date.getDate())
	year.textContent = date.getFullYear()
}, 1000)

const preloader = document.querySelector('.preloader')

document.addEventListener('DOMContentLoaded', () => {
	preloader.style.display = 'none'
})

That’s all after pasting all the code in the file now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

You might like this

Source:- Codepen.io

Realtime Date and Time using HTML CSS and JS

Realtime Date and Time using HTML CSS and JS [Source code]

You might like this

2 thoughts on “Realtime Date and Time using HTML CSS and JS”

Leave a Comment Cancel reply

Quick Link