Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

How to continue variable data respectively?

byMR
December 14, 2023

I create a analog clock away from the traditional method.
It have 30 hours

12 seconds = 1 minute
12 minutes = 1 hour

‘Second-hand’ need to complete one circle by 12 steps.
when ‘Second-hand’ complete one circle then, ‘minute-hand’ need to move one step.
like that ‘minute-hand’ need to complete a circle by 12 steps too.
When ‘minute-hand’ complete one circle then, hour circle need to move one step.
In this way ‘hour-hand’ need to complete entire circle’by 30 steps.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

But in this program its unable to move ‘minute-hand’ properly.

document.addEventListener("DOMContentLoaded", function () {
  const hourHand = document.querySelector("[data-hour-hand]");
  const minuteHand = document.querySelector("[data-minute-hand]");
  const secondHand = document.querySelector("[data-second-hand]");

  let totalMilliseconds = 0;
  let previousSecond = 0;
  let secondsCounter = 0;

  function updateClock() {
    // Calculate Sinhala time with 12 minutes per hour
    const sinhalaHours = Math.floor(totalMilliseconds / (30 * 60 * 12 * 1000));
    const remainingMilliseconds = totalMilliseconds % (30 * 60 * 12 * 1000);
    const sinhalaMinutes = Math.floor(remainingMilliseconds / (60 * 12 * 1000));
    const sinhalaSeconds = Math.floor((remainingMilliseconds % (60 * 12 * 1000)) / 1000);

    // Check if a new second circle has started
    if (sinhalaSeconds < previousSecond) {
      // Increment minute only when a new second circle starts
      sinhalaMinutes++;
      // Reset the seconds counter
      secondsCounter = 0;
    }

    // Calculate degrees for each hand
    const hourDeg = (sinhalaHours + sinhalaMinutes / 60) * 360 / 30;
    const minuteDeg = (sinhalaMinutes + sinhalaSeconds % 12) * 360 / 12; // Adjust for 12 steps
    const secondDeg = (sinhalaSeconds % 12) * 360 / 12; // Adjust for 12 steps

    // Apply rotations to the clock hands
    hourHand.style.transform = `rotate(${hourDeg}deg)`;
    minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
    secondHand.style.transform = `rotate(${secondDeg}deg)`;

    // Update the previous second and seconds counter
    previousSecond = sinhalaSeconds;
    secondsCounter++;
  }

  // Update the total milliseconds and the clock every 1000 milliseconds (1 second)
  setInterval(function () {
    totalMilliseconds += 1000;
    updateClock();
  }, 1000);

  // Initial call to set the clock when the page loads
  updateClock();
});
*, *::after, *::before {
  box-sizing: border-box;
  font-family: Gotham Rounded, sans-serif;
}

