Solving 01

Alaboudi1 · Alaboudi1 · commit d22ceda49131 · 2016-12-11T14:37:42.000+03:00
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -45,7 +45,10 @@
       <kbd>L</kbd>
       <span class="sound">tink</span>
     </div>
+
   </div>
+      <h1 class="text"> Your Score: <span id="score"> 0 </span> </h1>
+
 
   <audio data-key="65" src="sounds/clap.wav"></audio>
   <audio data-key="83" src="sounds/hihat.wav"></audio>
@@ -57,9 +60,7 @@
   <audio data-key="75" src="sounds/tom.wav"></audio>
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
-<script>
-
-</script>
+<script src="javaScript.js"></script>
 
 
 </body>
diff --git a/01 - JavaScript Drum Kit/javaScript.js b/01 - JavaScript Drum Kit/javaScript.js
@@ -0,0 +1,49 @@
+const keys = [
+    "65",
+    "83",
+    "68",
+    "70",
+    "71",
+    "72",
+    "74",
+    "75",
+    "76"
+    ];
+   let score = 0 ;
+ function sound(e){
+      console.log(e.keyCode);
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const button = document.querySelector(`div[data-key="${e.keyCode}"]`);
+
+    if(!audio) return;
+    if(button.classList.contains('click')){
+        document.getElementById('score').innerHTML= ++score;
+    }
+    button.classList.add('playing');
+    audio.currentTime=0;
+    audio.play();
+
+    
+ }
+
+ function effect(button){
+ button.addEventListener('transitionend', e => 
+    {
+    if(e.propertyName==="transform")
+        button.classList.remove('playing');
+        button.classList.remove('click');
+
+    }
+    )}
+ 
+ function randomKey(preKey=65){
+     const random = Math.floor((Math.random())*9);
+     const key = keys.filter((_,index) => random == index);
+    document.querySelector(`div[data-key="${key}"]`).classList.add('click');
+
+     setTimeout(_=>randomKey(key),1000);
+ }
+window.addEventListener('keydown', sound);
+document.querySelectorAll('.key').forEach(effect);
+
+setTimeout(randomKey,1000);
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
@@ -23,7 +23,7 @@ body,html {
   margin:1rem;
   font-size: 1.5rem;
   padding:1rem .5rem;
-  transition:all .07s;
+  transition:all 1s;
   width:100px;
   text-align: center;
   color:white;
@@ -35,16 +35,34 @@ body,html {
   transform:scale(1.1);
   border-color:#ffc600;
   box-shadow: 0 0 10px #ffc600;
+  color:#ffc600;
+
 }
+.click {
+  border-color:red;
+  box-shadow: 0 0 10p red;
+  color:red;
+
 
+}
 kbd {
   display: block;
   font-size: 40px;
 }
-
+.text {
+  display: block;
+  font-size: 40px;
+  color:white;
+}
 .sound {
   font-size: 1.2rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   color:#ffc600;
 }
+
+#score{
+   font-size: 5rem;
+   color:#ffc600;
+
+}
