Clock that changes color

Question

i have the following code in Javascript

    function carregar() {
var msg = document.getElementById('msg')
var img = document.getElementById('imagem')
var data = new Date()
var hora = data.getHours()
var min = data.getMinutes()
var seg = data.getSeconds()
setTimeout('carregar()', 500)
msg.innerHTML = `Agora são ${hora}:${min}:${seg}.`
if (hora >= 0 && hora < 12) {
    //BOM DIA!
    img.src = 'amanhecer-redonda.png'
    document.body.style.background = '#FAF1FA'
} else if (hora >= 12 && hora < 18) {
    //BOA TARDE!
    img.src = 'entardecer-redonda.png'
    document.body.style.background = '#EFC529'
} else {
    //BOA NOITE!
    img.src = 'anoitecer-redonda.png'
     document.body.style.background = '#4428FF'
}}

However, I would like to convert it to Jquery, as a way of studies. I am since yesterday trying, I got here. They could give me a light?

$(function carregar () {
var msg = $('#msg')
var img = $('#imagem')
var data = new Date()
var hora = data.getHours()
var min = data.getMinutes()
var seg = data.getSeconds()
setTimeout('carregar ()', 500).html(`Agora são ${hora}:${min}:${seg}.`)
    if (hora >= 0 && hora < 12) {
        //BOM DIA!
        img.src = 'amanhecer-redonda.png'
        document.body.style.background = '#FAF1FA'
    } else if (hora >= 12 && hora < 18) {
        //BOA TARDE!
        img.src = 'entardecer-redonda.png'
        document.body.style.background = '#EFC529'
    } else {
        //BOA NOITE!
        img.src = 'anoitecer-redonda.png'
        document.body.style.background = '#4428FF'
    }

    }}

Answer 1

It would be something like

function carregar() {
    var $msg = $('#msg');
    var $img = $('#imagem');
    var data = new Date();
    var hora = data.getHours();
    var min = data.getMinutes();
    var seg = data.getSeconds();
    setTimeout('carregar()', 500)
    $msg.html(`Agora são ${hora}:${min}:${seg}.`);
    if (hora >= 0 && hora < 12) {
        //BOM DIA!
        $img.attr('src', 'amanhecer-redonda.png');
        $('body').css({background: '#FAF1FA'});
    } else if (hora >= 12 && hora < 18) {
        //BOA TARDE!
        $img.attr('src', 'entardecer-redonda.png');
        $('body').css({background: '#EFC529'});
    } else {
        //BOA NOITE!
        $img.attr('src', 'anoitecer-redonda.png');
        $('body').css({background: '#4428FF'});

    }
}

First we change the way to recover the elements using $(). So where had document.getElementById('msg') was placed $('#msg') which is how to retrieve elements in Jquery. The same goes for the element image.

After that it replaces innerHTML by the method .html() and also the way to change the attributes with attr() and the style of the body with css().

Note that in the variables in which we recovered the elements was placed the dollar sign. There’s nothing special about it but it tells us that that variable is a selected element.

Some improvements

Finally, it is possible to improve this code by making use of setInterval() instead of setTimeout() recursively.

The element body can also be created at the beginning of the function along with others. The idea is the same, just be aware that in this case there will be no fence, it would be something like:

var $body = $('body');

Then when it was time to change the background color just do

$body.css({background: '#FAF1FA'});