Scribd
Upload
26 views2 pages

Interactive Clock with Slider

This document contains code for building an interactive digital clock with hour, minute and second hands that rotate based on the current time. It also includes code for a slider component that can be dragged to change the playback rate of the clock.

Uploaded by

Aadhil Negim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
26 views2 pages

Interactive Clock with Slider

This document contains code for building an interactive digital clock with hour, minute and second hands that rotate based on the current time. It also includes code for a slider component that can be dragged to change the playback rate of the clock.

Uploaded by

Aadhil Negim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

/* clock */

const hours = [Link]('.hours');


const minutes = [Link]('.minutes');
const seconds = [Link]('.seconds');

/* play button */
const play = [Link]('.play');
const pause = [Link]('.pause');
const playBtn = [Link]('.circle__btn');
const wave1 = [Link]('.circle__back-1');
const wave2 = [Link]('.circle__back-2');

/* rate slider */
const container = [Link]('.slider__box');
const btn = [Link]('.slider__btn');
const color = [Link]('.slider__color');
const tooltip = [Link]('.slider__tooltip');

clock = () => {
let today = new Date();
let h = ([Link]() % 12) + [Link]() / 59; // 22 % 12 = 10pm
let m = [Link](); // 0 - 59
let s = [Link](); // 0 - 59

h *= 30; // 12 * 30 = 360deg
m *= 6;
s *= 6; // 60 * 6 = 360deg

rotation(hours, h);
rotation(minutes, m);
rotation(seconds, s);

// call every second


setTimeout(clock, 500);
}

rotation = (target, val) => {


[Link] = `rotate(${val}deg)`;
}

[Link] = clock();

dragElement = (target, btn) => {


[Link]('mousedown', (e) => {
onMouseMove(e);
[Link]('mousemove', onMouseMove);
[Link]('mouseup', onMouseUp);
});

onMouseMove = (e) => {


[Link]();
let targetRect = [Link]();
let x = [Link] - [Link] + 10;
if (x > [Link]) { x = [Link]};
if (x < 0){ x = 0};
btn.x = x - 10;
[Link] = btn.x + 'px';

// get the position of the button inside the container (%)


let percentPosition = (btn.x + 10) / [Link] * 100;

// color width = position of button (%)


[Link] = percentPosition + "%";

// move the tooltip when button moves, and show the tooltip
[Link] = btn.x - 5 + 'px';
[Link] = 1;

// show the percentage in the tooltip


[Link] = [Link](percentPosition) + '%';
};

onMouseUp = (e) => {


[Link]('mousemove', onMouseMove);
[Link] = 0;

[Link]('mouseover', function() {
[Link] = 1;
});

[Link]('mouseout', function() {
[Link] = 0;
});
};
};

dragElement(container, btn);

/* play button */
[Link]('click', function(e) {
[Link]();
[Link]('visibility');
[Link]('visibility');
[Link]('shadow');
[Link]('paused');
[Link]('paused');
});

You might also like