Here is my code for an SVG clock, I would like to make it into a 24 hour clock. Could you help me put 1 to 24 hours. //

Post by **answerhappygod** » Fri May 20, 2022 5:47 pm

Here is my code for an SVG clock, I would like to make it into a
24 hour clock. Could you help me put 1 to 24 hours.
// index.html file code
<!DOCTYPE html>
<html lang="fr">
<head>
<title>IFT1005 - Horloge SVG 24h</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="container">
<div class="clock-w">
<h1>SVG 24h</h1>
<div class="clock" style="text-align: center;">
<svg class="clockface" id="clock" version="1.1" viewBox="-150
-150 400 400" width="600" height="600">
<circle class="ring--sec" cx="0" cy="0" r="145"
fill="transparent" stroke="#222" stroke-width="5" pathlenght="60"
stroke-dasharray="2 2" stroke-dashoffset=".05"/>
<circle class="ring--hours" cx="0" cy="0" r="145"
fill="transparent" stroke="red" stroke-width="10"
stroke-dasharray="20 20" />
<line class="min" x1="0" y1="2" x2="0" y2="-110"/>
<line class="hour" x1="0" y1="2" x2="0" y2="-60"/>
<line class="sec" x1="0" y1="2" x2="0" y2="-130"/>
<circle class="ring--center" cx="0" cy="0" r="4"/>
<text x="50" y="-5" class="date">4</text>
<text x="50" y="10" class="am-pm">am</text>
</svg>
<div class="clock-wrappr">
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
</div>
</div>
</div>
</div>
</main>
<footer>
</footer>
<script src="app.js"></script>
</body>
</html>
// style.css file code
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bkg: #232946;
--dark: #121629;
--purple: #b8c1ec;
--pink: #eebbc3;
--white: #fffffe;
}
body {
background-color: var(--bkg);
display: grid;
place-items: center;
min-height: 100vh;
font-family: Ubuntu;
font-size: 2rem;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4rem;
margin: 1rem;
}
.clock-w {
font-size: 3rem;
display: grid;
place-items: center;
gap: 3rem;
color: var(--white);
}
h1 {
font-size: 3rem;
}
.clock {
filter: drop-shadow(2px 10px 10px var(--bkg));
}
.ring--sec {
fill: var(--dark);
stroke: var(--pink);
stroke-width: 5;
stroke-dasharray: 2 2;
stroke-dashoffset: .05;
}
.ring--hours {
fill: var(--dark);
stroke: var(--purple);
stroke-width: 5;
stroke-dasharray: 20 20;
stroke-dashoffset: .05;
}
.ring--center {
fill: var(--pink);
stroke: var(--white);
stroke-width: 2.5;
}
.min {
stroke: var(--white);
stroke-linecap: round;
transform: rotate(90deg);
stroke-width: 3;
}
.hour {
stroke: var(--pink);
stroke-linecap: round;
transform: rotate(45deg);
stroke: var(--purple);
stroke-width: 5;
}
.sec {
stroke: var(--pink);
stroke-linecap: round;
}
.date {
fill: var(--white);
font-size: 1.5rem;
}
.am-pm {
fill: var(--pink);
font-size: small;
text-transform: uppercase;
}
.clock-wrappr {
margin-top: -603px;
margin-left: -78px;
width: 425p;
height: 425px;
}
.number {
--rotation: 0;
position: absolute;
width: 100%;
height: 100%;
/* background-color: red; */
text-align: center;
transform: rotate(var(--rotation));
}
.number1 {
--rotation: 30deg;
}
.number2 {
--rotation: 60deg;
}
.number3 {
--rotation: 90deg;
}
.number4 {
--rotation: 120deg;
}
.number5 {
--rotation: 150deg;
}
.number6 {
--rotation: 180deg;
}
.number7 {
--rotation: 210deg;
}
.number8 {
--rotation: 240deg;
}
.number9 {
--rotation: 270deg;
}
.number10 {
--rotation: 300deg;
}
.number11 {
--rotation: 330deg;
}
// app.js file code
const UI = {
date: document.querySelector('.date'),
am_pm: document.querySelector('.am-pm'),
second: document.querySelector('.sec'),
minute: document.querySelector('.min'),
hour: document.querySelector('.hour'),
footer: document.querySelector('footer')
}
function updateClock() {
//gettting time
const now = new Date();
const date = now.getDate();
const seconds = (now.getSeconds() + now.getMilliseconds() /
1000) / 60 * 360;
const minutes = (now.getMinutes() + now.getSeconds() / 60) / 60
* 360;
const hours = (now.getHours() + now.getMinutes() / 60) / 24 *
360;
// UI update
UI.date.textContent = date;
UI.second.style.transform = `rotate(${seconds}deg)`;
UI.minute.style.transform = `rotate(${minutes}deg)`;
UI.hour.style.transform = `rotate(${hours}deg)`;
requestAnimationFrame(updateClock)
}
requestAnimationFrame(updateClock)
function txt(texte, rot) {
var e = document.createElementNS("http://www.w3.org/2000/svg",
'text');
e.setAttribute("x", 360);
e.setAttribute("y", 200);
e.setAttribute("fill", "red");
e.setAttribute("style", "text-anchor:middle; font=family:Arial;
font-weight: bold; font-size:10;");
e.setAttribute("transform", "rotate(" + rot + " 200 200)");
var textNode = document.createTextNode(texte);
e.appendChild(textNode);
svg.appendChild(e);
}
function ajuste() {
ai.setAttribute("transform", "rotate(" + h + " 200 200)");
h = h + 10.0;
}
// for(var i=0;i<360;i+=10) tic(i);
for (var i = 0; i < 24; i++) txt("" + i, i * 360 / 24);
setInterval(ajuste, 1000);
//output