akakiev/digital-clock.markdown

## digital-clock.markdown

      
    Raw
  

              digital-clock.markdown
            
          
    Digital Clock

A Pen by Serhii on CodePen.
License.

  
## index.html
<body>
<div id='clock'></div>
  </body>

## script.js
$(document).ready( function() {
    function displayTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        var meridiem = "AM";
         if (hours > 12) {
            hours = hours - 12;
            meridiem = "PM";
        }
         if (hours === 0) {
            hours = 12;
        }
               if(hours < 10) {

            hours = "0" + hours;
        }
         if(minutes < 10) {
            minutes = "0" + minutes;
        }
        if(seconds < 10) {
            seconds = "0" + seconds;
        }
var clockDiv = document.getElementById('clock');
        clockDiv.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem;
    }
    displayTime();
    setInterval(displayTime, 1000);
});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

## style.css

body {
    background-color: #80d4ea;
}

#clock {
    height: 100px;
    width: 800px;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    padding-top: 70px;
    font-family: courier, monospace;
    text-align: center;
    color: white;
    font-size: 100px;
}
	$(document).ready( function() {
	function displayTime() {
	var currentTime = new Date();
	var hours = currentTime.getHours();
	var minutes = currentTime.getMinutes();
	var seconds = currentTime.getSeconds();
	var meridiem = "AM";
	if (hours > 12) {
	hours = hours - 12;
	meridiem = "PM";
	}
	if (hours === 0) {
	hours = 12;
	}
	if(hours < 10) {

	hours = "0" + hours;
	}
	if(minutes < 10) {
	minutes = "0" + minutes;
	}
	if(seconds < 10) {
	seconds = "0" + seconds;
	}
	var clockDiv = document.getElementById('clock');
	clockDiv.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem;
	}
	displayTime();
	setInterval(displayTime, 1000);
	});
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

	body {
	background-color: #80d4ea;
	}

	#clock {
	height: 100px;
	width: 800px;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	padding-top: 70px;
	font-family: courier, monospace;
	text-align: center;
	color: white;
	font-size: 100px;
	}