My first JavaScript Project

JavaScript
1

I have created the above code Pen. There is currently no animation, but I wish to animate the “SVG” through Javascript to convert this into a working clock.

Guys,

can we move in steps such as:

  1. What maths functions will be needed.
  2. What should be the approach → perhaps a breakdown of the steps.

#Objective:

To learn the Javascript, step-by-step by working on small live projects like this.

Possibly this may be animated through CSS; If yes, we can learn that way also, but we will also develop this through Javascript.

2

The MOD operator is the most useful math tool for clocks.
I presume that you want the hour hand moving as the time ticks by, so that at halfpast three, the hour hand is halfway between the 3 and the 4?

To easily achieve that, you give the number number of seconds that have elapsed this 12-hour period, and divide by the total number of seconds (that being 606012) to get the appropriate ratio.

Imagine for example that the time is 10:15:30. The rotations that we want on the hands are:

  • second hand: 180 degrees
  • minute hand: 45 + a bit
  • hour hand: 270+30 + a bit

There are a total of 36930 seconds at 10:15:30 and we can use that 36930 to get the appropriate angles.

  • second angle = 36930 % 60 / 60 = 0.5 = 180 degrees
  • minute hand = 36930 % (60 * 60) / (60 * 60) = 0.258333 = 93 degrees
  • hour angle = 36930 / (60 * 60 * 12) = 0.85486111 = 307.75 degrees

Which can be turned into some functions, like:

var TAU = 2 * Math.PI;

function getSecondAngle(seconds) {
  var ratio = seconds % 60 / 60;
  return {
    deg: ratio * 360,
    rad: ratio * TAU
  };
}
function getMinuteAngle(seconds) {
  var ratio = seconds % (60 * 60) / (60 * 60);
  return {
    deg: ratio * 360,
    rad: ratio * TAU
  };
}
function getHourAngle(seconds) {
  var ratio = seconds % (60 * 60 * 12) / (60 * 60 * 12);
  return {
    deg: ratio * 360,
    rad: ratio * TAU
  };
}

Now be warned, these functions are all untested from the top of my head, but they seem to be the right way of doing things.

I’ve had the function return values in both degrees and radians, so that we can get the value that’s appropriate to either type of situation, depending on what we need.

Once you have the appropriate angles of the hands, it’s just a matter of applying that as a rotation to the svg elements. Rotating them around an appropriate pivot point shouldn’t be too hard either.

1 Like
3

Instead of going with my strange ramblings though, I recommend that you check out the following tutorial: https://cssanimation.rocks/clocks/

1 Like
4

Hi there @Paul_Wilkins sir and all,

here is the full code form the resource where I am learning →

#Question# 1

var date = new Date();
let thehr = date.getHours();
let themin = date.getMinutes();
let thesec = date.getSeconds();

what is this actually doing here:

var date = new Date();

I could not make much understanding out of this.

Instead of var why is let used. what advantage does it have over the var?

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.