Таймер даты на javascript

Подскажите, как сделать чтобы работали оба таймера? Пробовал querySelectorAll но так вообще не работает https://codepen.io/Djalilov-M/pen/yLXOoym

document.addEventListener('DOMContentLoaded', () => {
    const this_data = new Date();
    this_data.setDate(this_data.getDate() + 6);
    console.log(this_data)
    
    const daysVal = document.querySelector('.time-count__days .time-count__val');
    const hoursVal = document.querySelector('.time-count__hours .time-count__val');
    const minutesVal = document.querySelector('.time-count__minutes .time-count__val');
    const secondsVal = document.querySelector('.time-count__seconds .time-count__val');

    const daysText = document.querySelector('.time-count__days .time-count__text');
    const hoursText = document.querySelector('.time-count__hours .time-count__text');
    const minutesText = document.querySelector('.time-count__minutes .time-count__text');
    const secondsText = document.querySelector('.time-count__seconds .time-count__text');

    function declOfNum(number, titles) {  
        let cases = [2, 0, 1, 1, 1, 2];  
        return titles[ (number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5] ];  
    }

    const timeCount = () => {
        let now = new Date();
        let leftUntil = this_data - now;
        
        let days = Math.floor(leftUntil / 1000 / 60 / 60 / 24);
        let hours = Math.floor(leftUntil / 1000 / 60 / 60) % 24;
        let minutes = Math.floor(leftUntil / 1000 / 60) % 60;
        let seconds = Math.floor(leftUntil / 1000) % 60;

        daysVal.textContent = days;
        hoursVal.textContent =  hours;
        minutesVal.textContent = minutes;
        secondsVal.textContent = seconds;

        daysText.textContent = declOfNum(days, ['день', 'дня', 'дней']);
        hoursText.textContent = declOfNum(hours, ['час', 'часа', 'часов']);
        minutesText.textContent = declOfNum(minutes, ['минута', 'минуты', 'минут']);
        secondsText.textContent = declOfNum(seconds, ['секунда', 'секунды', 'секунд']);
    };

    timeCount();
    setInterval(timeCount, 1000);
});
body {
    background-color: #fafafa;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../img/bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
}

.visually-hidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

.time-count {
    background: #fff;
    box-shadow: 4px 8px 40px rgba(8, 24, 111, 0.2);
    border-radius: 30px;
    width: 796px;
    height: 359px;
    padding: 75px 86px;
}

.time-count__title {
    margin: 0;
    margin-bottom: 35px;
    font-weight: 700;
    font-size: 40px;
    line-height: 47px;
    text-align: center;
    color: var(--color-dark);
}

.time-count__content {
    display: flex;
    justify-content: center;
}

.time-count__item {
    text-align: center;
}

.time-count__val {
    min-width: 81px;
    font-weight: 700;
    font-size: 70px;
    line-height: 82px;
    color: var(--color-accent);
}

.time-count__separator {
    font-weight: 700;
    font-size: 48px;
    line-height: 74px;
    text-align: center;
    color: var(--color-accent);
    margin: 0 33px;
}

.time-count__text {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark);
}
    <h1 class="visually-hidden">Таймер обратного отсчета</h1>
    <div class="time-count">
        <h2 class="time-count__title"> осталось</h2>
        <div class="time-count__content">
            <div class="time-count__item time-count__days">
                <div class="time-count__val">00</div>
                <span class="time-count__text">дней</span>
            </div>
            <div class="time-count__separator">:</div>
            <div class="time-count__item time-count__hours">
                <div class="time-count__val">00</div>
                <span class="time-count__text">часов</span>
            </div>
            <div class="time-count__separator">:</div>
            <div class="time-count__item time-count__minutes">
                <div class="time-count__val">00</div>
                <span class="time-count__text">минут</span>
            </div>
            <div class="time-count__separator">:</div>
            <div class="time-count__item time-count__seconds">
                <div class="time-count__val">00</div>
                <span class="time-count__text">секунд</span>
            </div>
        </div>
    </div>
<br><br>

    <h1 class="visually-hidden">Таймер обратного отсчета</h1>
    <div class="time-count">
        <h2 class="time-count__title"> осталось</h2>
        <div class="time-count__content">
            <div class="time-count__item time-count__days">
                <div class="time-count__val">00</div>
                <span class="time-count__text">дней</span>
            </div>
            <div class="time-count__separator">:</div>
            <div class="time-count__item time-count__hours">
                <div class="time-count__val">00</div>
                <span class="time-count__text">часов</span>
            </div>
            <div class="time-count__separator">:</div>
            <div class="time-count__item time-count__minutes">
                <div class="time-count__val">00</div>
                <span class="time-count__text">минут</span>
            </div>
            <div class="time-count__separator">:</div>
            <div class="time-count__item time-count__seconds">
                <div class="time-count__val">00</div>
                <span class="time-count__text">секунд</span>
            </div>
        </div>
    </div>


Ответы (1 шт):

Автор решения: pyduti

