Created
December 8, 2021 11:45
-
-
Save ashwani3011/fe8c98417d76a4bd2ce146448bc3b700 to your computer and use it in GitHub Desktop.
digit_tick_final
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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>Digital Clcok</title> | |
</head> | |
<body> | |
<div class="container"></div> | |
<script src="https://d3js.org/d3.v7.min.js" defer></script> | |
<script src="script.js" defer></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const container = d3.select(".container"); | |
let digits = [ | |
[ | |
[1, 1, 1], | |
[1, 0, 1], | |
[1, 0, 1], | |
[1, 0, 1], | |
[1, 0, 1], | |
[1, 0, 1], | |
[1, 1, 1], | |
], | |
[ | |
[0, 1, 0], | |
[0, 1, 0], | |
[0, 1, 0], | |
[0, 1, 0], | |
[0, 1, 0], | |
[0, 1, 0], | |
[0, 1, 0], | |
], | |
[ | |
[1, 1, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
[1, 1, 1], | |
[1, 0, 0], | |
[1, 0, 0], | |
[1, 1, 1], | |
], | |
[ | |
[1, 1, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
[1, 1, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
[1, 1, 1], | |
], | |
[ | |
[1, 0, 1], | |
[1, 0, 1], | |
[1, 0, 1], | |
[1, 1, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
], | |
[ | |
[1, 1, 1], | |
[1, 0, 0], | |
[1, 0, 0], | |
[1, 1, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
[1, 1, 1], | |
], | |
[ | |
[1, 1, 1], | |
[1, 0, 0], | |
[1, 0, 0], | |
[1, 1, 1], | |
[1, 0, 1], | |
[1, 0, 1], | |
[1, 1, 1], | |
], | |
[ | |
[1, 1, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
], | |
[ | |
[1, 1, 1], | |
[1, 0, 1], | |
[1, 0, 1], | |
[1, 1, 1], | |
[1, 0, 1], | |
[1, 0, 1], | |
[1, 1, 1], | |
], | |
[ | |
[1, 1, 1], | |
[1, 0, 1], | |
[1, 0, 1], | |
[1, 1, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
[0, 0, 1], | |
], | |
]; | |
const svg = container | |
.append("svg") | |
.attr("height", window.innerHeight) | |
.attr("width", window.innerWidth); | |
let squareData = { | |
height: 45, | |
width: 45, | |
x: 0, | |
y: 0, | |
color: "blue", | |
margin: 5, | |
}; | |
let makeDigit = (d) => { | |
let digitData = []; | |
// i - row, j - column | |
for (let i = 0; i < 7; i++) { | |
for (let j = 0; j < 3; j++) { | |
// making 21 digits | |
let currSquare = { ...squareData }; | |
if (i > 0 && i < 6 && j == 1) { | |
currSquare.color = "white"; | |
} | |
currSquare.x = j * (currSquare.width + currSquare.margin); | |
currSquare.y = i * (currSquare.width + currSquare.margin); | |
digitData.push(currSquare); | |
} | |
} | |
return digitData; | |
}; | |
let digitData = makeDigit(); | |
let render = () => { | |
let rects = svg | |
.selectAll("rect") | |
.data(digitData) | |
.attr("height", (d) => d.height) | |
.attr("width", (d) => d.width) | |
.attr("fill", (d) => d.color) | |
.attr("x", (d) => d.x) | |
.attr("y", (d) => d.y) | |
.attr("margin", (d) => d.margin); | |
rects | |
.enter() | |
.append("rect") | |
.attr("height", (d) => d.height) | |
.attr("width", (d) => d.width) | |
.attr("fill", (d) => d.color) | |
.attr("x", (d) => d.x) | |
.attr("y", (d) => d.y) | |
.attr("margin", (d) => d.margin); | |
}; | |
// render(); | |
let updateDigit = (s) => { | |
for (let i = 0; i < 21; i++) { | |
let r = Math.floor(i / 3); | |
let c = i % 3; | |
if (digits[s][r][c] === 1) { | |
digitData[i].color = "blue"; | |
} else { | |
digitData[i].color = "white"; | |
} | |
} | |
}; | |
setInterval(() => { | |
let time = new Date(); | |
let h = time.getHours(); | |
let m = time.getMinutes(); | |
let s = time.getSeconds(); | |
// console.log(h + " : " + m + " : " + s); | |
updateDigit(s % 10); | |
render(); | |
}, 1000); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment