jack0657 Posted September 5, 2023 Posted September 5, 2023 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> </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> </p> </body> </html>
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment