Thursday, December 26th 2024
Image Courtesy of FreePik.com
Happy Holidays everybody! Just a quick post to show off a Binary Clock I made using HTML/CSS/Javascript. This is similar to the clocks once sold by Think Geek. I always wanted one of my own, but could never justify the cost. But I figure why not try my hand at making one in software. Each LED is just a DIV element with a 100% round border with two CSS classes for each state (off/on). I wrote some code that runs every second to generate a time string. I convert the time string to binary and update the LEDs. Feel free to look at the code below the example. As always, code available at your own risk!
Clock
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Binary Clock</title>
<style>
.title {
width: 100%;
font-size: 24pt;
font-family: 'Courier New', monospace;
font-weight: bold;;
}
.clock-body {
display: flex;
flex-direction: row;
width: 300px;
height: 150px;
border: solid 2px;
border-radius: 5px;
background-color: grey;
align-items: end;
text-align: center;
padding-bottom: 25px;
}
.clock-col {
width: 20%;
}
.clock-led {
border: solid 2px;
border-radius: 100%;
width: 25px;
height: 25px;
background-color: green;
margin: auto;
margin-top: 2px;
line-height: 1.5;
}
.clock-led-on {
background-color:chartreuse;
}
</style>
</head>
<body>
<div class="title">Binary Clock</div>
<div class="clock-body">
<!-- HOURS -->
<div class="clock-col">
<div class="clock-led"></div>
<div class="clock-led"></div>
</div>
<div class="clock-col">
<div class="clock-led"></div>
<div class="clock-led"></div>
<div class="clock-led"></div>
<div class="clock-led"></div>
</div>
<!-- MINUTES -->
<div class="clock-col">
<div class="clock-led"></div>
<div class="clock-led"></div>
<div class="clock-led"></div>
</div>
<div class="clock-col">
<div class="clock-led"></div>
<div class="clock-led"></div>
<div class="clock-led"></div>
<div class="clock-led"></div>
</div>
<!-- SECONDS -->
<div class="clock-col">
<div class="clock-led"></div>
<div class="clock-led"></div>
<div class="clock-led"></div>
</div>
<div class="clock-col">
<div class="clock-led"></div>
<div class="clock-led"></div>
<div class="clock-led"></div>
<div class="clock-led"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// first digit of the hour only needs 1,2, second digit 1,2,4,8, ex..
const digitLengths = [2, 4, 3, 4, 3, 4];
window.setInterval(() => {
// get current time from time string ex. 23:59:59 => 235959
const strTime = new Date().toTimeString().substring(0,8).replace(new RegExp(":","g"),"");
// loop over each time digit
strTime.split("").forEach((c,ci) => {
// convert strTime to binary for the digit length
const binary = Number(c).toString(2).padStart(digitLengths[ci],"0");
// loop over binary digits
binary.split("").forEach((l,li) => {
// find the column and the led by indexs
const led = document.querySelector(`.clock-col:nth-child(${ci + 1}) .clock-led:nth-child(${li + 1})`);
// toggle the LED off
led.classList.remove("clock-led-on");
// add class on if set
if(l == 1) led.classList.add("clock-led-on");
});
});
},1000);
</script>
]]>
Categories: Programming
Tags: javascript