Article Categories

Selected Reading

Display whether the office is closed or open right now on the basis of current time with JavaScript ternary operator

Javascript Web Development Object Oriented Programming

Let's say we are matching the current date and time with the business hours. We need to display whether the office is closed or open right now on the basis of current time.

We can get the current hour from the Date object and use the JavaScript ternary operator to determine if the office is open or closed based on business hours.

Syntax

const currentHour = new Date().getHours();
const status = (condition) ? 'Open' : 'Closed';

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Office Hours Checker</title>
</head>
<body>
   <h2>Office Status</h2>
   <p id="status"></p>
   <p id="current-time"></p>

   <script>
      // Get current hour (0-23)
      const currentHour = new Date().getHours();
      
      // Check if office is open (10 AM to 6 PM)
      const officeStatus = (currentHour >= 10 && currentHour < 18) ? 'Open' : 'Closed';
      
      // Display the status
      document.getElementById('status').innerHTML = `Office is currently: <strong>${officeStatus}</strong>`;
      document.getElementById('current-time').innerHTML = `Current hour: ${currentHour}:00`;
   </script>
</body>
</html>

Output

Office is currently: Open
Current hour: 14:00

Note: The output will vary depending on your current time. If the current hour is between 10 AM (10) and 6 PM (18), it shows "Open", otherwise "Closed".

How It Works

Enhanced Example with More Details

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Office Hours Checker</title>
   <style>
      .open { color: #28a745; font-weight: bold; }
      .closed { color: #dc3545; font-weight: bold; }
   </style>
</head>
<body>
   <h2>Office Status Checker</h2>
   <div id="office-info"></div>

   <script>
      const now = new Date();
      const currentHour = now.getHours();
      const currentMinute = now.getMinutes();
      
      // Office hours: 10 AM to 6 PM (18:00)
      const isOpen = (currentHour >= 10 && currentHour < 18) ? true : false;
      const status = isOpen ? 'Open' : 'Closed';
      const statusClass = isOpen ? 'open' : 'closed';
      
      // Format current time
      const timeString = `${currentHour.toString().padStart(2, '0')}:${currentMinute.toString().padStart(2, '0')}`;
      
      // Display information
      document.getElementById('office-info').innerHTML = `
         <p>Current Time: ${timeString}</p>
         <p>Office Hours: 10:00 - 18:00</p>
         <p class="${statusClass}">Status: ${status}</p>
      `;
   </script>
</body>
</html>

Key Points

getHours() returns the hour in 24-hour format (0-23)
Ternary operator provides a concise way to write if-else conditions
Business logic assumes office hours are 10 AM to 6 PM
Real-time status changes automatically based on current time

Conclusion

The ternary operator provides a clean, readable way to determine office status based on current time. This approach is perfect for displaying real-time business hour information on websites.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

409 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next