The transform operation has no effect whatsoever

Just a quick intro, I created an animated clock using CSS and HTML for homework, but now I want to enhance it by adding JavaScript functionality. I tried to sync the clock hands with the current time using JS, but for some reason, the animation always starts with the hands at the 12 o'clock position (its default state):

let seconds = document.getElementById("seconds");
let hours = document.getElementById("hours");
let minutes = document.getElementById("minutes");
let date = new Date();
let dateMinutes = date.getMinutes();
let dateSeconds = date.getSeconds();
let dateHours = date.getHours();
let currentHour = dateHours + date.getTimezoneOffset();
console.log(dateHours, dateMinutes, dateSeconds);
seconds.style.animationPlayState = "paused";
minutes.style.animationPlayState = "paused";
hours.style.animationPlayState = "paused";
if (currentHour > 12) {
  currentHour = currentHour / 2;
}
let percentHours = (360 / 43200) * (currentHour * 3600);
let percentMin = dateMinutes * 6;
let percentSec = dateSeconds * 6;
seconds.style.transform = "rotateZ(" + percentSec + "deg)";
minutes.style.transform = "rotateZ(" + percentMin + "deg)";
hours.style.transform = "rotateZ(" + percentHours + "deg)";
seconds.style.mozTransform = "rotateZ(" + percentSec + "deg)";
minutes.style.mozTransform = "rotateZ(" + percentMin + "deg)";
hours.style.mozTransform = "rotateZ(" + percentHours + "deg)";
seconds.style.webkitTransform = "rotate(" + percentSec + "deg)";
minutes.style.webkitTransform = "rotate(" + percentMin + "deg)";
hours.style.webkitTransform = "rotate(" + percentHours + "deg)";
seconds.style.animationPlayState = "running";
minutes.style.animationPlayState = "running";
hours.style.animationPlayState = "running";
#clock {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  border: 15px solid rgba(29, 29, 29, 1);
  border-radius: 50%;
  position: relative;
  background-color: rgba(117, 141, 163, 0.37);
  background-image: url(clock2.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#seconds {
  position: absolute;
  width: 2px;
  height: 180px;
  border-top: 2px solid #131111;
  border-left: 2px solid #131111;
  border-right: 2px solid #131111;
  border-radius: 4px;
  background-color: rgb(255, 28, 17);
  top: 20px;
  left: 197px;
  animation: rotarSeg 60s infinite;
  animation-timing-function: steps(60);
  transform-origin: bottom center;
}

#minutes {
  position: absolute;
  width: 4px;
  height: 160px;
  right: 196px;
  border-top: 4px solid #131111;
  border-left: 2px solid #131111;
  border-right: 2px solid #131111;
  border-radius: 50%;
  background-color: rgb(246, 248, 248);
  margin-top: 38px;
  animation: rotarSeg 3600s infinite;
  animation-timing-function: steps(60);
  transform-origin: bottom center;
}

#hours {
  position: absolute;
  width: 6px;
  height: 120px;
  top: 74px;
  left: 193px;
  border-top: 6px solid #131111;
  border-left: 4px solid #131111;
  border-right: 4px solid #131111;
  border-radius: 50%;
  background-color: rgba(255, 246, 193, 0.705);
  animation: rotar 43200s infinite linear;
  transform-origin: bottom center;
}

Any suggestions as to why the HTML file doesn't work when executed on a server?

javascripthtmlcssanimationtransform

Answer №1

