Как сделать так, чтобы когда урок начинался (наступало 8:00), то выводилось «Урок нач

[shkarol]

Как сделать так, чтобы когда урок начинался (наступало 8:00), то выводилось "Урок идёт!" ('Going'), а когда заканчивался (наступало 8:40) - "Урок закончился!" ('Completed'). Когда начинался второй урок (наступало 8:50), выводилось также, как в первом случае, но уже у первого урока была надпись "Завершён!"?

Надеюсь, понятно написал, если что спрашивайте в комментариях!

Есть графический пример, как должно быть:

<div id="time"></div>
<p class="p"></p>
<p class="two" style="color: red;">Upcoming</p>

let clock = document.getElementById("time")

var time = setInterval(function() {
  var date = new Date();
  clock.innerHTML = (date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
}, 1000);


let p = document.querySelector('.p')
let two = document.querySelector('.two')
let date = new Date

setInterval(() => {
    
    if(date.getHours() == 8 && date.getMinutes() >= 0 && date.getMinutes() <= 10){
        p.textContent = "Going"
    }

    if(date.getHours() == 8 && date.getMinutes() >= 0 && date.getMinutes() >= 40){
        p.textContent = "Completed"
    }
  
}, 0);

setInterval(() => {
    
    if(date.getHours() >= 8 && date.getMinutes() >= 0 && date.getMinutes() <= 50){
        two.textContent = "Going"
    }

    if(date.getHours() == 9 && date.getMinutes() >= 0 && date.getMinutes() >= 30){
        two.textContent = "Completed"
    }
  
}, 0);

[рони]

shkarol,
форум - поиск - расписание

[Nexus]

Я не знаю зачем я это сделал, но вот:
https://codepen.io/nexusdeveloper/pen/abYQmyV

<div class="lessons-schedule" style="max-width: 300px;">
  <div class="lessons-schedule__item" data-start="08:00" data-finish="08:40">
    <div class="lessons-schedule__item__icon"></div>
    <div class="lessons-schedule__item__details">
      <div class="lessons-schedule__item__title">Geography</div>
      <div class="lessons-schedule__item__second-line">
        <div class="lessons-schedule__item__status">Loading...</div>
        <div class="lessons-schedule__item__time">08:00 - 08:40</div>
      </div>
    </div>
  </div>

  <div class="lessons-schedule__item" data-start="08:50" data-finish="09:30">
    <div class="lessons-schedule__item__icon"></div>
    <div class="lessons-schedule__item__details">
      <div class="lessons-schedule__item__title">Chemistry</div>
      <div class="lessons-schedule__item__second-line">
        <div class="lessons-schedule__item__status">Loading...</div>
        <div class="lessons-schedule__item__time">08:50 - 09:30</div>
      </div>
    </div>
  </div>

  <div class="lessons-schedule__item" data-start="09:40" data-finish="10:20">
    <div class="lessons-schedule__item__icon"></div>
    <div class="lessons-schedule__item__details">
      <div class="lessons-schedule__item__title">Russian Language</div>
      <div class="lessons-schedule__item__second-line">
        <div class="lessons-schedule__item__status">Loading...</div>
        <div class="lessons-schedule__item__time">09:50 - 10:20</div>
      </div>
    </div>
  </div>

  <div class="lessons-schedule__item" data-start="10:30" data-finish="11:10">
    <div class="lessons-schedule__item__icon"></div>
    <div class="lessons-schedule__item__details">
      <div class="lessons-schedule__item__title">Literature</div>
      <div class="lessons-schedule__item__second-line">
        <div class="lessons-schedule__item__status">Loading...</div>
        <div class="lessons-schedule__item__time">10:30 - 11:10</div>
      </div>
    </div>
  </div>
</div>
<style>.lessons-schedule__item {
  --status-color: inherit;
  --status-indicator-color: var(--status-color);
  --status-indicator-size: 7px;
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}
.lessons-schedule__item--upcoming {
  --status-color: red;
}
.lessons-schedule__item--completed {
  --status-color: green;
}
.lessons-schedule__item--going {
  --status-color: yellow;
}
.lessons-schedule__item__icon {
  margin-right: 10px;
}
.lessons-schedule__item__icon:after {
  content: "";
  width: 30px;
  height: 30px;
  display: block;
  background: gray;
  border-radius: 50%;
}
.lessons-schedule__item__second-line {
  display: flex;
  margin-top: 3px;
}
.lessons-schedule__item__title {
  font-weight: bold;
}
.lessons-schedule__item__status {
  display: flex;
  align-items: center;
  color: var(--status-color);
}
.lessons-schedule__item__status:before {
  content: "";
  display: block;
  width: var(--status-indicator-size);
  height: var(--status-indicator-size);
  background-color: var(--status-indicator-color);
  margin-right: 5px;
  border-radius: 50%;
}
.lessons-schedule__item__time:before {
  content: ", ";
}</style>
<script>document.addEventListener("DOMContentLoaded", () => {
  const STATUSES = {
    upcomming: {
      className: "lessons-schedule__item--upcoming",
      label: "Upcoming",
      match: (now, range) => now < range[0],
      getNextUpdateDelay: (now, range) => range[0] - now
    },

    going: {
      className: "lessons-schedule__item--going",
      label: "Going",
      match: (now, range) => now >= range[0] && now <= range[1],
      getNextUpdateDelay: (now, range) => range[1] - now
    },

    completed: {
      className: "lessons-schedule__item--completed",
      label: "Completed",
      match: (now, range) => now > range[1],
      getNextUpdateDelay: null
    }
  };

  document.querySelectorAll(".lessons-schedule").forEach((container) => {
    const getTimeRange = (item) => {
      const timeRange = ["start", "finish"]
        .map((fieldName) => {
          const range = String(item.dataset[fieldName]).split(":");
          if (range.length < 2) {
            return null;
          }

          const dateInstance = new Date();
          dateInstance.setHours(+range[0]);
          dateInstance.setMinutes(+range[1]);

          return +dateInstance;
        })
        .filter(Boolean)
        .sort((a, b) => {
          return a - b;
        });

      return timeRange.length === 2 ? timeRange : null;
    };

    container
      .querySelectorAll(".lessons-schedule__item")
      .forEach(function updateItem(item) {
        const range = getTimeRange(item);
        if (!range) {
          return;
        }

        const now = Date.now();
        const statusContainer = item.querySelector(
          ".lessons-schedule__item__status"
        );
        let activeStatus = null;

        for (const statusDefinition of Object.values(STATUSES)) {
          const isActive = statusDefinition.match(now, range);
          item.classList[isActive ? "add" : "remove"](
            statusDefinition.className
          );
          if (!isActive) {
            continue;
          }

          statusContainer.textContent = statusDefinition.label;
          activeStatus = statusDefinition;
        }

        if (!activeStatus?.getNextUpdateDelay) {
          return;
        }

        setTimeout(
          () => updateItem(item),
          activeStatus?.getNextUpdateDelay(now, range)
        );
      });
  });
});

if (document.readyState === "completed") {
  document.dispatchEvent(new Event("DOMContentLoaded"));
}
</script>

[рони]

Nexus,

[shkarol]

Nexus, огромное спасибо!