Create a Cloak in HTML | Analog Cloak in HTML

  • Last updated Apr 25, 2024

In this tutorial, you will learn how to create a functional analog clock using HTML, CSS, and JavaScript. We will start by setting up the basic structure of the clock using HTML elements. Then, we will apply CSS styles to design the clock face, numbers, and hands, ensuring a visually appealing and realistic appearance. Finally, we'll use JavaScript to dynamically update the clock hands in real-time based on the current time, providing a fully interactive and accurate representation of a real-world clock.

Example:

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog Clock</title>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
  }
  .clock {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    position: relative;
  }
  .number {
    position: absolute;
    font-size: 20px;
    color: #333;
    text-align: center;
    width: 24px;
    height: 24px;
    line-height: 24px;
    transform: translate(-50%, -50%);
  }
  .hour {
    width: 4px;
    height: 60px;
    background-color: #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
  }
  .minute {
    width: 2px;
    height: 80px;
    background-color: #555;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
  }
  .second {
    width: 1px;
    height: 90px;
    background-color: #f00;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
  }
</style>
</head>
<body>

<div class="clock">
  <!-- Numbers and hands will be dynamically generated here -->
</div>

<script>
  function createNumber(value, angle) {
    const number = document.createElement('div');
    number.className = 'number';
    number.innerText = value;
    number.style.left = `calc(50% + ${42 * Math.sin(angle)}%)`; // Adjusted position
    number.style.top = `calc(50% - ${42 * Math.cos(angle)}%)`; // Adjusted position
    return number;
  }

  function createHand(type, angle, length, color) {
    const hand = document.createElement('div');
    hand.className = type;
    hand.style.transform = `translate(-50%, -${length}px) rotate(${angle}deg)`;
    hand.style.backgroundColor = color;
    return hand;
  }

  function updateClock() {
    const clock = document.querySelector('.clock');
    clock.innerHTML = ''; // Clear previous numbers and hands

    const numbers = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];
    numbers.forEach((number, index) => {
      const angle = (index * 30) * (Math.PI / 180);
      const numberElement = createNumber(number, angle);
      clock.appendChild(numberElement);
    });

    const now = new Date();
    const seconds = now.getSeconds();
    const minutes = now.getMinutes();
    const hours = now.getHours() % 12 + minutes / 60;

    const secondHand = createHand('second', 6 * seconds, 90, '#f00');
    const minuteHand = createHand('minute', 6 * minutes, 80, '#555');
    const hourHand = createHand('hour', 30 * hours, 60, '#333');

    clock.appendChild(secondHand);
    clock.appendChild(minuteHand);
    clock.appendChild(hourHand);

    setTimeout(updateClock, 1000); // Update every second
  }

  updateClock(); // Initial call
</script>

</body>
</html>