Automatically change CSS every date

Question

I want to create a menu that every day one of the links changes the style using the same computer date...

Example of javascript:

function _getDateEnd ($element) {
  var date = new Date($element.getAttribute('data-end'));

  return !isNaN(date) ? date : new Date();
}

function _timePad (n) {
  return n < 10 ? '0' + n : n;
}

function _timeLeft (now, end) {
  if (now <= end) {
    var seconds = parseInt((end - now) / 1000, 10),
        minutes = parseInt(seconds / 60, 10),
        hours   = parseInt(minutes / 60, 10),
        days    = parseInt(hours / 24, 10),
        left    = '';

    seconds = seconds - (minutes * 60);
    minutes = minutes - (hours * 60);
    hours   = hours   - (days * 24);

    left += (days && days > 1) ? days + ' dias, ' : (days === 1 ? '1 dia, ' : '');
    left += (toString(hours).length) ? hours + 'h ' : '';
    left += (toString(minutes).length) ? _timePad(minutes) + 'm ' : '';
    left += _timePad(seconds) + 's';

    if (days + hours + minutes + seconds > 0) {
      return left;
    } else {
      return 'Tempo esgotado!!!!';
    }
  } else {
    return 'Tempo esgotado!!!!';
  }
}

function timeCounter ($elements) {
  $elements.forEach(function ($each) {
    $each.innerHTML = _timeLeft(new Date(), _getDateEnd($each));
  });
}

var $counters = [].slice.call(document.querySelectorAll('.counter'));

timeCounter($counters);
setInterval(function () {
  timeCounter($counters);
}, 1000);

body {
background: #000000;
color: #dddddd;
}
#menu {
width: 200px;
}
#menu li {
list-style: none;
}
#menu li a {
width: 100%;
background: #006699;
color: #ffffff;
border: 2px solid #000000;
text-decoration: none;
display: block;
padding: 6px;
font-size: 20px;
}
#menu li a:hover {
text-decoration: none;
background: #00dddd;
color: #000000;
}
#menu li.diafuturo a{
background: #112244;
color: #999999;
}
#menu li.diafuturo a:hover{
background: #112244;
color: #999999;
}
#menu li.diaatual a{
background: #990000;
color: #000000;
}
#menu li.diaatual a:hover{
background: #ffc000;
color: #000000;
}

<div id="menu">
<ul>
<li class="diapassado"><a href="#">09/07/2019</a></li>

<li class="diapassado"><a href="#">10/07/2019</a></li>
<li class="diaatual"><a href="#">11/07/2019</a></li>
<li class="diafuturo"><a href="#">12/07/2019</a></li>
<li class="diafuturo"><a href="#">13/07/2019</a></li>
</ul>


</div>
<br/>
Exemplo de javascript: <span class='counter' data-end='2029-06-05T12:01:48.561Z'></span>

Summarizing I was looking for a way to highlight a menu link automatically using a similar javascript, if anyone can help I appreciate, I’m beginner in js

Answer 1

You can locate the link through its content (as I have not seen jquery in your code, I’m using javascript pure):

var dataAtual = new Date().toLocaleString('pt-br', {year: 'numeric', month: '2-digit', day: '2-digit'});

var elemento = Array.from(document.querySelectorAll('a'))
  .find(el => el.textContent === dataAtual);

elemento.parentNode.classList.add("diaatual");

var proximo = elemento.parentNode.nextElementSibling;
while (proximo != null && proximo != undefined) {
   proximo.classList.add("diafuturo");
   proximo = proximo.nextElementSibling;
}

body {
background: #000000;
color: #dddddd;
}
#menu {
width: 200px;
}
#menu li {
list-style: none;
}
#menu li a {
width: 100%;
background: #006699;
color: #ffffff;
border: 2px solid #000000;
text-decoration: none;
display: block;
padding: 6px;
font-size: 20px;
}
#menu li a:hover {
text-decoration: none;
background: #00dddd;
color: #000000;
}
#menu li.diafuturo a{
background: #112244;
color: #999999;
}
#menu li.diafuturo a:hover{
background: #112244;
color: #999999;
}
#menu li.diaatual a{
background: #990000;
color: #000000;
}
#menu li.diaatual a:hover{
background: #ffc000;
color: #000000;
}

<div id="menu">
  <ul>
    <li class="diapassado"><a href="#">09/07/2019</a></li>
    <li class="diapassado"><a href="#">10/07/2019</a></li>
    <li class="diapassado"><a href="#">11/07/2019</a></li>
    <li class="diapassado"><a href="#">12/07/2019</a></li>
    <li class="diapassado"><a href="#">13/07/2019</a></li>
  </ul>
</div>

OBS: for the test, I started all styles as "diapassad"

And basically do the following to find the link to the current date:

querySelectorAll('a') to find all links, Array.from to iterate with all returned values, and the find to find the content you want

Dai just add the class with parentNode.classList.add, remembering that Parent is for adding to the li and not in the a.

Then using the nextElementSibling it is possible to find the next elements li, and ends with the while for, while you have elements, you add the class "diafuturo"