From 453e8054891d3251f2804188e10036dcd1e016bc Mon Sep 17 00:00:00 2001 From: Iraquitan Cordeiro Filho Date: Mon, 12 Dec 2016 09:33:37 -0300 Subject: [PATCH 1/3] feat: Finished Javascript30 day 01 Add separate script file to handle keyboard inputs and play the sound. --- 01 - JavaScript Drum Kit/my-index.html | 64 ++++++++++++++++++++++++++ 01 - JavaScript Drum Kit/script.js | 22 +++++++++ 2 files changed, 86 insertions(+) create mode 100644 01 - JavaScript Drum Kit/my-index.html create mode 100644 01 - JavaScript Drum Kit/script.js diff --git a/01 - JavaScript Drum Kit/my-index.html b/01 - JavaScript Drum Kit/my-index.html new file mode 100644 index 0000000000..684a41fc59 --- /dev/null +++ b/01 - JavaScript Drum Kit/my-index.html @@ -0,0 +1,64 @@ + + + + + JS Drum Kit + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + diff --git a/01 - JavaScript Drum Kit/script.js b/01 - JavaScript Drum Kit/script.js new file mode 100644 index 0000000000..37c44ede62 --- /dev/null +++ b/01 - JavaScript Drum Kit/script.js @@ -0,0 +1,22 @@ +/** + * Created by iraquitan on 11/12/16. + */ + +function playSound(e) { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); + if (!audio) return; // stop the function from running all together + + audio.currentTime = 0; // rewind to the start + audio.play(); + key.classList.add('playing'); +} + +function removeTransition(e) { + if (e.propertyName !== 'transform') return; // skip if not transform transition + this.classList.remove('playing'); +} + +const keys = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); +window.addEventListener('keydown', playSound); From a9a9108e5b62f5d3f9666437a03d51fba547988e Mon Sep 17 00:00:00 2001 From: Iraquitan Cordeiro Filho Date: Mon, 12 Dec 2016 18:08:52 -0300 Subject: [PATCH 2/3] feat: Add styles and initial js to clock --- .../index-FINISHED.html | 0 .../index-START.html | 0 .../index.html | 0 02 - JS_plus_CSS Clock/my-index.html | 21 +++++++ 02 - JS_plus_CSS Clock/script.js | 24 ++++++++ 02 - JS_plus_CSS Clock/style.css | 57 +++++++++++++++++++ 6 files changed, 102 insertions(+) rename {02 - JS + CSS Clock => 02 - JS_plus_CSS Clock}/index-FINISHED.html (100%) rename {02 - JS + CSS Clock => 02 - JS_plus_CSS Clock}/index-START.html (100%) rename {02 - JS + CSS Clock => 02 - JS_plus_CSS Clock}/index.html (100%) create mode 100644 02 - JS_plus_CSS Clock/my-index.html create mode 100644 02 - JS_plus_CSS Clock/script.js create mode 100644 02 - JS_plus_CSS Clock/style.css diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS_plus_CSS Clock/index-FINISHED.html similarity index 100% rename from 02 - JS + CSS Clock/index-FINISHED.html rename to 02 - JS_plus_CSS Clock/index-FINISHED.html diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS_plus_CSS Clock/index-START.html similarity index 100% rename from 02 - JS + CSS Clock/index-START.html rename to 02 - JS_plus_CSS Clock/index-START.html diff --git a/02 - JS + CSS Clock/index.html b/02 - JS_plus_CSS Clock/index.html similarity index 100% rename from 02 - JS + CSS Clock/index.html rename to 02 - JS_plus_CSS Clock/index.html diff --git a/02 - JS_plus_CSS Clock/my-index.html b/02 - JS_plus_CSS Clock/my-index.html new file mode 100644 index 0000000000..39d982bc80 --- /dev/null +++ b/02 - JS_plus_CSS Clock/my-index.html @@ -0,0 +1,21 @@ + + + + + JS + CSS Clock + + + + + +
+
+
+
+
+
+
+ + + + diff --git a/02 - JS_plus_CSS Clock/script.js b/02 - JS_plus_CSS Clock/script.js new file mode 100644 index 0000000000..741d0a3aa2 --- /dev/null +++ b/02 - JS_plus_CSS Clock/script.js @@ -0,0 +1,24 @@ +/** + * Created by iraquitan on 12/12/16. + */ + +function timeToDeg(t) { + return 360*t/60; +// 360 --- 60 +// X --- 1 +} + +function hourToDeg(h) { + return 360*h/24; +// 360 --- 24 +// X --- 1 +} + +const hour = document.querySelector('.hour-hand'); +const minute = document.querySelector('.min-hand'); +const second = document.querySelector('.second-hand'); + +let time = new Date(); +hour.style.transform = `rotate(${hourToDeg(time.getHours())}deg)`; +minute.style.transform = `rotate(${timeToDeg(time.getMinutes())}deg)`; +second.style.transform = `rotate(${timeToDeg(time.getSeconds())}deg)`; diff --git a/02 - JS_plus_CSS Clock/style.css b/02 - JS_plus_CSS Clock/style.css new file mode 100644 index 0000000000..3f3f276ceb --- /dev/null +++ b/02 - JS_plus_CSS Clock/style.css @@ -0,0 +1,57 @@ +html { + background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50); + background-size:cover; + font-family:'helvetica neue'; + text-align: center; + font-size: 10px; +} + +body { + font-size: 2rem; + display:flex; + flex:1; + min-height: 100vh; + align-items: center; +} + +.clock { + width: 30rem; + height: 30rem; + border:20px solid white; + border-radius:50%; + margin:50px auto; + position: relative; + padding:2rem; + box-shadow: + 0 0 0 4px rgba(0,0,0,0.1), + inset 0 0 0 3px #EFEFEF, + inset 0 0 10px black, + 0 0 10px rgba(0,0,0,0.2); +} + +.clock-face { + position: relative; + width: 100%; + height: 100%; + transform: translateY(-3px); /* account for the height of the clock hands */ +} + +.hand { + width:50%; + height:6px; + background:black; + position: absolute; + top:50%; + transform-origin:100%; +} + +.hour-hand { + width:25%; + left:25%; + transform-origin:100%; +} + +.second-hand { + height: 3px; + background: crimson; +} \ No newline at end of file From 74db917aa28bef28c9c9ad321119ac5426fac42a Mon Sep 17 00:00:00 2001 From: Iraquitan Cordeiro Filho Date: Tue, 13 Dec 2016 09:35:20 -0300 Subject: [PATCH 3/3] feat: Finished Javascript30 day 02 Add style.css and script.js. Also add initial clock animation. And styled clock handles. --- 02 - JS_plus_CSS Clock/script.js | 65 +++++++++++++++++++------ 02 - JS_plus_CSS Clock/sounds/tick.mp3 | Bin 0 -> 2398 bytes 02 - JS_plus_CSS Clock/style.css | 2 +- 3 files changed, 52 insertions(+), 15 deletions(-) create mode 100644 02 - JS_plus_CSS Clock/sounds/tick.mp3 diff --git a/02 - JS_plus_CSS Clock/script.js b/02 - JS_plus_CSS Clock/script.js index 741d0a3aa2..a0926cad08 100644 --- a/02 - JS_plus_CSS Clock/script.js +++ b/02 - JS_plus_CSS Clock/script.js @@ -2,23 +2,60 @@ * Created by iraquitan on 12/12/16. */ -function timeToDeg(t) { - return 360*t/60; -// 360 --- 60 -// X --- 1 +function secToDeg(s) { + return 90+(360*s/60); +} + +function minToDeg(m) { + return 90+(360*m/60); } function hourToDeg(h) { - return 360*h/24; -// 360 --- 24 -// X --- 1 + return 90+(360*h/12); +} + +const hourHand = document.querySelector('.hour-hand'); +const minuteHand = document.querySelector('.min-hand'); +const secondHand = document.querySelector('.second-hand'); + +for (var h of [hourHand, minuteHand, secondHand]) { + h.style.transition = 'all 2s'; + h.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)'; +} + +function setDate() { + // Turn off transition effects + for (var h of [hourHand, minuteHand, secondHand]) { + h.style.transition = 'none'; + } + const now = new Date(); + const hours = now.getHours() + (now.getMinutes() / 60); + const minutes = now.getMinutes() + (now.getSeconds() / 60); + const seconds = now.getSeconds(); + + if (seconds <= 0 || seconds >= 59) { + secondHand.style.transition = 'none'; + } else { + secondHand.style.transition = 'all 0.05s'; + secondHand.style.transitionTimingFunction = 'cubic-bezier(0.1, 3.5, 0.25, 1)'; + } + + hourHand.style.transform = `rotate(${hourToDeg(hours)}deg)`; + minuteHand.style.transform = `rotate(${minToDeg(minutes)}deg)`; + secondHand.style.transform = `rotate(${secToDeg(seconds)}deg)`; } -const hour = document.querySelector('.hour-hand'); -const minute = document.querySelector('.min-hand'); -const second = document.querySelector('.second-hand'); +function initClock() { + const now = new Date(); + const hours = now.getHours() + (now.getMinutes() / 60); + const minutes = now.getMinutes() + (now.getSeconds() / 60); + const seconds = now.getSeconds(); + + hourHand.style.transform = `rotate(${hourToDeg(hours)}deg)`; + minuteHand.style.transform = `rotate(${minToDeg(minutes)}deg)`; + secondHand.style.transform = `rotate(${secToDeg(seconds)}deg)`; + + setTimeout(setInterval.bind(null, setDate, 1000), 1000); +} -let time = new Date(); -hour.style.transform = `rotate(${hourToDeg(time.getHours())}deg)`; -minute.style.transform = `rotate(${timeToDeg(time.getMinutes())}deg)`; -second.style.transform = `rotate(${timeToDeg(time.getSeconds())}deg)`; +setTimeout(initClock, 0); \ No newline at end of file diff --git a/02 - JS_plus_CSS Clock/sounds/tick.mp3 b/02 - JS_plus_CSS Clock/sounds/tick.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..5e714310c7dcaf3059754af61b322a7f40517bf6 GIT binary patch literal 2398 zcmds(Ycv#EAIA5XY22B?pg|_oF^*gAO3Z{XNtqf+M}&IgL=7i&VJ6D8!#Jo+$>m5H zcbSY^2vO+d(mCO{Bt_#Ija*`%>0Rr5@#X#g{?^)G_S$RxpZz?0J!``?mLK>ZxcdkF zM|eb5xX=KIp9H3xIK7#)P1J2>YBO*X!dX_%;5w1WWA`CUiA zEBIa4|2Ocz0U?YreKRPMn5?&WeKtU-bXgu+DP{tG)FcB15EzoC0svBUrn0rKs_$yn zo*V!WQao$*uw{a>CEO50+rZW4QK3=vwozaMZF)Dd<|Bu5&NY#Qdq4pYf$B2y24>0I zT>5!pG@1CexA~~pTVp95ZzuhjmgG1W7jtQo-XYNzgtvFRZ{)}wX7=@?9Y>t`eQXp! zosr1al2<|?WK8-QH!c_JFk<->@Lv`Fd!D|b&Xt@iM}@C z^Y;&B7p_GyMQo!Hx6_O-Ro5!aHH$`m;)j^4J@g2FAenyxym^i&p-A!Jq| z=)FKU_K~0dQpL*M!Ec|!4h5+uxSV`A%bTk!nKq^swLC1Ojfb+g&3-NpI67d4L>fP~ z`;k*qF;zbj_y{0!gFez*AKb8&QF(T{HZaJ)_FKgGwJ%dw%>~sA=3K;hIr~U3gt~v= zH~hueRolP&BHPfKZJA6D*e!40jOg|+N zRE&))!-gQHIVxc=3J|jG0*C2(9HADRtpflhF<$xL0Hxy>)4ALOsweErJP*hvD2`9=qeco$T3)>H*UkWkzJ*Evg!!gV^` zHn1JHowQ~AB?}1ihd1-8BT-26g1CVvXA6(BsE(x*_Gi9ycAohS;i-K;q)bLkHpzL1 zS(;PzQcZ?0nugef#YI3MOEH)dj%BryJNwnP+ig513(rN`55 z#2W}-y7VM;m^O49%@Ucc12?4#OemI$kq`Q+`_d?nSKbmoDk~=)>^^6EE@_7Y`39v2 zJCmZJtav5f)51EqlJ2pC(!a7=VzIj*PHhji<6(pN?3H``s@xqEIy$eX1FO3z9V>%U zR@+ZVP53Ph;x4JNd-*QVR$c=uPXJQTL;KzibkxmNnx;qlUPmwY{5SnDvMXyHei_y< z>u-ARc8s*;Pf8Au6W*hMfsQL9`pcRO5UYHWqVj1Rk9_X(3$>J{JRR-Zt*MsIe4Nzk zGI!7R4pvP7Lu9I`q!Zg;Smnj8`QS$MKjJr#zml=k_t7{_$F;Bc+d%)Kg`1q#wL1%p zCck>*wx7d?)CUDrj6Ah*0U$_qN@V7~Ue%uG!oXWoJ%sZqSuV}N=G;;<$At7uPatu} zjS9r&&JV;+vMWklE6NIk`AGvV3=KMWIj!p3!3mK?4-nqUAlk&<<5 z_7mA$LUWYR>^N0iY12C~x`VXbo{UH*M_0ebMYmalUB1iI{XElMtZmr1^Xond_IDLW z4_UDs*+LEQru!I5)9#nxc(aSfG0T@O<5PS~J_og}BjoAw7@&>uY?`z`+q8hj!pD$5 z3-5=1+$pGZKQ4*$W!qSk=vT@q>6hz}L;^C~0f?%agHZ97X`oIyq2|}>g^qYZ%=4}o zL&x;%sZOucDaSA`wHIEO5B8mGqg-vV8)P|J=+f8Jy(aiYF#|_L8Kv+hGDh-4=UgxD z@Tp0zu5(YrC4&f4WM@|+39TYog^`Z8Ft=v@Ztc4^NrB%2%tOex+<8R@nCU?d!*TcWy(R4mpN1SlRbEif?@RPow zRC|XEuGa$y-@Y)iYg!#B6FH96y_?h1**driJ)RV4=mdDk$ATwBWO z?f%_RGtr7-=<59eyP2hyRp`KS41P61pq^b?U?_(SV8!_Zqoi6EXS>|bFk