diff --git a/index.css b/index.css index ec4a909..2932fde 100644 --- a/index.css +++ b/index.css @@ -1,16 +1,31 @@ body { - background-color: #80d4ea; + background-color: darkgray; } #clock { + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: black; 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; + font-family: 'Roboto Mono', monospace; + position: absolute; + top: -15%; +} + + +#clockDate{ + height: 100px; + margin: auto; + top: 0; left: 0; bottom: 0; right: 0; + text-align: center; + color: black; + font-size: 2em; + font-family: 'Roboto Mono', monospace; + position: absolute; +top: 45%; +/*transform: translateY(-70%);*/ } diff --git a/index.html b/index.html index 191d3cc..4f3891c 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,19 @@ Clock Tower + -
+

+

+ + + diff --git a/index.js b/index.js index 877a3aa..70cb628 100644 --- a/index.js +++ b/index.js @@ -1 +1,28 @@ -// Your code here +$(document).ready(function(){ + var clock = document.getElementById('clock') + var clockDate = document.getElementById('clockDate') + + var digitalClock = function(){ + var date = new Date(); + // var time = date.toLocaleTimeString(); + // var hours = date.getHours().toString(); + // var minutes = date.getMinutes().toString(); + // var seconds = date.getSeconds().toString(); + + // var twoDigits = function(numString){ + // if (numString < 10){ + // numString = "0" + numString; + // } + // return numString + // } + // var timeString = twoDigits(hours) + ":" + twoDigits(minutes) + ":" + twoDigits(seconds); + // clock.textContent = timeString; + clock.textContent = date.toLocaleTimeString() + clockDate.textContent = date.toDateString() + + // $("#clock").text(timeString); + + } + + setInterval(digitalClock, 1000) +});