JSFiddle - React, Tailwind, and code Playground

by rionmonster

HTML

<div id='cover'>
    <div id='login'>
        <form id='test'>Enter your Login Code<br />
        <input style='font-size: xx-large; ' type='password' />
        <br />
        <div id='validation' style='text-align: center; font-size: large;'></div>
        </form>
    </div>
    <div id='time'>
    <div id='currenttime'></div>
    <div id='day'></div>
    <div id='date'><span id='month'></span> <span id='dayth'></span></div>
</div>
</div>
<div id='seal' ></div>

CSS

#cover
{
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     opacity: 0.80;
     position: absolute;
     background-color: black; 
     display: none;
     z-index: 999999998;
}

#login
{
     
     font-family: Segoe UI;
     color: White;
     height: auto;
     width: 400px;
     top: 40%;
     right: 10%;  
     margin-left: -200px;
     margin-top: auto;
     position: absolute;
     z-index:999999999;

     font-size: xx-large;
     text-align: center;
}

#seal
{
  float: left;
  height: 32px;
  width: 32px;
  display: block;
  background-image:url("http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Lock-icon.png");
}

#time
{
     position: absolute;
     bottom: 0;
     left: 30px;
     
     color: White;
     font-family: Segoe UI;
     width: 525px;;
     height: 270px;
}

#currenttime
{
     font-size: 100px;   
     color: White;
}

#day { font-size: 60px; margin-top: -30px; color: White;}
#date { font-size: 60px; margin-top: -10px; color: White;}

JavaScript

$("#seal").click(function(){$('#cover').slideDown(); $('input:first').val(''); $("#validation").html(''); $("input:first").focus();});

$('form').submit(function(){
     
    if($('input:first').val() == '1234')
    {
        $("#validation").html("Resuming Session...").css('color','green').hide().fadeIn();
        window.setTimeout(function(){$("#cover").slideUp();},1000);
             
    }else
    {
         $("#validation").html("Incorrect Code Entered").css('color','red').hide().fadeIn().delay(2000).fadeOut();
    }  
    return false;
});


initializeClock();
window.setInterval(function(){setClockTime();},60000);

function setClockTime()
{
   var now    = new Date();
   var hour   = now.getHours();
   var minute = now.getMinutes();
   var ap = (hour   > 11) ? "PM" : "AM";
   hour = (hour > 12) ? hour - 12 : (hour == 0) ? 12 : hour;
   if (minute < 10) { minute = "0" + minute; }
   $("#currenttime").text(hour +':' +minute +" " +ap).hide().fadeIn();
}

function initializeClock()
{
      setClockTime();
      var d=new Date();
      var wd= [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
      $("#day").text(wd[d.getDay()]);
      var m= [ 'January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'];
      $("#month").text(m[d.getMonth()]);
      
      var dayth = getGetOrdinal(d.getDate());
      $("#dayth").text(dayth);
      
}

function getGetOrdinal(n) {
   var s=["th","st","nd","rd"],
       v=n%100;
   return n+(s[(v-20)%10]||s[v]||s[0]);
}