Stuff isn't poppping up and the background is cropped

[terrell14osbour]

Question:
So I am trying to make the period of the day pop up on the left side of the screen but it just doesn’t want to pop up at all. And the image in the background doesn’t cover the whole screen. PLSSSS HELP

Repl link:
https://replit.com/@terrell14osbour/ALVCLOCK

function updateTime() {
  const now = new Date();
  const dayOfWeek = now.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday

  const dateElement = document.getElementById('date');
  dateElement.textContent = now.toDateString();

  const timeElement = document.getElementById('time');
  timeElement.textContent = now.toLocaleTimeString('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hour12: true // Display time in 12-hour format with AM/PM
  });

  const regularSchedule = [
    { period: 'Period 1', startTime: '08:50', endTime: '09:38' },
    { period: 'Period 2', startTime: '09:41', endTime: '10:29' },
    { period: 'Period 3', startTime: '10:32', endTime: '11:20' },
    { period: 'Period 4', startTime: '11:24', endTime: '01:02' }, // Adjusted for 12-hour format
    { period: 'Lunch A', startTime: '11:24', endTime: '11:54' },
    { period: 'Lunch B', startTime: '11:58', endTime: '12:28' },
    { period: 'Lunch C', startTime: '12:32', endTime: '01:02' }, // Adjusted for 12-hour format
    { period: 'Period 5', startTime: '01:05', endTime: '01:53' }, // Adjusted for 12-hour format
    { period: 'Period 6', startTime: '01:56', endTime: '02:44' },
    { period: 'Period 7', startTime: '02:47', endTime: '03:35' },
    { period: 'School Ends', startTime: '03:35', endTime: '23:59' }, // To signify end of the day
  ];

  const wednesdaySchedule = [
    { period: 'Period 1', startTime: '08:50', endTime: '09:30' },
    { period: 'Period 2', startTime: '09:33', endTime: '10:13' },
    { period: 'Period 3', startTime: '10:16', endTime: '10:56' },
    { period: 'Advisory', startTime: '10:59', endTime: '11:44' },
    { period: 'Period 4 A Lunch', startTime: '11:48', endTime: '12:18' },
    { period: 'Period 4 B Lunch', startTime: '12:22', endTime: '12:52' },
    { period: 'Period 4 C Lunch', startTime: '12:56', endTime: '01:26' }, // Adjusted for 12-hour format
    { period: 'Period 5', startTime: '01:29', endTime: '02:09' },
    { period: 'Period 6', startTime: '02:12', endTime: '02:52' },
    { period: 'Period 7', startTime: '02:55', endTime: '03:35' },
    { period: 'Dismissal', startTime: '03:35', endTime: '23:59' }, // To signify end of the day
  ];

  let currentSchedule = dayOfWeek === 3 ? wednesdaySchedule : regularSchedule;

  const periodsElement = document.getElementById('periods');
  periodsElement.innerHTML = ''; // Clear previous content

  currentSchedule.forEach(({ period, startTime, endTime }) => {
    const periodDiv = document.createElement('div');

    const start = new Date(`2023-01-01T${startTime}:00`);
    const end = new Date(`2023-01-01T${endTime}:00`);

    const formattedStartTime = start.toLocaleTimeString('en-US', {
      hour: 'numeric',
      minute: 'numeric',
      hour12: true // Display time in 12-hour format with AM/55555555?555555555555555555555
    });

    const formattedEndTime = end.toLocaleTimeString('en-US', {
      hour: 'numeric',
      minute: 'numeric',
      hour12: true
    });

    periodDiv.textContent = `${period}: ${formattedStartTime} - ${formattedEndTime}`;

    const nowTime = now.getTime();
    if (nowTime >= start.getTime() && nowTime <= end.getTime()) {
      periodDiv.style.fontWeight = 'bold';
      periodDiv.style.color = 'blue';
    }

    periodsElement.appendChild(periodDiv);
  });

  // Logic for displaying notices can be added here
        // ... (previous code remains the same)

    // ... (previous code remains the same)

  function updateTime() {
    // ... (previous code remains the same)

    const nowTime = now.getTime();
    const schoolEndTime = currentSchedule[currentSchedule.length - 1].endTime;

    if (nowTime > new Date(`2023-01-01T${schoolEndTime}:00`).getTime()) {
      periodsElement.style.display = 'none';
      document.getElementById('bottom-right-image').style.display = 'none'; // Hide image when school is out
    } else {
      periodsElement.style.display = 'block';
      document.getElementById('bottom-right-image').style.display = 'block'; // Show image during school hours
    }

    // Logic for displaying notices can be added here
  }

  // ... (remaining code remains the same)

  // Initial call to display time immediately
  updateTime();

  // ... (remaining code remains the same)

  // Initial call to display time immediately
  updateTime();

}

// Update time every second
setInterval(updateTime, 1000);

// Initial call to display time immediately
updateTime();

function displayMessage(message) {
  const messageElement = document.getElementById('message');
  messageElement.textContent = message;
  messageElement.classList.add('fade-in-out');
}

function repeatMessage() {
  const messages = [
    'Welcome EAGLES',
    'Enjoy your day!',
    'GRADES CLOSE ON!',
    'Keep up the good work!',
    'Remember to stay focused!',
    'Terrell is a COOL GUY!',
    // Add more messages as needed
  ];

  let index = 0;

  setInterval(() => {
    displayMessage(messages[index]);
    index = (index + 1) % messages.length;
  }, 10000); // Repeat every 30 seconds
}

repeatMessage();