Jump to content

Javascript not working in custom code

Recommended Posts

Hi,

Can anyone tell me why this custom code isnt working? It is meant to say either open or closed depending on the time of day (business opening hours) but it permantly says closed:

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { font-family: Arial, sans-serif; } h3 { color: #636363; } .pill-box { display: inline-block; background-color: #ffaa00; color: white; padding: 4px 8px; margin-left: 10px; border-radius: 20px; font-weight: bold; } .day { color: #ffaa00; } .time { color: #979797; } </style> </head> <body> <p>&nbsp;</p> <h3 style="text-align: center;">Opening Hours<span class="pill-box" id="opening-status">Open</span></h3> <p style="text-align: center;"><strong><span class="day">Monday:</span></strong> <span class="time" id="monday-time">4:00 PM - 12:00 AM</span></p> <p style="text-align: center;"><strong><span class="day">Tuesday:</span></strong> <span class="time" id="tuesday-time">9:00 AM - 7:00 PM</span></p> <p style="text-align: center;"><strong><span class="day">Wednesday:</span></strong> <span class="time" id="wednesday-time">9:00 AM - 11:00 AM</span></p> <p style="text-align: center;"><strong><span class="day">Thursday:</span></strong> <span class="time" id="thursday-time">4:00 PM - 12:00 AM</span></p> <p style="text-align: center;"><strong><span class="day">Friday:</span></strong> <span class="time" id="friday-time">12:00 PM - 12:00 AM</span></p> <p style="text-align: center;"><strong><span class="day">Saturday:</span></strong> <span class="time" id="saturday-time">6:00 PM - 11:00 PM</span></p> <p style="text-align: center;"><strong><span class="day">Sunday:</span></strong> <span class="time" id="sunday-time">12:00 PM - 11:00 PM</span></p> <script type="text/javascript"> // Function to check if the business is open based on the current time function isOpenNow() { const currentTime = new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' }); const openingHours = { monday: '16:00 - 00:00', tuesday: '9:00 - 19:00', wednesday: '9:00 - 11:00', thursday: '16:00 - 00:00', friday: '12:00 - 00:00', saturday: '18:00 - 23:00', sunday: '12:00 - 23:00', }; const currentDay = new Date().toLocaleDateString('en-US', { weekday: 'long' }).toLowerCase(); const openingTime = openingHours[currentDay].split(' - ')[0]; const closingTime = openingHours[currentDay].split(' - ')[1]; return currentTime >= openingTime && currentTime <= closingTime; } // Function to update the opening status pill based on whether the business isopen or closed function updateOpeningStatus() { const pill = document.getElementById('opening-status'); const isOpen = isOpenNow(); pill.textContent = isOpen ? 'Open' : 'Closed'; pill.style.backgroundColor = isOpen ? '#ffaa00' : '#636363'; } // Call the updateOpeningStatus function initially to set the initial opening status updateOpeningStatus(); // Update the opening status every minute setInterval(updateOpeningStatus, 60000); </script> <p>&nbsp;</p> </body> </html>

Link to comment
  • Replies 0
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.