Text Clock

index.html

<!--
 DOWNLOAD ME HERE: 
 https://chrome.google.com/webstore/detail/text-clock/caacmmeopdailkdlgkimndodjipilaha
-->
<div id="text-clock">
  <!-- line 1 -->
  <p id="line-1">
    <span id="it" class="active">IT</span>L<span id="is" class="active">IS</span>AS<span id="tgif">GTFI</span>
  </p>
  <!-- line 2 -->
  <p id="line-2">
    AC<span id="quarter" class="desc">QUARTER</span>BS
  </p>
  <!-- line 3 -->
  <p>
    <span id="twenty" class="desc">TWENTY</span><span id="five" class="desc">FIVE</span>X
  </p>
  <!-- line 4 -->
  <p>
    <span id="half" class="desc">HALF</span>B<span id="ten" class="desc">TEN</span>F<span id="to" class="desc">TO</span>
  </p>
  <!-- line 5 -->
  <p>
    <span id="past" class="desc">PAST</span>ERU<span id="nine" class="hr">NINE</span>
  </p>
  <!-- line 6 -->
  <p>
    <span id="one" class="hr">ONE</span><span id="six" class="hr">SIX</span><span id="three" class="hr">THREE</span>
  </p>
  <!-- line 7 -->
  <p id="line-7">
    <span id="four" class="hr">FOUR</span><span id="five-hr" class="hr">FIVE</span><span id="two" class="hr">TWO</span>
  </p>
  <!-- line 8 -->
  <p id="line-8">
    <span id="eight" class="hr">EIGHT</span><span id="eleven" class="hr">ELEVEN</span>
  </p>
  <!-- line 9 -->
  <p id="line-9">
    <span id="seven" class="hr">SEVEN</span><span id="twelve" class="hr">TWELVE</span>
  </p>
  <!-- line 10 -->
  <p id="line-10">
    <span id="ten-hr" class="hr">TEN</span>SE<span id="oclock" class="desc">OCLOCK</span>
  </p>
  <!-- line 11 -->
  <p id="line-11">
    <span id="midnight" class="hr">MIDNIGHT</span>
  </p>
</div>

script.js

function textClock() {

    var newDate = new Date(),
        day = newDate.getDay(),
        hours = newDate.getHours(),
        minutes = newDate.getMinutes().toString(),
        seconds = newDate.getSeconds().toString();

    if (hours > 12 && hours !== 0 && hours !== 23) {
        hours = hours - 12;
    }
    if (minutes < 10) {
        minutes = 0 + minutes;
    }
    if (seconds < 10) {
        seconds = 0 + seconds;
    }

    var minsSecs = minutes + seconds;
    if (minsSecs > 3230) {
        hours++;
    }

    if (day == 5) {
        $('#tgif').html('TGIF');
    }

    hoursObj = {
        1: '#one',
        2: '#two',
        3: '#three',
        4: '#four',
        5: '#five-hr',
        6: '#six',
        7: '#seven',
        8: '#eight',
        9: '#nine',
        10: '#ten-hr',
        11: '#eleven',
        12: '#twelve',
        23: '#eleven',
        24: '#midnight',
        0: '#midnight'
    };

    updateHour(hoursObj[hours]);

    if ((minsSecs >= 5730 && minsSecs < 6000) || (minsSecs >= 0 && minsSecs < 230)) {
        if (hours !== 24 && hours !== 0) {
            updateDesc('#oclock');
        }
    } else if (minsSecs >= 230 && minsSecs < 730) {
        updateDesc('#five, #past');
    } else if (minsSecs >= 730 && minsSecs < 1230) {
        updateDesc('#ten, #past');
    } else if (minsSecs >= 1230 && minsSecs < 1730) {
        updateDesc('#quarter, #past');
    } else if (minsSecs >= 1730 && minsSecs < 2230) {
        updateDesc('#twenty, #past');
    } else if (minsSecs >= 2230 && minsSecs < 2730) {
        updateDesc('#twenty, #five, #past');
    } else if (minsSecs >= 2730 && minsSecs < 3230) {
        updateDesc('#half, #past');
    } else if (minsSecs >= 3230 && minsSecs < 3730) {
        updateDesc('#twenty, #five, #to');
    } else if (minsSecs >= 3730 && minsSecs < 4230) {
        updateDesc('#twenty, #to');
    } else if (minsSecs >= 4230 && minsSecs < 4730) {
        updateDesc('#quarter, #to');
    } else if (minsSecs >= 4730 && minsSecs < 5230) {
        updateDesc('#ten, #to');
    } else if (minsSecs >= 5230 && minsSecs < 5730) {
        updateDesc('#five, #to');
    } else {
        updateDesc();
    }
}

function updateDesc(classes) {
    $('.desc').removeClass('active');
    $(classes).addClass('active');
}

function updateHour(classes) {
    $('.hr').removeClass('active');
    $(classes).addClass('active');
}

setInterval(function() {
    textClock();
}, 1000);

textClock();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body{
	background: #000;
	color: #fff;
	font-family: Helvetica, Arial;
	text-align: justify;
	pointer-events: none;
  -webkit-user-select: none;
}

p, span{
	color: #333333;
	transition: color 0.4s ease-out;
	-ms-transition: color 0.4s ease-out;
    -moz-transition: color 0.4s ease-out;
    -webkit-transition: color 0.4s ease-out;
	letter-spacing: 12.1px;
	font-size: 17px;
}

#midnight{
	color: #000;
	letter-spacing: 23px;
}

#it, #is, span.active{
	color: #fff !important;
	transition: color 0.4s ease-out;
	-ms-transition: color 0.4s ease-out;
    -moz-transition: color 0.4s ease-out;
    -webkit-transition: color 0.4s ease-out;
}

#text-clock{
	width: 242px;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-transform: uppercase;
}

#line-1, #line-1 span{
	letter-spacing: 13.9px;
}
#line-2, #line-2 span{
	letter-spacing: 11.3px;
}
#line-7, #line-7 span{
	letter-spacing: 11.8px;
}
#line-8, #line-8 span{
	letter-spacing: 12.3px;
}
#line-9, #line-9 span{
	letter-spacing: 11.6px;
}
#line-10, #line-10 span{
	letter-spacing: 11.6px;
}

.hidden{
	display: none;
}

Text Clock.markdown

Text Clock

A text readable clock. Availble here: https://chrome.google.com/webstore/detail/text-clock/caacmmeopdailkdlgkimndodjipilaha

A Pen by Bill Searle on CodePen.

License.

Text-Clock.markdown

Text Clock

A text readable clock. Availble here: https://chrome.google.com/webstore/detail/text-clock/caacmmeopdailkdlgkimndodjipilaha

A Pen by Bill Searle on CodePen.

License.