Binary Clock in HTML CSS and JavaScript

Binary Clock in HTML CSS and JavaScript
Code Snippet:Binary Clock
Author: Mark Boots
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 438
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a binary clock using HTML, CSS, and JavaScript. It displays hours, minutes, and seconds in a unique visual format. The JavaScript function retrieves the current time and updates the clock accordingly. It’s a visual representation of time in binary form, offering an alternative way to view the current time.

How to Create Binary Clock In HTML CSS and JavaScript

1. First of all, create the HTML structure for the binary clock as follows.  It defines the layout of the clock. It consists of <div> elements representing hours, minutes, and seconds, each containing <i> elements for displaying the binary representation.

<div class="binary-clock">
  <span>Hours</span><span>Minutes</span><span>Seconds</span>
  <div data-digit><i></i><i></i><i></i><i></i></div>
  <div data-digit><i></i><i></i><i></i><i></i></div>
  <div data-digit><i></i><i></i><i></i><i></i></div>
  <div data-digit><i></i><i></i><i></i><i></i></div>
  <div data-digit><i></i><i></i><i></i><i></i></div>
  <div data-digit><i></i><i></i><i></i><i></i></div>
</div>

2. Now, style using the clock using the following CSS styles. It styles the clock components. It uses grid layouts, colors, shadows, and transitions to create the visual representation of the binary clock. You can modify colors, sizes, or styles to customize the appearance.

.binary-clock{
  width: min(20rem, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(6,1fr);
  --gap: 1.25rem;
  gap: var(--gap);
  --colorH: #ff187c;
  --colorM: #09fff4;
  --colorS: #80ff09;
}
.binary-clock > span {
  grid-column-end: span 2;
  text-align: center;
  color: var(--color);
  text-shadow: 2px 2px 4px hsl(0 0% 0%)
}
[data-digit]::after {
  content: attr(data-digit);
  color: var(--color);
  text-align: center;
  text-shadow: 2px 2px 4px hsl(0 0% 0%)
}
[data-digit] { 
  display: grid;
  gap: var(--gap);
}
[data-digit] > i {
  box-shadow:
    inset -0.5rem -0.5rem 1rem hsl(0 0% 0% / .5),
    inset 0.5rem 0.5rem 1rem hsl(0 0% 100% / .125),
    0 0 2rem var(--active-color, transparent);
  aspect-ratio: 1/1;
  background-color: var(--active-color, transparent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color 0.5s, box-shadow 0.5s
}
[data-digit="1"] > i:nth-of-type(4), 
[data-digit="2"] > i:nth-of-type(3),
[data-digit="3"] > i:nth-of-type(3),
[data-digit="3"] > i:nth-of-type(4),
[data-digit="4"] > i:nth-of-type(2),
[data-digit="5"] > i:nth-of-type(2),
[data-digit="5"] > i:nth-of-type(4),
[data-digit="6"] > i:nth-of-type(2),
[data-digit="6"] > i:nth-of-type(3),
[data-digit="7"] > i:nth-of-type(2),
[data-digit="7"] > i:nth-of-type(3),
[data-digit="7"] > i:nth-of-type(4),
[data-digit="8"] > i:nth-of-type(1),
[data-digit="9"] > i:nth-of-type(1),
[data-digit="9"] > i:nth-of-type(4)
{ --active-color: var(--color) }

.binary-clock > span:nth-child(1),
[data-digit]:nth-of-type(1),
[data-digit]:nth-of-type(2) { --color: var(--colorH) }

.binary-clock > span:nth-child(2),
[data-digit]:nth-of-type(3),
[data-digit]:nth-of-type(4) { --color: var(--colorM) }

.binary-clock > span:nth-child(3),
[data-digit]:nth-of-type(5),
[data-digit]:nth-of-type(6) { --color: var(--colorS) }

body { 
  font-family: system-ui, sans-serif;
  font-size: 1.5rem;
  margin: 0; 
  padding: 2rem; 
  min-height: 100vh; 
  background-color: #121212;
  display: grid; 
  align-items: center;
  box-sizing: border-box;
}

3. Finally, add the following JavaScript function to activate the clock. It retrieves the current time using Date() and converts hours, minutes, and seconds into their binary representations. It updates the HTML elements with the binary values to display the time on the clock.

time();

function time(){
  const digitEls=document.querySelectorAll(".binary-clock>[data-digit]");
  const date=new Date();
  const h=date.getHours();
  const m=date.getMinutes();
  const s=date.getSeconds();
  const digits=[h,m,s].reduce((a,v)=>[...a,...v.toString().padStart(2,"0")],[]);
  digits.forEach((digit,index)=>digitEls[index].dataset.digit=digit);
  window.requestAnimationFrame(time);
}

That’s all! hopefully, you have successfully created Binary Clock on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...