const sec = document.getElementById("sec");
const hrs = document.getElementById("hrs");
const mins = document.getElementById("mins");
const today = new Date();
const currentMins = today.getMinutes();
const currentSecs = today.getSeconds();
const currentHrs = today.getHours();
const updatedHrs = currentHrs + today.getTimezoneOffset();
console.log(currentHrs, currentMins, currentSecs);
sec.style.animationPlayState = "paused";
mins.style.animationPlayState = "paused";
hrs.style.animationPlayState = "paused";
if (updatedHrs > 12) {
  updatedHrs = updatedHrs / 2;
}
const percentageHrs = (360 / 43200) * (updatedHrs * 3600);
const percentageMins = currentMins * 6;
const percentageSecs = currentSecs * 6;
sec.style.transform = "rotateZ(" + percentageSecs + "deg)";
mins.style.transform = "rotateZ(" + percentageMins + "deg)";
hrs.style.transform = "rotateZ(" + percentageHrs + "deg)";
sec.style.mozTransform = "rotateZ(" + percentageSecs + "deg)";
mins.style.mozTransform = "rotateZ(" + percentageMins + "deg)";
hrs.style.mozTransform = "rotateZ(" + percentageHrs + "deg)";
sec.style.webkitTransform = "rotate(" + percentageSecs + "deg)";
mins.style.webkitTransform = "rotate(" + percentageMins + "deg)";
hrs.style.webkitTransform = "rotate(" + percentageHrs + "deg)";
sec.style.animationPlayState = "running";
mins.style.animationPlayState = "running";
hrs.style.animationPlayState = "running";
#clock {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  border: 15px solid rgba(29, 29, 29, 1);
  border-radius: 50%;
  position: relative;
  background-color: rgba(117, 141, 163, 0.37);
  background-image: url(clock2.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#sec {
  position: absolute;
  width: 2px;
  height: 180px;
  border-top: 2px solid #131111;
  border-left: 2px solid #131111;
  border-right: 2px solid #131111;
  border-radius: 4px;
  background-color: rgb(255, 28, 17);
  top: 20px;
  left: 197px;
  animation: rotateSec 60s infinite;
  animation-timing-function: steps(60);
  transform-origin: bottom center;
}

#mins {
  position: absolute;
  width: 4px;
  height: 160px;
  right: 196px;
  border-top: 4px solid #131111;
  border-left: 2px solid #131111;
  border-right: 2px solid #131111;
  border-radius: 50%;
  background-color: rgb(246, 248, 248);
  margin-top: 38px;
  animation: rotateSec 3600s infinite;
  animation-timing-function: steps(60);
  transform-origin: bottom center;
}

#hrs {
  position: absolute;
  width: 6px;
  height: 120px;
  top: 74px;
  left: 193px;
  border-top: 6px solid #131111;
  border-left: 4px solid #131111;
  border-right: 4px solid #131111;
  border-radius: 50%;
  background-color: rgba(255, 246, 193, 0.705);
  animation: rotate 43200s infinite linear;
  transform-origin: bottom center;
}
<span id="hrs"></span>
<span id="mins"></span>
<span id="sec"></span>

To ensure it runs:

The main issue is that the variable sec is not defined. Please refer to the corrections made in the initial 3 lines of JS code.

Incorporated placeholder HTML and amended references in the first 3 lines of the JavaScript code for proper functionality.

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

Terminate a targeted recipient following the completion of the on event

I am currently running a node service with socket.io and utilizing an event emitter to send updates based on user context. For example, context A may have users 1, 2, and 3 while context B has users 4 and 5. Once a successful connection is established wit ...

javascriptnode.jssocket.iodom-events

The getElementByID function will return null in this instance, as it has not been loaded

Hello everyone, I am facing an issue while trying to access an element by its ID in JavaScript as it keeps returning null. This problem arises because the element is not fully loaded when the DOM is initially created, due to a plugin called Restrict Conte ...

javascripthtmldomloadgetelementbyid

Exploring the concept of union types and typeguards in TypeScript

I'm struggling with this code snippet: function test(): any[] | string { return [1,2] } let obj: any[] = test(); When I try to run it in vscode, I get the following error message: [ts] Type 'string | any[]' is not assignable to type & ...

javascriptangulartypescripttypes

A neutral-toned backdrop that briefly shows up for a quick 7-second interlude during a background-image

