Создаю календарь

Question

Ребят я бы хотел создать календарь и я хочу что бы сегодняшний день подсвечивался в чем проблема когда я сравниваю элементы с HTML и JS то они не совпадают из за пустых пространств поэтому через for loop у меня не получается вот весь код. (если что другое можно изменить и сократить можете сказать)

const now = new Date();
const currentDate = now.getDate();
const month = document.getElementById("month");
const days = month.querySelectorAll("div div");

for (let day of days) {
  if (day.textContent.trim() === currentDate.toString()) {
    day.style.backgroundColor = "yellow"
  }
};

function updateClock() {

  const now = new Date();
  let hours = now.getHours();
  const meridiem = hours >= 12 ? "PM" : "AM";
  hours = hours % 12 || 12;
  hours = hours.toString().padStart(2, 0);
  const minutes = now.getMinutes().toString().padStart(2, 0);
  const seconds = now.getSeconds().toString().padStart(2, 0);
  const timeString = `${hours}:${minutes}:${seconds} ${meridiem}`;
  document.getElementById("clock").textContent = timeString;
}

updateClock();
setInterval(updateClock, 1000);

body {
  background-image: url(backround4.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid white;
  border-radius: 15px;
  padding: 15px 15px;
  width: 350px;
  height: auto;
  margin: auto;
  background-color: hsl(0, 0%, 30%);
}

#year {
  margin-bottom: 10px;
  font-family: monospace;
  font-size: 2.5rem;
  border-bottom: 1px solid white;
}

#month {
  font-family: monospace;
  font-size: 1.3rem;
}

#slideButtons {
  display: flex;
  justify-content: space-between;
  margin-top: -20%;
  margin-left: 90px;
  margin-right: 90px;
  text-align: center;
}

#clock-container {
  margin-top: 7rem;
}

#clock {
  font-family: monospace;
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
  color: white;
  border-radius: 4px;
  width: 100%;
  backdrop-filter: blur(5px);
  background-color: hsla(0, 0%, 100%, 0.1);
}

<div id="calendar">
  <div id="year">2000/02/20</div>

  <div id="month">
    <div>1 2 3 4 5 6 7 <br></div>
    <div>8 9 10 11 12 13 14 <br></div>
    <div>15 16 17 18 19 20 21 <br></div>
    <div>22 23 24 25 26 27 28 <br></div>
    <div>29 30 31</div>
  </div>
</div>

<div id="slideButtons">
  <button class="prev" onclick="prevSlide()">&#10094</button>
  <button class="next" onclick="nextSlide()">&#10095</button>
</div>

<div id="clock-container">
  <div id="clock">00:00:00</div>
</div>

заранее спасибо!

Answer 1

Нет возможности задать цвет отдельной части текста. Для этого необходимо обернуть эту часть в какой-нибудь элемент, например span

Сделать это можно сразу в разметке, либо в коде с проверкой

Например:

const now = new Date();
const currentDate = now.getDate();
const month = document.getElementById("month");
const days = month.querySelectorAll("div div");

for (let day of days) {
  day.innerHTML = day.textContent.replace(new RegExp(`\\b(${currentDate})\\b`), "<span class='current'>$&</span>")
};

body {
  background-image: url(backround4.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid white;
  border-radius: 15px;
  padding: 15px 15px;
  width: 350px;
  height: auto;
  margin: auto;
  background-color: hsl(0, 0%, 30%);
}

#year {
  margin-bottom: 10px;
  font-family: monospace;
  font-size: 2.5rem;
  border-bottom: 1px solid white;
}

#month {
  font-family: monospace;
  font-size: 1.3rem;
}

.current {
  background-color: yellow;
}

<div id="calendar">
  <div id="year">2000/02/20</div>

  <div id="month">
    <div>1 2 3 4 5 6 7</div>
    <div>8 9 10 11 12 13 14</div>
    <div>15 16 17 18 19 20 21</div>
    <div>22 23 24 25 26 27 28</div>
    <div>29 30 31</div>
  </div>
</div>

БЛОГ НА HUSL

Создаю календарь

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