Are we open?

A framework to see if we are open at the time specified in a passed array. A more dynamic fork of this code pen: https://codepen.io/zeinab92/pen/xwWGWM

by Brian Layman

HTML

<div id="main">
  <div id="darkBack"></div>
  <div id="logo"><img src="http://401creative.com/wp-content/uploads/2013/07/Griddle_Logo.png" /></div>

  <div id="timeDiv"></div>
  <label class="viewOpen" for="modal-state">View Hours&nbsp;&nbsp;<i class="fa fa-clock-o"></i></label>
  <input type="checkbox" name="modal-state" id="modal-state">
  <div class="modal-overlay">
    <label for="modal-state" class="modal-overlay-close"></label>
    <div class="modal">
      <label class="button-close" for="modal-state"><i class="fa fa-times"></i></label>
      <h2>We're Open At These Times</h2>
      <div id="monday" class="dateTime">
        <div class="day">Monday</div>
        <div class="time">Closed</div>
      </div>
      <br>
      <div id="tuesday" class="dateTime">
        <div class="day">Tuesday</div>
        <div class="time">Closed</div>
      </div>
      <br>
      <div id="wednesday" class="dateTime">
        <div class="day">Wednesday</div>
        <div class="time">4pm - 12am</div>
      </div>
      <br>
      <div id="thursday" class="dateTime">
        <div class="day">Thursday</div>
        <div class="time">4pm - 12am</div>
      </div>
      <br>
      <div id="friday" class="dateTime">
        <div class="day">Friday</div>
        <div class="time">4pm - 12am</div>
      </div>
      <br>      
      <div id="saturday" class="dateTime">
        <div class="day">Saturday</div>
        <div class="time">1pm - 12am</div>
      </div>
      <br>
      <div id="sunday" class="dateTime">
        <div class="day">Sunday</div>
        <div class="time">1pm - 12am</div>
      </div>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

#main {
  background: url(http://files.kaboompics.com/upload/823_min.jpg);
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
  text-align: center;
  position: absolute;
}

#logo {
  top: 10%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 10px;
  max-width: 400px;
}

#logo img {
  width: 100%;
}

#darkBack {
  position: absolute;
  background: rgba(255, 255, 255, 0.75);
  width: 100%;
  height: 100%;
}

#timeDiv {
  font-size: 15px;
  text-transform: uppercase;
  position: relative;
  max-width: 325px;
  background: #fff;
  width: 85%;
  margin: 0 auto;
  top: 50%;
  padding: 10px;
  border-radius: 3px;
  -webkit-box-shadow: 0 8px 16px -8px #adadad;
  -moz-box-shadow: 0 8px 16px -8px #adadad;
  box-shadow: 0 8px 16px -8px #adadad;
  display: inline-block;
  vertical-align: top;
  font-weight: 600;
}

.open {
  color: #27ae60;
  border: 2px solid #27ae60;
}

.closed {
  color: rgba(231, 76, 60, 0.85);
  border: 2px solid rgba(231, 76, 60, 0.8);
}

.viewOpen {
  font-size: 15px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border: 2px solid rgba(70, 70, 70, 0.7);
  max-width: 170px;
  background: #fff;
  width: 100%;
  color: rgba(70, 70, 70, 0.8);
  margin: 0 auto;
  top: 50%;
  padding: 10px;
  border-radius: 3px;
  -webkit-box-shadow: 0 8px 16px -8px #adadad;
  -moz-box-shadow: 0 8px 16px -8px #adadad;
  box-shadow: 0 8px 16px -8px #adadad;
  cursor: pointer;
}

.viewOpen i {
  color: rgba(70, 70, 70, 0.8);
}

@media all and (max-width: 600px) {
  #timeDiv {
    margin-bottom: 20px;
  }
}

@media all and (min-width: 601px) {
  #timeDiv {
    margin-right: 15px;
  }
}

.dateTime {
  max-width: 320px;
  margin: 0 auto;
  clear: both;
}

.day {
  display: inline-block;
  float: left;
}

.time {
  display: inline-block;
  float: right
}

.today {
  color: rgb(200, 85, 39);
 ...

JavaScript

jQuery( document ).ready(function($) {

	var isOpen = function(hours,currentTime,offsetHours,hasDST,isDST){
			var result = false;
			if (hours == '') {
				return false;
			} else {
				hours.forEach( function(hourSet) {
					splitHours = hourSet.split(',');
					var isoDate = new Date(currentTime.getTime() - (currentTime.getTimezoneOffset() * 60000)).toISOString();
					var open = new Date(isoDate.substring(0, 10) + ' ' + splitHours[0]);
					var close = new Date(isoDate.substring(0, 10) + ' ' + splitHours[1]);
					var dstOffset = 0;
					if ( isDST ) {
						dstOffset = 3600;
					}
					var offsetSec = ( offsetHours * 60 * 60 ) + ( currentTime.getTimezoneOffset() * 60 ) + dstOffset;
					// eg 
					if (hasDST && !isDST) {							
						// Looking at AZ/MST from EDT 3 = (-7) + (5) - 1
						// At 5 in OH in summer, difference it is 2 in Az. So I need to add 3 hours to count down timer
						offsetSec = offsetSec - 3600;
					} else if (!hasDST && isDST) {
						// Looking at EDT from AZ/MST 3 = (5) + (-7) + 1. So I need to take 3 more hours to count down timer.
						offsetSec = offsetSec + 3600;
					} 

					if ((open.getTime() < (currentTime.getTime() + offsetSec*1000)) && ((currentTime.getTime() + offsetSec*1000 ) < close.getTime()))  {
						result = ((close.getTime() - currentTime.getTime())/1000) - offsetSec;
					}
				});
				return result;
			}
		}
	var checkTime = function(inHours,inOffsetHours,inObservesDST) {
			Date.prototype.stdTimezoneOffset = function () {
				var jan = new Date(this.getFullYear(), 0, 1);
				var jul = new Date(this.getFullYear(), 6, 1);
				return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
			}

			Date.prototype.isDstObserved = function () {
				return this.getTimezoneOffset() < this.stdTimezoneOffset();
			}
			var now = new Date();
			var isDST = now.isDstObserved();
			var today = weekday[now.getDay()];
			var dayOfWeek = now.getDay();
			var hour = now.getHours();
			var minutes =...