#7 Simple Digital Clock

7-simple-digital-clock.markdown

#7 Simple Digital Clock

A Pen by Vincent Tang on CodePen.

License.

index.html

<div class="center-container">
  <div class="clock-box">
    <h3>The current time in EST is</h3>
    <p class="time-now">This gets replaced by js innerhtml</p>
  </div>
</div>

script.js

/*Can opt to declare Obj in outputClock constantly on setInterval (using API only, no math) constantly with .getHours / .getMinutes/.getSeconds, but not resource efficient*/

/***
 *         ██╗███████╗
 *         ██║██╔════╝
 *         ██║███████╗
 *    ██   ██║╚════██║
 *    ╚█████╔╝███████║
 *     ╚════╝ ╚══════╝
 *                    
 */

// Set CONST where new timer output displayed
const TIMESLOT = document.querySelector(".time-now");

// Initialize date / time when you first open page up
var dateObj = new Date(); 
let hr = dateObj.getHours();
let min = dateObj.getMinutes();
let sec = dateObj.getSeconds();

// Run timer from initial values using standard hr/min/sec timer
function outputTheClock() {
  TIMESLOT.innerHTML = leadingZero(hr) + ":" + leadingZero(min) + ":" + leadingZero(sec);

  sec+=1;
  if (sec==60){ sec=0; min+=1; }
  if (min==60){ min=0; hr+=1;  }
  if (hr==24) { hr=0;          }
}

// Add a 0 if min|hr|sec is less than 9, so it look purty
function leadingZero(time) {
  return time<=9 ? time="0"+time : time;
}

// Output the new time every second
var interval = setInterval(outputTheClock, 1000);; //1000ms = 1second

scripts

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

style.scss

/* 
 * Author: Vincent Tang
 * Description: A simple digital clock in military time format, EST time zone.
 * Things learned: Basic Math with interval to call func everytime at 1000ms or 1s. Modifying innerHTML using javascript. Making a date object. 
 * Date Started:  !(12/7/2017 14:30)
 * Sources: Lynda.com JS essential Training - Typing SpeedTester + Clock as reference
 */

/***
 *     ██████╗███████╗███████╗
 *    ██╔════╝██╔════╝██╔════╝
 *    ██║     ███████╗███████╗
 *    ██║     ╚════██║╚════██║
 *    ╚██████╗███████║███████║
 *     ╚═════╝╚══════╝╚══════╝
 *                            
 */

@mixin centerer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-container {
  @include centerer;
  height: 100vh;
}

.clock-box {
  @include centerer;
  flex-direction: column;
  width: 300px;
  height: 100px;
  
  text-align: center;
  background-color: lightgrey;
}