Clock/script.js at main · fherexe/Clock · 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
function clock () {
    const areaDoRelogio = document.querySelector(".relogio");
    const horaAgora = new Date();
    const horas = horaAgora.getHours ();
    const minutos = horaAgora.getMinutes ();
    const segundos = horaAgora.getSeconds ();
    const formatoHoras = horas.toString ().padStart (2, "0");
    //const formatoHoras = 2
    const formatoMinutos = minutos.toString ().padStart (2, "0");
    const formatoSegundos = segundos.toString ().padStart (2, "0");
         //.padStart ("0"); definir que o valor vai começar com 0

    areaDoRelogio.textContent = `${formatoHoras}:${formatoMinutos}:${formatoSegundos}`

    const frase = document.querySelector('.frase');
``
    dia = new Array ("Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-Feira", "Sexta-Feira", "Sábado");

    mes = new Array ("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro");

    //Array guardar varias informações, equivalente a uma váriavel, variedade, arranjo. Um dado que armazena varios elementos, estrutura de dados.

    catImg = document.querySelector("#cat-img");
    hoje = new Date();

    frase.innerHTML =
    `${dia[hoje.getDay()]},
     ${hoje.getDate().toString().padStart(2, 0)} de
     ${mes[hoje.getMonth()]} de ${hoje.getFullYear()}
    `
    //Aspas `` libera o uso de placeholders ${}


    if (formatoHoras >=0 && formatoHoras <12) {
        document.querySelector("main").setAttribute("class","morning-box");
        document.body.style.backgroundImage = "url('https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')"

        catImg.src='https://i0.wp.com/dianaurban.com/wp-content/uploads/2017/07/01-cat-stretching-feet.gif?resize=500%2C399&ssl=1';
    }

    else if(formatoHoras >=12 && formatoHoras <19) {
        document.body.style.backgroundImage = "url('https://images.unsplash.com/photo-1592281175375-a73f0a55127f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1504&q=80')";

        document.querySelector("main").setAttribute("class","afternoon-box");

        catImg.src='https://media.tenor.com/NQfq1liFH-8AAAAM/byuntear-sad.gif'
    }

    else {
        document.body.style.backgroundImage = "url('https://images.unsplash.com/photo-1506606401543-2e73709cebb4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')";

        document.querySelector("main").setAttribute("class","night-box");

        catImg.src='https://gifs.eco.br/wp-content/uploads/2022/02/animados-gifs-de-gatos-engracados-14.gif'
    }
}

setInterval(clock, 1000);


//Operadores lógicos não  estão funcionando pois o dado que estão tentando ler é de uma string