body {
  background: linear-gradient(to right, hsl(200, 100%, 50%), hsl(175, 100%, 50%));
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.clock {
  width: 700px;
  height: 700px;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 50%;
  border: 2px solid black;
  position: relative;
}

.clock .number {
  --rotation: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotate(var(--rotation));
  font-size: 1.5rem;
}

.clock .number1 { --rotation: 12deg; }
.clock .number2 { --rotation: 24deg; }
.clock .number3 { --rotation: 36deg; }
.clock .number4 { --rotation: 48deg; }
.clock .number5 { --rotation: 60deg; }
.clock .number6 { --rotation: 72deg; }
.clock .number7 { --rotation: 84deg; }
.clock .number8 { --rotation: 96deg; }
.clock .number9 { --rotation: 108deg; }
.clock .number10 { --rotation: 120deg; }
.clock .number11 { --rotation: 132deg; }
.clock .number12 { --rotation: 144deg; }
.clock .number13 { --rotation: 156deg; }
.clock .number14 { --rotation: 168deg; }
.clock .number15 { --rotation: 180deg; }
.clock .number16 { --rotation: 192deg; }
.clock .number17 { --rotation: 204deg; }
.clock .number18 { --rotation: 216deg; }
.clock .number19 { --rotation: 228deg; }
.clock .number20 { --rotation: 240deg; }
.clock .number21 { --rotation: 252deg; }
.clock .number22 { --rotation: 264deg; }
.clock .number23 { --rotation: 276deg; }
.clock .number24 { --rotation: 288deg; }
.clock .number25 { --rotation: 300deg; }
.clock .number26 { --rotation: 312deg; }
.clock .number27 { --rotation: 324deg; }
.clock .number28 { --rotation: 336deg; }
.clock .number29 { --rotation: 348deg; }
.clock .number30 { --rotation: 360deg; }

.clock .hand {
  --rotation: 0;
  position: absolute;
  bottom: 50%;
  left: 50%;
  border: 1px solid white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform-origin: bottom;
  z-index: 10;
  transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}

.clock::after {
  content: '';
  position: absolute;
  background-color: black;
  z-index: 11;
  width: 15px;
  height: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.clock .hand.second {
  width: 3px;
  height: 45%;
  background-color: red;
}

.clock .hand.minute {
  width: 7px;
  height: 40%;
  background-color: #443f3f;
}

.clock .hand.hour {
  width: 10px;
  height: 35%;
  background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="styles.css" rel="stylesheet">
  <script defer src="script.js"></script>
  <title>Clock</title>
</head>
<body>
  <div class="clock">
    <div class="hand hour" data-hour-hand></div>
    <div class="hand minute" data-minute-hand></div>
    <div class="hand second" data-second-hand></div>

    <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 class="number number13">13</div>
    <div class="number number14">14</div>
    <div class="number number15">15</div>
    <div class="number number16">16</div>
    <div class="number number17">17</div>
    <div class="number number18">18</div>
    <div class="number number19">19</div>
    <div class="number number20">20</div>
    <div class="number number21">21</div>
    <div class="number number22">22</div>
    <div class="number number23">23</div>
    <div class="number number24">24</div>
    <div class="number number25">25</div>
    <div class="number number26">26</div>
    <div class="number number27">27</div>
    <div class="number number28">28</div>
    <div class="number number29">29</div>
    <div class="number number30">30</div>
  </div>
</body>
</html>

>Solution :

document.addEventListener("DOMContentLoaded", function () {
  const hourHand = document.querySelector("[data-hour-hand]");
  const minuteHand = document.querySelector("[data-minute-hand]");
  const secondHand = document.querySelector("[data-second-hand]");

  let totalMilliseconds = 0;
  let previousSecond = 0;
  let secondsCounter = 0;

  function updateClock() {
    // Calculate Sinhala time with 12 minutes per hour
    const sinhalaHours = Math.floor(totalMilliseconds / (30 * 60 * 12 * 1000));
    const remainingMilliseconds = totalMilliseconds % (30 * 60 * 12 * 1000);
    const sinhalaMinutes = Math.floor(remainingMilliseconds / (60 * 12 * 1000));
    const sinhalaSeconds = Math.floor((remainingMilliseconds % (60 * 12 * 1000)) / 1000);

    

    

    // Calculate degrees for each hand
    const minutes = (sinhalaSeconds / 12); //calculate minutes, changed %12 to /12 
    const hours = (sinhalaSeconds / 12 /12); //calculate hours

    const hourDeg = Math.floor(hours)* 360 / 30;
    const minuteDeg = Math.floor(minutes) * 360 / 12; // Adjust for 12 steps. Math.floor activates the TICKING effect because it updates only on full minutes. 
    const secondDeg = (sinhalaSeconds % 12) * 360 / 12; // Adjust for 12 steps

    // Apply rotations to the clock hands
    hourHand.style.transform = `rotate(${hourDeg}deg)`;
    minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
    secondHand.style.transform = `rotate(${secondDeg}deg)`;

    // Update the previous second and seconds counter
    previousSecond = sinhalaSeconds;
    secondsCounter++;
  }

  // Update the total milliseconds and the clock every 1000 milliseconds (1 second)
  setInterval(function () {
    totalMilliseconds += 1000;
    updateClock();
  }, 100);

  // Initial call to set the clock when the page loads
  updateClock();
});
*, *::after, *::before {
  box-sizing: border-box;
  font-family: Gotham Rounded, sans-serif;
}

body {
  background: linear-gradient(to right, hsl(200, 100%, 50%), hsl(175, 100%, 50%));
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.clock {
  width: 700px;
  height: 700px;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 50%;
  border: 2px solid black;
  position: relative;
}

.clock .number {
  --rotation: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotate(var(--rotation));
  font-size: 1.5rem;
}

.clock .number1 { --rotation: 12deg; }
.clock .number2 { --rotation: 24deg; }
.clock .number3 { --rotation: 36deg; }
.clock .number4 { --rotation: 48deg; }
.clock .number5 { --rotation: 60deg; }
.clock .number6 { --rotation: 72deg; }
.clock .number7 { --rotation: 84deg; }
.clock .number8 { --rotation: 96deg; }
.clock .number9 { --rotation: 108deg; }
.clock .number10 { --rotation: 120deg; }
.clock .number11 { --rotation: 132deg; }
.clock .number12 { --rotation: 144deg; }
.clock .number13 { --rotation: 156deg; }
.clock .number14 { --rotation: 168deg; }
.clock .number15 { --rotation: 180deg; }
.clock .number16 { --rotation: 192deg; }
.clock .number17 { --rotation: 204deg; }
.clock .number18 { --rotation: 216deg; }
.clock .number19 { --rotation: 228deg; }
.clock .number20 { --rotation: 240deg; }
.clock .number21 { --rotation: 252deg; }
.clock .number22 { --rotation: 264deg; }
.clock .number23 { --rotation: 276deg; }
.clock .number24 { --rotation: 288deg; }
.clock .number25 { --rotation: 300deg; }
.clock .number26 { --rotation: 312deg; }
.clock .number27 { --rotation: 324deg; }
.clock .number28 { --rotation: 336deg; }
.clock .number29 { --rotation: 348deg; }
.clock .number30 { --rotation: 360deg; }

.clock .hand {
  --rotation: 0;
  position: absolute;
  bottom: 50%;
  left: 50%;
  border: 1px solid white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform-origin: bottom;
  z-index: 10;
  transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}

.clock::after {
  content: '';
  position: absolute;
  background-color: black;
  z-index: 11;
  width: 15px;
  height: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.clock .hand.second {
  width: 3px;
  height: 45%;
  background-color: red;
}

.clock .hand.minute {
  width: 7px;
  height: 40%;
  background-color: #443f3f;
}

.clock .hand.hour {
  width: 10px;
  height: 35%;
  background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="styles.css" rel="stylesheet">
  <script defer src="script.js"></script>
  <title>Clock</title>
</head>
<body>
  <div class="clock">
    <div class="hand hour" data-hour-hand></div>
    <div class="hand minute" data-minute-hand></div>
    <div class="hand second" data-second-hand></div>

    <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 class="number number13">13</div>
    <div class="number number14">14</div>
    <div class="number number15">15</div>
    <div class="number number16">16</div>
    <div class="number number17">17</div>
    <div class="number number18">18</div>
    <div class="number number19">19</div>
    <div class="number number20">20</div>
    <div class="number number21">21</div>
    <div class="number number22">22</div>
    <div class="number number23">23</div>
    <div class="number number24">24</div>
    <div class="number number25">25</div>
    <div class="number number26">26</div>
    <div class="number number27">27</div>
    <div class="number number28">28</div>
    <div class="number number29">29</div>
    <div class="number number30">30</div>
  </div>
</body>
</html>

For testing purpose I have made the clock fast, change it. remove the Math.floor part to remove the ticking effect and move the minutes a little bit hand every second

byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading