Is it Open jQuery App for stores/restaurants - Add in places you frequently go, and see if they are currently open. beta! A CodePen by Alex Bezuska.

is it open? .html

<header class="main bar top" >
  <h1>Is it Open?</h1>

<p class="curTime"> Current time: <br>
  <span class="time"></span></p>
</header>

       
<div class="grid">
<div class="col-1-2"><a href="http://goo.gl/maps/pJocm">
  <div class="module">
  <div class="openOrNot">...loading</div>
  <header>Chipotle<span class="where">4th St Live</span></header>
   Hours Today:<br>
<span class="1">11:00 am - 10:00 pm</span>
<span class="2">11:00 am - 10:00 pm</span>
<span class="3">11:00 am - 10:00 pm</span>
<span class="4">11:00 am - 10:00 pm</span>
<span class="5">11:00 am - 10:00 pm</span>
<span class="6">11:00 am - 10:00 pm</span>
<span class="0">11:00 am - 10:00 pm</span>
  </div></a>
  </div>

<div class="col-1-2"><a href="http://goo.gl/maps/eZurT">
  <div class="module">
  <div class="openOrNot">...loading</div>
  <header>Denny's<span class="where">Crittenden Dr</span></header>
   Hours Today:<br>
<span class="1">Open 24 hours</span>
<span class="2">Open 24 hours</span>
<span class="3">Open 24 hours</span>
<span class="4">Open 24 hours</span>
<span class="5">Open 24 hours</span>
<span class="6">Open 24 hours</span>
<span class="0">Open 24 hours</span>
 </div></a>
  </div>
  <div class="col-1-2"><a href="http://goo.gl/maps/Hdcom">
  <div class="module">
    <div class="openOrNot">...loading</div>
  <header>Taco Bell<span class="where">Bardstown Road</span></header>
   Hours Today:<br>
<span class="1">10:00AM - 4:30AM</span>
<span class="2">10:00AM - 4:30 am</span>
<span class="3">10:00AM - 4:30AM</span>
<span class="4">10:00AM - 4:30AM</span>
<span class="5">10:00AM - 5:00 am</span>
<span class="6">10:00AM - 5:00 am</span>
<span class="0">10:00AM - 4:30 am</span>
 </div></a>
    </div>
  
  <div class="col-1-2"><a href="http://goo.gl/maps/mQfpi">
  <div class="module">
    <div class="openOrNot">...loading</div>
    <header>Tom & Chee<span class="where">Bardstown Road</span></header>
   Hours Today: <br> 
<span class="1">10:30 am – 10:00 pm</span>
<span class="2">10:30 am – 10:00 pm</span>
<span class="3">10:30 am – 10:00 pm</span>
<span class="4">10:30 am – 10:00 pm</span>
<span class="5">10:30 am – 10:00 pm</span>
<span class="6">10:30 am – 10:00 pm</span>
<span class="0">11:00 am – 9:00 pm</span>
 </div></a>
    </div>
    
      <div class="col-1-2"><a href="http://goo.gl/maps/WzNH2">
  <div class="module">
    <div class="openOrNot">...loading</div>
    <header>Book & Music Exchange<span class="where">Bardstown Road</span></header>
   Hours Today: <br> 
<span class="1">9:00 am - 10:00 pm</span>
<span class="2">9:00 am - 10:00 pm</span>
<span class="3">9:00 am - 10:00 pm</span>
<span class="4">9:00 am - 10:00 pm</span>
<span class="5">9:00 am - 10:00 pm</span>
<span class="6">9:00 am - 10:00 pm</span>
<span class="0">12:00 pm - 7:00 pm</span>
 </div></a>
        </div>
        
         <div class="col-1-2"><a href="http://goo.gl/maps/SCPo5">
  <div class="module">
    <div class="openOrNot">...loading</div>
    <header>Book & Music Exchange<span class="where">Preston Hwy</span></header>
   Hours Today: <br> 
<span class="1">9:00 am - 10:00 pm</span>
<span class="2">9:00 am - 10:00 pm</span>
<span class="3">9:00 am - 10:00 pm</span>
<span class="4">9:00 am - 10:00 pm</span>
<span class="5">9:00 am - 10:00 pm</span>
<span class="6">9:00 am - 10:00 pm</span>
<span class="0">12:00 pm - 7:00 pm</span>
 </div></a>
           </div>
     <div class="col-1-2"><a href="http://goo.gl/maps/9fAAs">
  <div class="module">
  <div class="openOrNot">...loading</div>
  <header>QDoba<span class="where">Bardstown Road</span></header>
   Hours Today:<br>
