analog clock

```dataviewjs

const container = dv.container;

container.style.width = "200px";
container.style.height = "200px";
container.style.position = "relative";
container.style.margin = "20px auto";

// Create clock face
const clockFace = container.createEl("div");
clockFace.style.width = "200px";
clockFace.style.height = "200px";
clockFace.style.border = "2px solid #FFC3FD";
clockFace.style.borderRadius = "50%";
clockFace.style.position = "relative";
clockFace.style.background = "#8839ef";

// Create minute/second markers
for (let i = 0; i < 60; i++) {
    const marker = clockFace.createEl("div");
    const angle = i * 6;
    const isHourMarker = i % 5 === 0;
    marker.style.position = "absolute";
    marker.style.width = isHourMarker ? "2px" : "1px";
    marker.style.height = isHourMarker ? "10px" : "5px";
    marker.style.background = "#000000";
    marker.style.left = "50%";
    marker.style.top = "2%";
    marker.style.transformOrigin = "50% 94px"; // Radius for markers
    marker.style.transform = `translateX(-50%) rotate(${angle}deg)`;
}

// Create hour markers (numbers)
for (let i = 1; i <= 12; i++) {
    const angle = (i * 30 - 90) * (Math.PI / 180);
    const marker = clockFace.createEl("div");
    marker.textContent = i;
    marker.style.position = "absolute";
    marker.style.width = "20px";
    marker.style.textAlign = "center";
    marker.style.left = `${88 + 70 * Math.cos(angle)}px`;
    marker.style.top = `${88 + 70 * Math.sin(angle)}px`;
    marker.style.fontFamily = "Chicken Pie";
    marker.style.fontSize = "17px";
    marker.style.fontWeight = "bold";
    marker.style.color = "#000000";
}

// Create clock hands
const hands = {
    hour: clockFace.createEl("div"),
    minute: clockFace.createEl("div"),
    second: clockFace.createEl("div")
};

// Style hour hand
hands.hour.style.width = "4px";
hands.hour.style.height = "50px";
hands.hour.style.background = "#dc8a78";
hands.hour.style.position = "absolute";
hands.hour.style.left = "50%";
hands.hour.style.top = "50%";
hands.hour.style.transformOrigin = "50% 100%";
hands.hour.style.borderRadius = '4px';
hands.hour.style.transform = "translate(-50%, -100%)";

// Style minute hand
hands.minute.style.width = "3px";
hands.minute.style.height = "70px";
hands.minute.style.background = "#7287fd";
hands.minute.style.position = "absolute";
hands.minute.style.left = "50%";
hands.minute.style.top = "50%";
hands.minute.style.transformOrigin = "50% 100%";
hands.minute.style.borderRadius = '4px';
hands.minute.style.transform = "translate(-50%, -100%)";

// Style second hand
hands.second.style.width = "2px";
hands.second.style.height = "80px";
hands.second.style.background = "#fe640b";
hands.second.style.position = "absolute";
hands.second.style.left = "50%";
hands.second.style.top = "50%";
hands.second.style.transformOrigin = "50% 100%";
hands.second.style.borderRadius = '4px';
hands.second.style.transform = "translate(-50%, -100%)";

// Create center dot
const centerDot = clockFace.createEl("div");
centerDot.style.width = "10px";
centerDot.style.height = "10px";
centerDot.style.background = "#FF0000";
centerDot.style.borderRadius = "50%";
centerDot.style.position = "absolute";
centerDot.style.left = "50%";
centerDot.style.top = "50%";
centerDot.style.transform = "translate(-50%, -50%)";

// Load sounds [ sound files are inside a folder of same vault]
const ticktockSound= new Audio('sounds/ticking-clock_1-27477.mp3');
const clockSound= new Audio('sounds/old-clock-bell-27265.mp3');

function updateClock() {
    const now= new Date();
    const hours= now.getHours() % 12;
    const minutes= now.getMinutes();
    const seconds= now.getSeconds();

    const hourDeg= (hours + minutes / 60) * 30;
    const minuteDeg= (minutes + seconds / 60) * 6;
    const secondDeg= seconds * 6;

    hands.hour.style.transform= `translate(-50%, -100%) rotate(${hourDeg}deg)`;
    hands.minute.style.transform= `translate(-50%, -100%) rotate(${minuteDeg}deg)`;
    hands.second.style.transform= `translate(-50%, -100%) rotate(${secondDeg}deg)`;

   // Play sound effects for hours and seconds
   if (seconds === 0 && minutes === 0) {
       clockSound.play();
   } else {
       ticktockSound.play();
   }
}

// Initial update
updateClock();

// Update every second
const interval= setInterval(updateClock, 1000);

// Cleanup interval when the component is removed
dv.container.cleanup= () => clearInterval(interval);


```