What is the most effective way to maintain the continuity of variable data?

I have devised a unique analog clock that operates differently from the traditional method - it has 30 hours in a day.

According to this clock:

  • 12 seconds = 1 minute
  • 12 minutes = 1 hour

The 'Second-hand' must complete one circle in 12 steps. Once it completes a circle, the 'minute-hand' moves forward by one step. Similarly, the 'minute-hand' needs to complete a circle in 12 steps as well. When the 'minute-hand' finishes a circle, the hour hand then advances by one step, following 30 steps to cover the entire circle.

However, there seems to be an issue with the 'minute-hand' movement in this program.

javascripthtmlcss

Answer №1

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 += 500;
    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>

To test out the clock functionality differently, I have adjusted the speed settings. By removing the Math.floor part, the ticking effect can be eliminated, allowing the minutes hand to move slightly every second.

Answer №2

MinuteDeg calculation needs correction. The accurate method is:

const minuteDeg = (sinhalaMinutes + sinhalaSeconds / 144) * 360;

Verify the outcome:

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 / 144) * 360; // 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;
}

/* Rest of the CSS code remains the same*/


<!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>
  <!-- HTML structure remains the same -->
</body">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for conducting an Ajax request?

Currently, I am deeply involved in a personal project to enhance my skills with Rails. The project involves developing a task management application that encompasses three primary states: todo, in progress, and done. After numerous days of trial and error, ...

javascriptruby-on-railsajaxruby-on-rails-5

What is the best way to conceal content within a URL while still transmitting it to the server using node.js and express?

I have been trying to figure out how to hide certain content from the URL, but still need to send that information to the server in my Express app. So far, I haven't found any solutions that work. For example, if I have a URL like www.abc.com/viewblo ...

javascriptnode.jsurlexpressurl-rewriting

How can I determine the size of the custom options dropdown in Magento?

I'm facing a challenging issue that I can't seem to crack. It might be because I'm still learning the ropes and struggling with technical jargon. Please bear with me as I try to explain my problem. Here is a summary of what I'm trying ...

phpjavascriptmagento

How to target a class in jQuery that contains two specific strings

There are multiple images in my HTML, each assigned two classes. Here's a snippet of the relevant code: class = "thing other0-a" class = "thing other1-a" class = "thing other2-a" class = "thing other3-a" class = ...

javascriptjqueryclass

Tax calculator that combines item prices and applies tax multiplication

Struggling to crack the code for my calculator. Despite consulting my textbook, I can't seem to figure out why it won't calculate properly. Any advice or tips would be greatly appreciated. <html> <head> <title> Total Calculator ...

javascriptdom-events

Resolved issue with maintaining scroll position after adjustments to scroll height

Currently, I am in the process of creating a chatroom that includes pagination. The issue I am encountering is related to loading old messages when the scroll height reaches 0. However, unlike platforms such as Facebook and Slack, even when the scroll he ...

javascripthtmlcssreactjsnext.js

Creating JavaScript Powered Pie Charts

I am seeking a lightweight JavaScript pie chart option to replace PlotKit, as the library is too large for my low bandwidth. Ideally, I am looking for a compact and efficient solution in either JavaScript or jQuery. ...

javascriptjquerypie-chart

What could be causing the unexpected behavior of the flex property?

Check out the code snippet below: @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap"); * { box-sizing: border-box; margin: 0; padding: ...

htmlcssflexboxresponsive-design

Performing simultaneous updates to multiple records using CAML/jQuery in Sharepoint (Batch updates)

I am working on updating multiple records in Share Point using jQuery and CAML queries. While it's easy to update a single record with the current code, I need to handle 20 Products simultaneously for this particular project. Instead of looping throug ...

javascriptjqueryajaxsharepointcaml

"Troubleshooting: Why is the external JavaScript not loading on my WordPress

I've been working on my first WordPress theme and I ran into an issue while trying to load external JavaScript. Instead of loading on the page, it's loading in the wp-admin area. Here is a snippet from my functions.php file: wp_enqueue_script(& ...

javascriptphpjquerywordpress

Choose does not showcase the updated value

My form contains a form control for currency selection Each currency object has the properties {id: string; symbol: string}; Upon initialization, the currency select component loops through an array of currencies; After meeting a specific condition, I need ...

htmlangulartypescriptforms

Is there a method for configuring NextAuth to utilize the /src/app directory instead?

Is there a specific method to instruct NextAuth to redirect to this particular directory, but within the src/app directory? All of my routes are now located there due to the changes in Next.js 13. Below is an example of the code I am using: export const a ...

javascriptreactjsnext.jsnext-auth

What are some ways to blend arrays and objects in Javascript?

Input Array: [{name: xyz}, {name: abc}, {name: def}], [ {name: ghi}, {name: jkl} ] Desired Output: New Array: [{name: xyz}, {name: abc}, {name: def}, {name: ghi}, {name: jkl}] ...

javascriptarrays

Feeling lost when it comes to CSS selectors

Alright, I need some help with this code snippet: <div id="carousel"> <div class="active"><img id="pic1" src="http://i.imgur.com/gWGqZly.png" /></div> <div><img id="pic2" src="http://i.imgur.com/mC1FD81.png" />& ...

htmlcsscss-selectors

What is the best approach for deleting an element from an array based on its value

Is there a way to eliminate an element from a JavaScript array? Let's say we have an array: var arr = ['three', 'seven', 'eleven']; I want to be able to do the following: removeItem('seven', arr); I researc ...

javascriptarrays

Tips to stop automatic scrolling when tapping on a tab

Currently, I am encountering an issue with the tabs in my project. Whenever I click on a tab, the page scrolls down and I can't seem to figure out why. Below is the snippet of my HTML code: <ul class="list"> <li class="tab1 active"> ...

javascriptjqueryhtml

The webpack development server is failing to inject CSS

Upon reviewing the stdout output after executing the script that triggers webpack-dev-server, it seems like the scss | css files are being processed and emitted correctly. However, when visiting "localhost:8080" in devtools, the CSS is not injected by the ...

javascriptcssnode.jsexpresswebpack-dev-server

Implementing nth-child selector in vanilla JavaScript

Is there a way to dynamically change the number within the nth-child brackets when clicking on a button? For instance, can I click a button and have the next slide in a slideshow appear? .slideshow:nth-child(n){} I specifically need to modify n using only ...

javascripthtmlcss

What is the best way to organize, truncate, and transform elements in an array?

Trying to rearrange the array, then display only the last n elements, and finally map it. Here is the current working version (in react syntax) with sorting and mapping, missing the slicing part: {Object.keys(dataObj) .sort( ...

javascriptarraysreactjssortingslice

Firefox and Internet Explorer do not support CSS transitions

I'm trying to achieve a simple style with the following code: li, a { display: inline-block; } li { transition: top 0.3s; } li:hover { position: relative; top: 3px; } This style is intended to make some icons in a menu sink down ...

csscss-transitions