Recently I created a website. On this website, there is a feature where 3 images change every 7 seconds for a total of 3 cycles. The code snippet used for this functionality is as follows: var swap; function run(interval, frames) { var int = 1; ...

javascriptjqueryhtmlcss

Sending a post request from JavaScript to Django Rest Framework

I am working with a DFR api endpoint: url = http://example.com/api/data/ The URL of the page where I am running JavaScript code is: http://example.com/page/1/ I have logged in as User1 in my browser. POST request - from DRF browser API - successful. G ...

javascriptdjango-rest-frameworkaxios

State not properly updating in the most recent version of Next.js

"use client"; import { useState , useEffect } from "react"; import React from 'react' function form() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [disable, ...

javascriptreactjsnext.js

Show a table with rows that display an array from a JSON object using JavaScript

My current code includes JSON data that I need to display in table rows, but I'm struggling to understand how to do so effectively. The output I am currently seeing is all the rows from the array stacked in one row instead of five separate rows as in ...

javascripthtmljson

Is there a way for me to make the two form fields expand and fill the gap between them?

I've created a form with the first name and last name fields displayed horizontally next to each other, as shown in the image. When a user clicks on a field, it should change color (still pending coding). However, there seems to be an unwanted gap be ...

htmlcss

Troubleshooting Vue.js nested v-for with <tr> tag problem

Why does Vue complain about undefined properties when I try nesting a <tr> inside a <tr> with a v-for binding on each? <table> <thead></thead> <tbody> <tr v-for="item in items"> <td>{{ item.nam ...

htmlvue.jshtml-tablebindingv-for

Safari experiences a decrease in speed when multiple checkbox elements are present

While using Safari, I have encountered a problem. The performance of interacting with a text input is significantly affected when there are numerous type="checkbox" elements on the page. This issue appears to be more pronounced in Safari compared to Chrom ...

htmlperformancedomsafari

Why does the combination of "minus, space, minus" result in the "plus" operation?

When running the command 'node -e 'console.log(- -1)' it outputs 1, which is expected. However: When executing the command 'node -e 'console.log(1 - - 1)' it displays 2, which puzzles me. It seems like when subtracting a ne ...

javascript

Verifying username using an Ajax call

Currently, I am working on developing a signup form using HTML/CSS/JS that involves utilizing an AJAX request to interact with the server. Within my jQuery code, I have implemented a method for validating the form inputs, which also triggers a function (en ...

javascriptphpjqueryhtmlajax

Implementing css padding to text preceding images

My content includes text and images in a mix, and I wish to add CSS margin to elements that appear directly before and after the images. Unfortunately, the placement of these elements can vary and is beyond my control. The code snippet below demonstrates ...

htmlcss

Even with a correct XPath and the element present, Webdriver inexplicably throws a NoSuchElementException

There are 20 Google review score elements on a page like this. https://i.sstatic.net/9ErFS.png The XPath for each element is: //ol/div[2]/div/div/div[2]/div[%s]/div/div[3]/div/a[1]/div/div/div[2]/div/span To extract the review counts using Python and W ...

pythonhtmldomxpathselenium-webdriver

The comparison between 'typeof error' and 'undefined' reveals that the data is

I am encountering an issue with a piece of code that is generating an error, and I have been unable to find a suitable solution in JavaScript. var data = new FormData(); $.each(files, function(key, obj) { data.append(o ...

javascriptjqueryajaxprestashop

Change the color of the border to match the background color

I have a parent container with a unique background color. Inside the parent container, there is an unordered list (ul) with multiple list items (li), each having a distinct color and a brighter border color. Now, I am looking to extract the border color of ...

javascriptjqueryhtmlcss

Converting nested JSON structures from one format to another using JavaScript

I have been attempting to convert an AVRO schema into an ElasticSearch index template. Both schemas are in JSON format with some specific considerations to keep in mind during the transformation process. I initially tried using recursion to extract all nes ...

javascriptnode.jsjsonrecursiontransformation

use a jQuery function to submit a form

I have an HTML page with a form, and I want to display a specific div when the form is successfully submitted. The div code is as follows: <div class="response" style="display: none;"> <p>You can download it <a href="{{ link }}">here&l ...

javascriptjqueryhtmlajaxdjango

Dynamically loading an AngularJS controller

I am faced with the challenge of integrating an Angular app with dynamically loaded controllers into an existing webpage. Below is a code snippet where I have attempted to achieve this based on my understanding of the API and some research: // Create mod ...

javascriptangularjs

Customize your Shopify Messenger icon using JavaScript!

Shopify recently introduced a new feature that allows customers to contact store owners through messenger. My client has requested me to customize the appearance of this icon with their branded icon instead. https://i.stack.imgur.com/uytpd.png I have not ...

javascriptshopify