<span class="1">10:30 am – 11:00 pm</span>
<span class="2">10:30 am – 11:00 pm</span>
<span class="3">10:30 am – 11:00 pm</span>
<span class="4">Open 24 hours</span>
<span class="5">Open 24 hours</span>
<span class="6">10:05 am – 11:00 pm</span>
<span class="0">10:30 am – 11:00 pm</span>
 </div></a>
       </div>
    
    
    
    
  </div>
     <br>      
           <div class="grid">
             Version 0.1<br>
             Future features:<br>
             CouchDB backend with templates for locations<br>
             Click to get directions - already partially working<br>
             Login/account to track your own list of locations<br>
             <br>
               To help with the project or share some ideas, pm me on twitter @alexbezuska
           </div>
     

script.js

// May 21, 2013 12:48 AM - added 12 hour clock to header
function displayTime() {
    var str = "";
    var currentTime = new Date();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
   if (hours > 12) {
        hours = (hours - 12);
    }
  if (hours == 0) {
        hours = 12;
    }
    if (minutes < 10) {
        minutes = ("0" + minutes);
    }
    str += (hours + ":" + minutes);
    return str;
}
$(".time").text(displayTime);
//get the time
function computerTime() {
    var str = "";
    var currentTime = new Date();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    if (minutes < 10) {
        minutes = ("0" + minutes);
    }
    str += (hours + ":" + minutes);
    return str;
}

//make a variable called currentTime out of an intenger comprised of time with its : replaced with nothing
var currentTime = parseInt(computerTime().replace(":", ""));
console.log("the variable currentTime has " + currentTime);



//create variables for the two values, openTime and closeTime




// make a function that runs on each of the modules
$(".module").each(function () {

    //we need to figure out what day yesterday was
    //get the current day store it in a variable called 'day'
    var day = new Date().getDay();
    //yesterday is always today -1, except for sunday
    var yesterday = (day - 1);
    // fix for the sunday problem:
    if (yesterday == "-1") {
        yesterday = "6";
    }
    //test to make sure it works:
    console.log("today is day: " + day + " Yesterday was day: " + yesterday);

    // figure out the openTimeYesterday and closeTimeYesterday

    //create a variable called timeSet containing the text of spans inside of a module
    var thisTimeSetYesterday = $(this).find("." + yesterday).text();
    console.log("the variable thisTimeSetYesterday has " + thisTimeSetYesterday);
    //seperate time set into two values

    var result = [],
        regex = /(\d{1,2}):(\d{1,2})\s?(am|pm)/gi;

    thisTimeSetYesterday.replace(regex, function (_, hours, minutes, meridian) {
        hours = +hours;
        if (meridian.toLowerCase() == 'pm') hours += 12;
        result.push(+(hours + '' + minutes));
    });

    var openTimeYesterday = (result[0]);
    var closeTimeYesterday = (result[1]);
    console.log("the variable openTimeYesterday has " + openTimeYesterday);
    console.log("the variable closeTimeYesterday has " + closeTimeYesterday);
    console.log("the variable currentTime has " + currentTime);


    //if yesterday's close time was after noon and the current time is before 

    if (closeTimeYesterday < 1200 && currentTime < 2400) {
        //hide all but yesterday's times in the box 

        $(".module").children("span").hide();
        $(".module").children("." + yesterday).show();
    } else {
        //hide all but today's times in the box 
        $(".module").children("span").hide();
        $(".module").children("." + day).show();
    }



}); // end open late function



