Таймер JS (стилизация)

Question

Сам таймер написан. С его работой проблем нет. Подскажите как задать расстояние между цифрами. Добавление спана двоеточию не работает. Что дописать в HTML или CSS? Чтоб все корректно отображалось.

Вот как должно отображаться:

const timerBlock = document.querySelector('.timer-time')
const deadline = '14 april 2022'

let interval

const updateClock = () => {
    const date = new Date().getTime()
    const dateDeadline = new Date(deadline).getTime()
    const timeRemaining = (dateDeadline - date) / 1000


    const days = Math.floor(timeRemaining / 60 / 60 / 24)
    const hours = Math.floor((timeRemaining / 60 / 60) % 24) 
    const minutes = Math.floor((timeRemaining / 60) % 60)
  

    const fDays = days < 10 ? '' + days : days
    const fHours = hours < 10 ? '0' + hours : hours
    const fMinutes = minutes < 10 ? '0' + minutes : minutes
   

    timerBlock.textContent = `${fDays}:${fHours}:${fMinutes}`

    if (timeRemaining <= 0) {
        clearInterval(interval)
        timerBlock.textContent = `0:00:00`
    }
}

updateClock()

interval = setInterval(updateClock, 500)

.timer {
  position: absolute;
  top: 192px;
  left: 20px;
  color: #13171d;
  text-align: center;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border: none;
}

.timer-text {
  margin-left: -40px;
  font-family: "Gilroy";
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.01em;
  opacity: 0.5;
}

.timer-time {
  margin-top: 8px;
  margin-left: -48px;
  padding: 0 10px 0 0;
  font-family: "Gilroy";
  font-weight: 600;
  font-size: 32px;
  line-height: 38px;
  text-align: center;
  letter-spacing: -0.01em;
}

.timer-time span {
  margin: 0 20px;
}
.timer-time-text {
  padding-top: 5px;
  text-transform: uppercase;
  margin-left: 15px;
  font-family: "Gilroy";
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: -0.01em;
  color: #13171d;
  opacity: 0.5;
}

<div class="timer">
   <p class="timer-text">Конец акции:</p>
   <p class="timer-time">2 <span>:</span> 18 <span>:</span> 56</p>
   <p class="timer-time-text">дни&emsp;&emsp;&emsp; часы&emsp;&emsp;&emsp; минуты</p>
</div>

Answer 1

Например так

const timerBlock = document.querySelector('.timer-time')
const deadline = '14 april 2022'

let interval

const updateClock = () => {
    const date = new Date().getTime()
    const dateDeadline = new Date(deadline).getTime()
    const timeRemaining = (dateDeadline - date) / 1000


    const days = Math.floor(timeRemaining / 60 / 60 / 24)
    const hours = Math.floor((timeRemaining / 60 / 60) % 24) 
    const minutes = Math.floor((timeRemaining / 60) % 60)

    timerBlock.innerHTML = `
    <div class="timer-count">${days}<span>дни</span></div>
    <div class="timer-sep">:</div>
    <div class="timer-count">${(''+hours).padStart(2, '0')}<span>часы</span></div>
    <div class="timer-sep">:</div>
    <div class="timer-count">${(''+minutes).padStart(2, '0')}<span>минуты</span></div>`

    if (timeRemaining <= 0) {
        clearInterval(interval)
        timerBlock.textContent = `акция закончилась`
    }
}

updateClock()

interval = setInterval(updateClock, 500)

.timer {
  position: absolute;
  top: 192px;
  left: 20px;
  color: #13171d;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border: none;
}

.timer-text {
  font-family: "Gilroy";
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.01em;
  opacity: 0.5;
}

.timer-time {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 8px;
  padding: 0 10px 0 0;
  font-family: "Gilroy";
  font-weight: 600;
  text-align: center;
  letter-spacing: -0.01em;
}

.timer-count {
  display: inline-block;
  text-align: center;
  font-size: 50px;
}

.timer-count span {
  display: block;
  padding-top: 5px;
  text-transform: uppercase;
  font-family: "Gilroy";
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: -0.01em;
  color: #13171d;
  opacity: 0.5;
}

.timer-sep {
  font-size: 40px;
  line-height: 55px;
  margin: 0 15px;
}

<div class="timer">
   <p class="timer-text">Конец акции:</p>
   <p class="timer-time"></p>
</div>

БЛОГ НА HUSL

Таймер JS (стилизация)

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