Color-change/script.js at main · Gvstave/Color-change · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
document.addEventListener('DOMContentLoaded', () => {
    var sound = new Audio('sound.mp3');
const body = document.getElementById('body');
const state = document.getElementById('state');

let isPlaying = false;
let intervalId = null;

state.textContent = 'Play';

state.addEventListener('click', function () {
    if (!isPlaying) {
        isPlaying = true;
        state.textContent = 'Stop';
        play()
        intervalId = setInterval(play, 2000);
    } else {
        isPlaying = false;
        state.textContent = 'Play';
        stop();
        clearInterval(intervalId);
    }
});

function play() {
    sound.play();
    body.style.background = `linear-gradient(270deg, ${leftColor()}, ${rightColor()})`;
}

function stop() {
    sound.pause();
    sound.currentTime = 0;
    body.style.background = 'black';
}

function leftColor() {
    return `rgb(${randomColor()}, ${randomColor()}, ${randomColor()})`;
}

function rightColor() {
    return `rgb(${randomColor()}, ${randomColor()}, ${randomColor()})`;
}

function randomColor() {
    return Math.floor(Math.random() * 256);
}

})