[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>