auto_bg_color_changer/script.js at main · SanjayRai98/auto_bg_color_changer · 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
    let button = document.getElementById("button");
    let body =  document.querySelector('body');
    let auto = document.getElementById("auto_button");
    let con = document.getElementById("container");
    let m_bt = document.getElementById('cp_manual');
    let a_bt = document.getElementById('cp_auto');
    let heading = document.getElementById('con_heading');
    let control = document.getElementById('control');
    let nav = document.getElementById('nav');


    body.style.backgroundColor = "lightgrey";

    m_bt.onclick = () => {
        heading.innerHTML = "";
        button.style.display = "inline";
        auto.style.display = "none";
    }

    a_bt.onclick =() => {
        heading.innerHTML = "";
        button.style.display = "none";
        auto.style.display = "inline";
    }

    control.onclick = () => {
        var style_value = nav.currentStyle || window.getComputedStyle(nav);
        if(style_value.left == '-240px'){
            nav.style.left = "0px";
            con.style.marginLeft = "240px";
            control.style.left = "202px";
            control.style.top = "4px";
            control.innerHTML = "X";
        }else if (style_value.left == '0px') {
            nav.style.left = "-240px";
            con.style.marginLeft = "0px";
            control.style.left = "4px";
            control.style.top = "1%";
            control.innerHTML = "+";
        } else {
            alert("Side nav is not working");
        }
    }

    let color = ["lightgrey","green","blue","black","cyan","red","blueviolet","chartreuse","brown","chocolate"];

    button.onclick = () => {
        let x = Math.floor(Math.random() * 10);
        body.style.backgroundColor = color[x];
    }

    let myInterval;// = null;
    let interval = false;

    auto.onclick = function(){
        auto.innerHTML = "Stop";
        auto.style.width = "90px";
        if(interval == false){
            interval = true;
            myInterval = setInterval(() => {
        let x = Math.floor(Math.random() * 10);
        body.style.backgroundColor = color[x];
    }, 1000);
        }else if(interval == true){
            clearInterval(myInterval);
            interval = false;
            auto.style.width = "220px";
            auto.innerHTML = "Auto Change Color";
        }else{
            alert("Auto change function is not working");
        }
    }