id_nomer_odin1

Для таких целей в браузерах есть консоль разработчика, где сразу пишет, что не объявлена переменная date.
А вообще вы объявляете переменную date через let. Так что ваша переменная не попадает в цикл (читайте справку зачем используют let)
Пробуйте так:

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')
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);

И убирайте масло масляное, на подобии этого:

if(date.getHours() == 9 && date.getMinutes() >= 0 && date.getMinutes() >= 30){

А вот тут можно использовать let:

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

Не очень удачно, что таймеры часто обновляют содержание страницы, по сути ничего не меняя – текст остаётся тот же большую часть срабатываний.

Один вариант — использовать Shadow DOM, можно с React или Vue – те берут на себя задачу обновления реальной DOM только фактически изменившимися участками. Но освоение нового инструмента займёт какое-то время.

Другой вариант – использовать события. Что-то меняется только когда впервые наступает момет «Че». Например, время 08:40. В этот момент можно выбросить событие. Считайте, что «Событие» == «Звонок».
Слушать это событие будет каждый компонент урока. И менять своё состояние, если время – его.

Как я понимаю, там ещё обычные часы должны тикать. Вот в них же можно отслеживать моменты, когда из 08:39 стало 08:40 – предыдущее значение ещё-не, а текущее уже-да. Вот тогда и выбрасывать событие.

У компонента урока может быть одно из трёх состояний: "Upcoming", "Ongoing", "Completed". В обработчике события можно принимать решение, какое из трёх переключиться, исходя из времени события и собственных отметок времени начала и конца.

Используйте интерфейс matchMedia для отслеживания медиазпросов в javascript.

https://developer.mozilla.org/ru/docs/Web/CSS/Medi...

Возвращаемый этим интерфейсом объект MediaQueryList позволяет добавить слушателей, которые будут уведомляться о переключении указанных медиавыражений. В обработчиках событий вы сможете изменять переменные и пересчитывать необходимые вам размеры.