Just Jolly Functions
Functions: Showing Business Hours with HTML, CSS, and JavaScript
A Business Hours Widget is an interactive and dynamic tool integrated into a post that displays the operating hours of a business or organization. This widget provides visitors with easy access to up-to-date information about when the business is open, closed, or available for service. By using such a widget, businesses can ensure their customers always know the hours of operation, improving user experience and accessibility.
Tip: Learn how to Insert HTML Code into Your Post.
Full Business Hours Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Business Hours</title>
<style>
/* Basic body styling for full-screen layout */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Container to center the content with padding and shadow */
.container {
background-color: #ffffff;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
max-width: 400px;
width: 100%;
}
/* Heading for the business hours section */
h1 {
color: #333;
margin-bottom: 20px;
}
/* Styling the list of hours */
.hours-list {
list-style: none;
padding: 0;
margin: 0;
}
/* Styling each business day entry in the list */
.day {
padding: 10px;
font-size: 16px;
color: #333;
border-bottom: 1px solid #ddd;
transition: background-color 0.3s;
}
/* Hover effect on each day */
.day:hover {
background-color: #f1f1f1;
}
/* Styling the current time status message */
.current-time {
margin-top: 20px;
font-size: 18px;
color: #555;
font-weight: bold;
}
/* Green color when the business is open */
.open-now {
color: #4CAF50;
}
/* Red color when the business is closed */
.closed-now {
color: #F44336;
}
/* Highlighting the current day */
.current {
font-weight: bold;
color: #007BFF; /* Highlight the current day with a blue color */
}
</style>
</head>
<body>
<div class="container">
<!-- Heading displaying the title "Our Business Hours" -->
<h1>Our Business Hours</h1>
<!-- A div to hold the list of business hours -->
<div id="hours" class="hours-list">
<ul>
<li id="monday" class="day">Monday: 9:00 AM - 5:00 PM</li>
<li id="tuesday" class="day">Tuesday: 9:00 AM - 5:00 PM</li>
<li id="wednesday" class="day">Wednesday: 9:00 AM - 5:00 PM</li>
<li id="thursday" class="day">Thursday: 9:00 AM - 5:00 PM</li>
<li id="friday" class="day">Friday: 9:00 AM - 5:00 PM</li>
<li id="saturday" class="day">Saturday: Closed</li>
<li id="sunday" class="day">Sunday: Closed</li>
</ul>
</div>
<!-- Div to display the current time status, whether the business is open or closed -->
<div id="current-time" class="current-time"></div>
</div>
<script>
// Function to highlight the current day and update the time status (open/closed)
function highlightCurrentDay() {
// Array of the days of the week for easy reference
const daysOfWeek = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
// Create a new Date object to get the current day and time
const now = new Date();
const currentDay = now.getDay(); // Get the current day (0-6, where 0 is Sunday, 6 is Saturday)
// Remove any previous highlights (in case a previous day was highlighted)
daysOfWeek.forEach(day => document.getElementById(day).classList.remove('current'));
// Add the 'current' class to the current day to highlight it
const currentDayName = daysOfWeek[currentDay];
document.getElementById(currentDayName).classList.add('current');
// Get the current time (in minutes) to compare with business hours
const currentTime = now.getHours() * 60 + now.getMinutes(); // Convert the current time to minutes (e.g., 9:30 AM becomes 570)
// Business hours stored in minutes (9:00 AM is 540 minutes, 5:00 PM is 1020 minutes)
const businessHours = {
monday: { open: 9 * 60, close: 17 * 60 },
tuesday: { open: 9 * 60, close: 17 * 60 },
wednesday: { open: 9 * 60, close: 17 * 60 },
thursday: { open: 9 * 60, close: 17 * 60 },
friday: { open: 9 * 60, close: 17 * 60 },
saturday: { open: null, close: null }, // Closed on Saturday
sunday: { open: null, close: null }, // Closed on Sunday
};
// Display the current time status (open or closed)
const dayName = daysOfWeek[currentDay];
const statusElement = document.getElementById('current-time');
// Check if the business is open or closed based on the time
if (businessHours[dayName].open !== null && businessHours[dayName].close !== null) {
if (currentTime >= businessHours[dayName].open && currentTime < businessHours[dayName].close) {
statusElement.textContent = `We are OPEN now!`; // Display "OPEN" message
statusElement.className = 'open-now'; // Apply "open-now" class for green color
} else {
statusElement.textContent = `We are CLOSED now. Please visit us during business hours.`; // Display "CLOSED" message
statusElement.className = 'closed-now'; // Apply "closed-now" class for red color
}
} else {
statusElement.textContent = `We are CLOSED today.`; // If the business is closed (Saturday or Sunday)
statusElement.className = 'closed-now'; // Apply "closed-now" class for red color
}
}
// Call the function to highlight the current day and display the open/closed status
highlightCurrentDay();
// Set an interval to update the time status every minute to keep it accurate
setInterval(highlightCurrentDay, 60000);
</script>
</body>
</html>
How the Combined Code Works:
HTML:
Defines the structure for displaying the business hours using <ul> and <li>.
Each day of the week is listed along with the business hours, and the "current-time" section is where the dynamic status (open or closed) is displayed.
CSS:
The styles enhance the layout, centering the content on the screen and providing color-coded feedback for open/closed states.
The .current class highlights the current day with a blue color, and the .open-now and .closed-now classes show green and red colors respectively for open and closed states.
JavaScript:
The highlightCurrentDay function dynamically calculates whether the business is open or closed based on the current time.
The current day is highlighted with the .current class, and the open/closed status is displayed with the current-time div.
The function runs once when the page loads, and then it updates every minute using setInterval to ensure the status is always current.
Explanations:
HTML Section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Business Hours</title>
<style>
/* CSS styles will go here */
</style>
</head>
<body>
<div class="container">
<!-- Heading displaying the title "Our Business Hours" -->
<h1>Our Business Hours</h1>
<!-- A div to hold the list of business hours -->
<div id="hours" class="hours-list">
<ul>
<li id="monday" class="day">Monday: 9:00 AM - 5:00 PM</li>
<li id="tuesday" class="day">Tuesday: 9:00 AM - 5:00 PM</li>
<li id="wednesday" class="day">Wednesday: 9:00 AM - 5:00 PM</li>
<li id="thursday" class="day">Thursday: 9:00 AM - 5:00 PM</li>
<li id="friday" class="day">Friday: 9:00 AM - 5:00 PM</li>
<li id="saturday" class="day">Saturday: Closed</li>
<li id="sunday" class="day">Sunday: Closed</li>
</ul>
</div>
<!-- Div to display the current time status, whether the business is open or closed -->
<div id="current-time" class="current-time"></div>
</div>
<script>
/* JavaScript code will go here */
</script>
</body>
</html>
Explanation of HTML:
<!DOCTYPE html>: This is the doctype declaration for HTML5, indicating that this page is written using HTML5.
<html lang="en">: Defines the language of the document as English (en).
<meta charset="UTF-8">: Specifies the character encoding for the document, ensuring proper handling of characters and symbols.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag ensures the webpage is responsive on all devices, making the layout adapt to the screen width.
<title>Business Hours</title>: Sets the title of the webpage that appears on the browser tab.
CSS (<style>) and JavaScript (<script>) are placed inside the <head> and <body> sections respectively.
<div class="container">: This is the container div that wraps all content, making it easier to style the page.
<h1>Our Business Hours</h1>: A heading for the business hours section.
<div id="hours" class="hours-list">: A div element to hold a list of business hours for each day.
<ul>: The unordered list holds individual <li> elements for each day of the week.
Each <li> has a class="day" and a unique idfor each day (e.g.,id="monday"`) to be targeted by CSS and JavaScript.
<div id="current-time" class="current-time">: A div to display whether the business is open or closed. It will be dynamically updated by JavaScript.
CSS Section:
The CSS styles define the appearance of the elements on the page, such as the business hours and the current time status.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #ffffff;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
max-width: 400px;
width: 100%;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.hours-list {
list-style: none;
padding: 0;
margin: 0;
}
.day {
padding: 10px;
font-size: 16px;
color: #333;
border-bottom: 1px solid #ddd;
transition: background-color 0.3s;
}
.day:hover {
background-color: #f1f1f1;
}
.current-time {
margin-top: 20px;
font-size: 18px;
color: #555;
font-weight: bold;
}
.open-now {
color: #4CAF50;
}
.closed-now {
color: #F44336;
}
.current {
font-weight: bold;
color: #007BFF;
}
Explanation of CSS:
Body Styling:
Sets a background color (#f5f5f5) and uses flexbox to center the content both horizontally and vertically on the screen.
The height: 100vh; ensures that the body takes up the full height of the viewport.
Container Styling:
The .container class gives a white background to the container, adds padding, and a subtle box shadow for a card-like appearance.
It also ensures that the container has a maximum width of 400px and is centered on the page.
List Styling:
.hours-list: Removes default list styling (bullets and margins).
.day: Applies padding, font size, color, and a subtle border at the bottom of each day's hours for visual separation. Also, the transition effect smoothens the hover effect.
Hover Effect:
.day:hover: Changes the background color when a user hovers over a day's hours in the list to enhance interactivity.
Current Time Status Styling:
.current-time: Applies styles for the time status text that will indicate if the business is open or closed.
.open-now and .closed-now: These classes are used to color the status message text in green for "Open" and red for "Closed."
Highlighting Current Day:
.current: This class is used to highlight the current day with a bold font and blue color (#007BFF).
JavaScript Section:
function highlightCurrentDay() {
const daysOfWeek = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
const now = new Date();
const currentDay = now.getDay();
daysOfWeek.forEach(day => document.getElementById(day).classList.remove('current'));
const currentDayName = daysOfWeek[currentDay];
document.getElementById(currentDayName).classList.add('current');
const currentTime = now.getHours() * 60 + now.getMinutes();
const businessHours = {
monday: { open: 9 * 60, close: 17 * 60 },
tuesday: { open: 9 * 60, close: 17 * 60 },
wednesday: { open: 9 * 60, close: 17 * 60 },
thursday: { open: 9 * 60, close: 17 * 60 },
friday: { open: 9 * 60, close: 17 * 60 },
saturday: { open: null, close: null },
sunday: { open: null, close: null },
};
const dayName = daysOfWeek[currentDay];
const statusElement = document.getElementById('current-time');
if (businessHours[dayName].open !== null && businessHours[dayName].close !== null) {
if (currentTime >= businessHours[dayName].open && currentTime < businessHours[dayName].close) {
statusElement.textContent = `We are OPEN now!`;
statusElement.className = 'open-now';
} else {
statusElement.textContent = `We are CLOSED now. Please visit us during business hours.`;
statusElement.className = 'closed-now';
}
} else {
statusElement.textContent = `We are CLOSED today.`;
statusElement.className = 'closed-now';
}
}
highlightCurrentDay();
setInterval(highlightCurrentDay, 60000);
Explanation of JavaScript:
highlightCurrentDay Function:
daysOfWeek Array: This array contains the days of the week, starting from "monday" to "sunday".
new Date(): This object gets the current date and time, and now.getDay() retrieves the day of the week (0-6), where 0 is Sunday and 6 is Saturday.
Highlighting the Current Day:
It first removes any previous current class from the day.
Then, it adds the current class to the current day to highlight it with a blue color.
Current Time: It calculates the current time in minutes (now.getHours() * 60 + now.getMinutes()), allowing us to compare it with business hours.
Business Hours Comparison:
A JavaScript object (businessHours) stores the opening and closing times for each day in minutes. For example, 9:00 AM is represented as 540 (9 60) and 5:00 PM is 1020 (17 60).
The if block checks whether the business is open based on the current time and compares it with the stored opening/closing times. If the business is open, it shows "We are OPEN now!", otherwise "We are CLOSED now."
Updating Every Minute:
The highlightCurrentDay function is called once when the page loads, and then it’s updated every minute with setInterval(highlightCurrentDay, 60000); to ensure the status remains accurate.
Result of the Code:
The post page will display business hours for each day.
The current day will be highlighted in blue.
A message indicating whether the business is open or closed will dynamically update based on the current time. It will also refresh every minute to ensure it is up-to-date.
Business Hours Modifications:
To customize the business hours in the provided code, users can adjust the business hours by modifying the businessHours object within the JavaScript section of the code. Below is an explanation of how to customize the business hours for different days:
1. Find the businessHours Object:
The businessHours object in the code stores the opening and closing times for each day of the week.
Here is the code snippet:
const businessHours = {
monday: { open: 9 * 60, close: 17 * 60 },
tuesday: { open: 9 * 60, close: 17 * 60 },
wednesday: { open: 9 * 60, close: 17 * 60 },
thursday: { open: 9 * 60, close: 17 * 60 },
friday: { open: 9 * 60, close: 17 * 60 },
saturday: { open: null, close: null }, // Closed on Saturday
sunday: { open: null, close: null }, // Closed on Sunday
};
2. Modify the Opening and Closing Times:
Each day in the businessHours object has two values:
open: the time the business opens (in minutes from midnight).
close: the time the business closes (also in minutes from midnight).
To change the opening and closing times, simply adjust the values. For example:
Convert Hours to Minutes: To convert a time like 9:00 AM to minutes, you multiply the hour by 60. For example, 9 AM is 9 * 60 = 540 minutes.
For example, if you want to change the hours for Monday from 9:00 AM - 5:00 PM to 10:00 AM - 6:00 PM, you would modify it like this:
monday: { open: 10 60, close: 18 60 },
Here’s how you can customize business hours for each day:
const businessHours = {
monday: { open: 10 * 60, close: 18 * 60 }, // Opens at 10 AM, closes at 6 PM
tuesday: { open: 9 * 60, close: 17 * 60 }, // Opens at 9 AM, closes at 5 PM
wednesday: { open: 9 * 60, close: 17 * 60 }, // Opens at 9 AM, closes at 5 PM
thursday: { open: 9 * 60, close: 17 * 60 }, // Opens at 9 AM, closes at 5 PM
friday: { open: 9 * 60, close: 15 * 60 }, // Opens at 9 AM, closes at 3 PM
saturday: { open: 10 * 60, close: 14 * 60 }, // Opens at 10 AM, closes at 2 PM
sunday: { open: null, close: null }, // Closed on Sunday
};
In this example:
Monday: 10:00 AM - 6:00 PM
Friday: 9:00 AM - 3:00 PM
Saturday: 10:00 AM - 2:00 PM
Sunday: Closed
3. Make Sure to Set null for Closed Days:
If the business is closed on a specific day (like Saturday or Sunday in the example), leave the open and close values as null. For example:
saturday: { open: null, close: null }, // Closed on Saturday
sunday: { open: null, close: null }, // Closed on Sunday
4. After Making Changes:
Once you have modified the businessHours object, the page will dynamically display the updated business hours and highlight the current day accordingly.
5. Optional: Change the Display Format:
If you want to display the time in a different format, you can adjust how the times are shown in the hours-list section. For example, if you'd like to display times like 10:00 AM - 6:00 PM instead of 600 - 1080 minutes, you would need to convert the time back into hours and minutes before displaying it.
Example of Customized Business Hours:
const businessHours = {
monday: { open: 9 * 60, close: 17 * 60 }, // 9 AM to 5 PM
tuesday: { open: 10 * 60, close: 18 * 60 }, // 10 AM to 6 PM
wednesday: { open: 9 * 60, close: 15 * 60 }, // 9 AM to 3 PM
thursday: { open: 11 * 60, close: 19 * 60 }, // 11 AM to 7 PM
friday: { open: 8 * 60, close: 16 * 60 }, // 8 AM to 4 PM
saturday: { open: null, close: null }, // Closed
sunday: { open: null, close: null }, // Closed
};
In this example:
Monday: 9:00 AM - 5:00 PM
Tuesday: 10:00 AM - 6:00 PM
Wednesday: 9:00 AM - 3:00 PM
Thursday: 11:00 AM - 7:00 PM
Friday: 8:00 AM - 4:00 PM
Saturday: Closed
Sunday: Closed
This way, you can easily customize the opening and closing times for any day of the week to fit your business hours.