From dcd1450b4818d16bb3c43fd80dfb97c1344b4f0a Mon Sep 17 00:00:00 2001 From: Jeremiah Adkins Date: Mon, 31 Jul 2017 23:18:49 -0400 Subject: [PATCH] added event listeners --- .../style.scssc | Bin 5331 -> 5601 bytes css/style.css | 7 +- css/style.css.map | 2 +- main.js | 76 +++++++++++------- scss/style.scss | 8 +- 5 files changed, 57 insertions(+), 36 deletions(-) diff --git a/.sass-cache/9e714dfd47ad9bab2d70b3ee99690702320fc3c0/style.scssc b/.sass-cache/9e714dfd47ad9bab2d70b3ee99690702320fc3c0/style.scssc index 9ee29bf76cb8463d5906bfcb448901be3a989fe2..448410383cc0159e5182b393331a0f2b6d76dd7f 100644 GIT binary patch delta 1748 zcmZuxO-vI(6wZ_`+jhHjciW}^KWPyVEm>=zEkk4o7bGSeN%T}oOE%P2p+Sf-(W@uS z^JKyS4<;sFJd()StBK*pK@$(gn+FrUIkVl)(z1s(@9lo?ec!zA?R>rd{l-yzx?HZ# z-7=~M{VSK}%0{y}KVLV>rIJypR!dvea=liqHcOR{%l|w`1Uzz95OJ)7<9?jz;G~E( zQ^YA#!Rbqx3Q2F#73Ukm?Rbj}7?~LE>L}p=DTPyg6czhHW;q@#_01-1QZa9a> z!r=@_;4DdEqov z5NC`mi@`Uc1iyXnv+B?>Rr)r|*;F|7zj4J}yM);dJa)x6wy5BdW(sax&bS!!G*p5q zfkl=j0T$6N1bwhP(T2oo^tI!O#ylZz7>9&aT=fKf;-}G=DJ8oxL1$N8QTieXddbTa zI0@E}4kPknQSX_dQ!}h^&xFQ=^1Q!S6C;IEPv*t0Mzl~_cv#50O$ zZ4CB9Mj_rGmVJB0dzedE%=%j0aE@!NDh9vQw7{Yso85_cq6qFOtA)f6Q-UG6a+dX& z+;9$44|k!Z1s18+x$I8FGmYpLhGAVT7m`D4Ns4whk!9B1x$K5>*eqP%N`7~GDv0Y& zvUR*|cPE}I;%I(L=zS>!o%1>!R>KoF*U)BX>oE5;kjp)+?QWaxg`9zD(rp}ci?x=y gO&`=7?QUZi2jF@5oo?^YLT+Gx@{u}v2FH>4|1CCq8vpgp@{kq zxG0=mr5hKDkBzuiT)1-K!h#z?skjrwtsC*&$z-NUXA!uM-}%0K9+T}uTL;&NMqSq( zcNXeSeX7xzbez_tvskOSZmU^8I@NR=tqEsp!KpjruV?Y~8g^}zqyh}VG0yLA;Re|a?lo7liF6|XMl%hFb zUBHNBpeew|=;dgMypBhAou$>-06~%ThC{FUAEXI;e0|*voirEz!#xSBrM_t z&C*hhmU$hePC2FSvbUTPT8HK2I}1J~C*XVPd0FmDOvc-C;3mT}aU+sBu!Ffaa66I- z+atrDfw8$LudqPed9<5$&>FH48hH=L-iRDUaYi0{%~AStQ1Cizj>4N$iDE);9-+gD zbb%;wTH%$S8q}&NG>dV!}*##O^U8pF(Jy|uj7TBYKB5nh^& E|4KScMF0Q* diff --git a/css/style.css b/css/style.css index 55eceaf..137c3b1 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,6 @@ body { - margin: 0; } + margin: 0; + text-align: center; } .time-bar { background-color: #fff; @@ -11,10 +12,10 @@ body { .current-time { color: #fff; + display: inline-block; font-family: 'Teko', sans-serif; font-weight: 700; font-size: 200px; - margin: 250px auto; - text-align: center; } + margin: 250px auto; } /*# sourceMappingURL=style.css.map */ diff --git a/css/style.css.map b/css/style.css.map index d5f604d..e85a5fb 100644 --- a/css/style.css.map +++ b/css/style.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,IAAK;EAAE,MAAM,EAAE,CAAC;;AAEhB,SAAU;EACR,gBAAgB,EAAE,IAAI;EACtB,MAAM,EAAE,GAAG;;AAGb,iBAAkB;EAChB,gBAAgB,EAAE,kBAAc;EAChC,MAAM,EAAE,GAAG;;AAGb,aAAc;EACZ,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,kBAAkB;EAC/B,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,KAAK;EAChB,MAAM,EAAE,UAAU;EAClB,UAAU,EAAE,MAAM", +"mappings": "AAAA,IAAK;EACH,MAAM,EAAE,CAAC;EACT,UAAU,EAAE,MAAM;;AAGpB,SAAU;EACR,gBAAgB,EAAE,IAAI;EACtB,MAAM,EAAE,GAAG;;AAGb,iBAAkB;EAChB,gBAAgB,EAAE,kBAAc;EAChC,MAAM,EAAE,GAAG;;AAGb,aAAc;EACZ,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,YAAY;EACrB,WAAW,EAAE,kBAAkB;EAC/B,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,KAAK;EAChB,MAAM,EAAE,UAAU", "sources": ["../scss/style.scss"], "names": [], "file": "style.css" diff --git a/main.js b/main.js index 4cf6998..1f24771 100644 --- a/main.js +++ b/main.js @@ -1,36 +1,54 @@ -function clock () { - // defining vars - var time = new Date(); - var timeHours = time.getHours() > 12 ? time.getHours() - 12 : time.getHours(); - var timeMinutes = time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes(); - var timeSeconds = time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds(); - var timeSplit = timeHours + ":" + timeMinutes + ":" + timeSeconds; - - // setting time - $(".current-time").html(timeSplit); - - // defining percentage - var roundedTimeSeconds = parseFloat((timeSeconds/60).toFixed(2)); - var roundedTimeSecondsToInt= (roundedTimeSeconds * 100).toString(); +(function () { - // console log percentage - console.log(roundedTimeSecondsToInt); + var intervalId = 0; + var displayClock = document.querySelector(".current-time"); + var mouseIsHovering= false; - // setting width = 'initial' - $(".time-bar").css("width", roundedTimeSecondsToInt + "%"); + function timeToHex (h, m, s) { + var timeHex = "#" + s.toString() + m.toString() + h.toString(); + return timeHex; + } - var timeToColor = function(a,b,c){ - var concatTimes = a.toString() + b.toString() + c.toString(); - // console.log('concat times', concatTimes); - return concatTimes; + function hoverHex(display) { + displayClock.textContent = display; } - $('body').css("background-color", timeToColor(timeSeconds, timeMinutes, timeHours)); + function printTime () { + var currentTime = new Date(); + var hours = currentTime.getHours() > 12 ? currentTime.getHours() - 12 : currentTime.getHours(); + var minutes = currentTime.getMinutes() < 10 ? "0" + currentTime.getMinutes() : currentTime.getMinutes(); + var seconds = currentTime.getSeconds() < 10 ? "0" + currentTime.getSeconds() : currentTime.getSeconds(); + + var hexedTime = timeToHex(hours, minutes, seconds); + + if (mouseIsHovering) { + displayClock.textContent = hexedTime; + } else { + displayClock.textContent = hours + ":" + minutes + ":" + seconds; + } + + $('body').css("background-color", hexedTime); + + var percentage = parseFloat((seconds/60).toFixed(2)); + var percentageToInt = (percentage * 100).toString(); + + $(".time-bar").css("width", percentageToInt + "%"); + } + + + function hoverHex () { + mouseIsHovering = true; + } + + function noHoverHex () { + mouseIsHovering = false; + } + + + displayClock.addEventListener('mouseenter', hoverHex); + displayClock.addEventListener('mouseout', noHoverHex); - $(".current-time").hover(function(e){ - $(this).text("#" + timeToColor(timeSeconds, timeMinutes, timeHours)); - }); -} + intervalId = window.setInterval(printTime, 100); -// function call on timer -window.setInterval(clock, 1000); + setInterval(printTime, 1000); +})(); diff --git a/scss/style.scss b/scss/style.scss index 52e30d0..066151f 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,4 +1,7 @@ -body { margin: 0; } +body { + margin: 0; + text-align: center; +} .time-bar { background-color: #fff; @@ -12,10 +15,9 @@ body { margin: 0; } .current-time { color: #fff; + display: inline-block; font-family: 'Teko', sans-serif; font-weight: 700; font-size: 200px; margin: 250px auto; - text-align: center; } -