diff --git a/01 - JavaScript Drum Kit/background01.jpg b/01 - JavaScript Drum Kit/background01.jpg new file mode 100644 index 0000000000..75b6980733 Binary files /dev/null and b/01 - JavaScript Drum Kit/background01.jpg differ diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8a2f8e8417..34b721ae1f 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -60,6 +60,39 @@ diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index bfdba84312..4083dc52d5 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,9 +1,11 @@ html { font-size: 10px; - background: url('./background.jpg') bottom center; + background: url('./background01.jpg') bottom center; background-size: cover; } + + body,html { margin: 0; padding: 0; @@ -19,7 +21,7 @@ body,html { } .key { - border: .4rem solid black; + border: .4rem solid whitesmoke; border-radius: .5rem; margin: 1rem; font-size: 1.5rem; @@ -28,7 +30,7 @@ body,html { width: 10rem; text-align: center; color: white; - background: rgba(0,0,0,0.4); + background: rgba(0,0,0,0.7); text-shadow: 0 0 .5rem black; } diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 55ab1a5331..837029479e 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -19,7 +19,7 @@ + .hour-hand{ + background: black; + } + + .min-hand{ + background: black; + } + + .second-hand{ + background: red; + } + +
-
-
+ //inputs is NodeList, not array. NodeList has few properties than array like forEach, entries, and values.
+ inputs.forEach(input => input.addEventListener('change', handleUpdate)); //change is only then you click on the range
+ inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); //mousemove is when you move mouse on the range.
-