document.addEventListener('DOMContentLoaded', () => {
  const this_data = new Date();
  this_data.setDate(this_data.getDate() + 6);
  console.log(this_data)
  
  const daysVal = document.querySelectorAll('.time-count__days .time-count__val');
  const hoursVal = document.querySelectorAll('.time-count__hours .time-count__val');
  const minutesVal = document.querySelectorAll('.time-count__minutes .time-count__val');
  const secondsVal = document.querySelectorAll('.time-count__seconds .time-count__val');

  const daysText = document.querySelectorAll('.time-count__days .time-count__text');
  const hoursText = document.querySelectorAll('.time-count__hours .time-count__text');
  const minutesText = document.querySelectorAll('.time-count__minutes .time-count__text');
  const secondsText = document.querySelectorAll('.time-count__seconds .time-count__text');

  function declOfNum(number, titles) {  
      let cases = [2, 0, 1, 1, 1, 2];  
      return titles[ (number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5] ];  
  }

  const timeCount = () => {
      let now = new Date();
      let leftUntil = this_data - now;
      
      let days = Math.floor(leftUntil / 1000 / 60 / 60 / 24);
      let hours = Math.floor(leftUntil / 1000 / 60 / 60) % 24;
      let minutes = Math.floor(leftUntil / 1000 / 60) % 60;
      let seconds = Math.floor(leftUntil / 1000) % 60;

      daysVal[0].textContent = days;
      hoursVal[0].textContent =  hours;
      minutesVal[0].textContent = minutes;
      secondsVal[0].textContent = seconds;
      daysVal[1].textContent = days;
      hoursVal[1].textContent =  hours;
      minutesVal[1].textContent = minutes;
      secondsVal[1].textContent = seconds;

      daysText[0].textContent = declOfNum(days, ['день', 'дня', 'дней']);
      hoursText[0].textContent = declOfNum(hours, ['час', 'часа', 'часов']);
      minutesText[0].textContent = declOfNum(minutes, ['минута', 'минуты', 'минут']);
      secondsText[0].textContent = declOfNum(seconds, ['секунда', 'секунды', 'секунд']);
      daysText[1].textContent = declOfNum(days, ['день', 'дня', 'дней']);
      hoursText[1].textContent = declOfNum(hours, ['час', 'часа', 'часов']);
      minutesText[1].textContent = declOfNum(minutes, ['минута', 'минуты', 'минут']);
      secondsText[1].textContent = declOfNum(seconds, ['секунда', 'секунды', 'секунд']);
  };

  timeCount();
  setInterval(timeCount, 1000);
});
body {
    background-color: #fafafa;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../img/bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
}

.visually-hidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

.time-count {
    background: #fff;
    box-shadow: 4px 8px 40px rgba(8, 24, 111, 0.2);
    border-radius: 30px;
    width: 796px;
    height: 359px;
    padding: 75px 86px;
}

.time-count__title {
    margin: 0;
    margin-bottom: 35px;
    font-weight: 700;
    font-size: 40px;
    line-height: 47px;
    text-align: center;
    color: var(--color-dark);
}

.time-count__content {
    display: flex;
    justify-content: center;
}

.time-count__item {
    text-align: center;
}

.time-count__val {
    min-width: 81px;
    font-weight: 700;
    font-size: 70px;
    line-height: 82px;
    color: var(--color-accent);
}

.time-count__separator {
    font-weight: 700;
    font-size: 48px;
    line-height: 74px;
    text-align: center;
    color: var(--color-accent);
    margin: 0 33px;
}

.time-count__text {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark);
}
 <h1 class="visually-hidden">Таймер обратного отсчета</h1>
    <div class="time-count">
        <h2 class="time-count__title"> осталось</h2>
        <div class="time-count__content">
            <div class="time-count__item time-count__days">
                <div class="time-count__val">00</div>
                <span class="time-count__text">дней</span>
            </div>
            <div class="time-count__separator">:</div>
            <div class="time-count__item time-count__hours">
                <div class="time-count__val">00</div>
                <span class="time-count__text">часов</span>
            </div>
            <div class="time-count__separator">:</div>
            <div class="time-count__item time-count__minutes">
                <div class="time-count__val">00</div>
                <span class="time-count__text">минут</span>
            </div>
            <div class="time-count__separator">:</div>
            <div class="time-count__item time-count__seconds">
                <div class="time-count__val">00</div>
                <span class="time-count__text">секунд</span>
            </div>
        </div>
    </div>
<br><br>

    <h1 class="visually-hidden">Таймер обратного отсчета</h1>
    <div class="time-count">
        <h2 class="time-count__title"> осталось</h2>
        <div class="time-count__content">
            <div class="time-count__item time-count__days">
                <div class="time-count__val">00</div>
                <span class="time-count__text">дней</span>
            </div>
            <div class="time-count__separator">:</div>
            <div class="time-count__item time-count__hours">
                <div class="time-count__val">00</div>
                <span class="time-count__text">часов</span>
            </div>
            <div class="time-count__separator">:</div>
            <div class="time-count__item time-count__minutes">
                <div class="time-count__val">00</div>
                <span class="time-count__text">минут</span>
            </div>
            <div class="time-count__separator">:</div>
            <div class="time-count__item time-count__seconds">
                <div class="time-count__val">00</div>
                <span class="time-count__text">секунд</span>
            </div>
        </div>
    </div>

→ Ссылка