$(".module").each(function () {
    debugger;
    if ($(this).children("span").is(":visible")) {



        var openIndicator = $(this).find(".openOrNot");
        var thisTimeSet = $(this).children("span:visible").text();

        console.log("the variable thistimeSet has " + thisTimeSet);




        var result = [],
            regex = /(\d{1,2}):(\d{1,2})\s?(am|pm)/gi;

        thisTimeSet.replace(regex, function (_, hours, minutes, meridian) {
            hours = +hours;
            if (meridian.toLowerCase() == 'pm') hours += 12;
            result.push(+(hours + '' + minutes));
        });

        var openTime = (result[0]);
        var closeTime = (result[1]);
        console.log("the variable openTime has " + openTime);
        console.log("the variable closeTime has " + closeTime);
        console.log("the variable currentTime has " + currentTime);





        if (closeTime <= "1200") // is the closing time less than noon?
        {
            //yes
            if (currentTime <= closeTime || currentTime <= "2400")

            {
                $(openIndicator).text("OPEN");
            } else {
                $(openIndicator).text("CLOSED");
            }
        } else {
            //no
            if (openTime <= currentTime && currentTime <= closeTime) {
                $(openIndicator).text("OPEN");
            } else {
                $(openIndicator).text("CLOSED");
            }

        }

        //this part doesen't work right
        if (thisTimeSet.indexOf('Open 24 hours') > -1) {

            $(this).find('.openOrNot').text("ALWAYS OPEN");
           
        }



    } else {}
 
}); // end of a second function that runs on each of the modules


// Monday May 20, 2013 11:53 PM - added feature of greying out closed locations.
$('.module').each(function(){
  
  var openIndicator = $(this).find('.openOrNot');
  if($(openIndicator).text() =='CLOSED'){
    var whatisthis = $(this);
    console.log("what is this =  " + whatisthis);
  $(this).addClass('closed');
  
  }else{ }
});

style.scss

@import "compass";
/* make stuff not look like crap */
$dark: #1a1a1a;
body{
width: 100% !important;
  color: white;
  font-family: sans-serif;
   min-width: 465px;
	padding: 0 !important;
  margin: 0 !important;
  
  background: url(http://subtlepatterns.com/patterns/[email protected]) $dark;
  background-size: 300px 300px;
}
* {-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/* make stuff not look like crap */
* {-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

header.main{
  

  z-index: 1200;
  h1{
  font-weight: 100;

    position: absolute;
    top: 15px;
    left: 25px;
    
}
  
  .curTime{
  font-weight: 100;
   
    position: absolute;
    top: 15px;
    right: 25px;
    span{
      font-size: 45px;
    }
    
}
  background: $dark;
  border-bottom:2px solid lighten($dark, 10%);
  width: 100%;
  padding: 10px;
  height: 100px;
  position: fixed ;
  top: 0px ;
  left: 0px;
  right: 0px;
  display: block;
  
}



a{ text-decoration: none;}
  .module{
  &:hover{
    background: #f06d06;
      color: white ;
      header{ color: white ;}
  }
  
  header{
    font-size: 24px;
    color: $dark;
      
    .where{
      display: block;
      font-size: 18px;
    }
  }
    position: relative;
  -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
    -ms-border-radius: 4px;
     -o-border-radius: 4px;
        border-radius: 4px;
  background: white;
  color: lighten($dark, 30%);
    padding: 20px 25px 10px 25px;
  margin: 5px;
  height: 120px;
  }

.closed{
&:hover{
  background: white;
      color: lighten($dark, 30%);
      header{ color: $dark;}
  }
  
	opacity: 0.5;
 .openOrNot{
   background: lighten($dark, 40%);
  }
}
.grid { width: 100%;
top: 110px;
  padding: 10px;
position: relative;
  &:after{
     clear: both;
 display: table;
 content:"";
  }
}

[class*='col-'] {
position: relative;
 display: inline-block;
  float: left;
  top: 0px;
  vertical-align: top;
}

.col-1-2 {
  width: 100%;
}
@media (min-width: 1600px)  {
  .col-1-2 {
    width: 20%;
  }
}
@media (min-width: 1200px)  and (max-width: 1599px){
  .col-1-2 {
    width: 25%;
  }
}
@media (min-width: 975px) and (max-width: 1199px){
  .col-1-2 {
    width: 33.33%;
  }
}
@media (min-width: 550px)  and (max-width: 974px){
  .col-1-2 {
    width: 50%;
  }
}




.openOrNot{
  display: inline;
  margin-left: 5px;
  background: #f06d06;
  padding: 4px 10px 4px 10px;
  color: white;
  -webkit-border-radius: 0px 4px 0px 0px;
 
  position: absolute;
  top: 0px;
  right: 0px;
}