Testing pull request for daily commitment

starter/index.html

@@ -15,6 +15,6 @@ <h1 class="title --xl-large">Dots</h1>
         <a class="button" href="level-one.html">Play</a>
       </div>
     </main>
-
+    
   </body>
 </html>

starter/level-one.js

@@ -2,3 +2,23 @@
  * DOTS: Level One
  *
  */
+
+//VARIABLES
+let score = 0
+let ball = document.querySelector('.js-ball')
+let scoreDisplay = document.querySelector('.js-score')
+let levelWinner = document.querySelector('.level-winner')
+
+
+//EVENTLISTENER 
+ball.addEventListener('click', function(){
+    //ADD SCORE
+    score += 20
+    //DISPLAY SCORE
+    scoreDisplay.innerText = score
+    if (score === 100){
+        levelWinner.style.opacity = 1
+    }
+    console.log(scoreDisplay.innerText)
+})
+

starter/level-three.js

@@ -2,3 +2,48 @@
  * DOTS: Level Three
  *
  */
+
+let score = 0
+let scoreDisplay = document.querySelector('.js-score')
+let levelWinner = document.querySelector('.level-winner')
+let ballArray= document.querySelectorAll('ball, .js-ball')
+let ballsArena= document.querySelectorAll('.js-ball')
+
+console.log(ballsArena)
+
+/*
+let smallBall = document.querySelector('.js-ball').nextElementSibling.nextElementSibling
+let bigBall = document.querySelector('.js-ball').nextElementSibling.nextElementSibling;
+let mediumBall = document.querySelector('.js-ball').nextElementSibling;
+
+console.log(smallBall)
+console.log(bigBall)
+console.log(mediumBall)
+*/
+
+// ballsArena.forEach((element, index) => {
+//     element.setAttribute('data-increment', index)
+
+// })
+
+let forEachBall = ballsArena.forEach(element => console.log(element.getAttribute('data-increment')))
+
+// for (let i = 0; i < ballsArena.length; i++) {
+//     ballsArena[i].addEventListener("click",groupClick(i))
+//  }
+
+//console.log(ballArray)
+
+function groupClick(){
+    forEachBall.addEventListener('click', ()=>{
+        score  += forEachBall.getAttribute('data-increment')
+        score = scoreDisplay.innerText
+        console.log('im working')
+        if(score >= 100){
+            levelWinner.style.opacity = 1
+        }
+    })
+    console.log(scoreDisplay)
+}
+
+

starter/level-two.html

@@ -49,7 +49,7 @@ <h1 class="title --xl-large">Winner!</h1>
       </footer>
 
     </main>
-
+ 
     <script src="level-two.js" charset="utf-8"></script>
 
   </body>

starter/level-two.js

@@ -2,3 +2,37 @@
  * DOTS: Level Two
  *
  */
+
+
+let score = 0
+//AddEventListener is taking ("input","select") objects 
+//to store them in ballArray
+let ballArray= document.querySelectorAll('ball, .js-ball')
+let scoreDisplay = document.querySelector('.js-score')
+let levelWinner = document.querySelector('.level-winner')
+ //console.log(ballArray)
+
+ for (let i = 0; i < ballArray.length; i++) {
+    ballArray[i].addEventListener("click",groupClick(i))
+ }
+
+ function groupClick(i){
+
+    return function() {
+        score += 20
+    scoreDisplay.innerText = score
+
+    if (score >= 100){
+        levelWinner.style.opacity = 1
+    }
+    console.log(scoreDisplay.innerText)
+    }
+
+ }
+
+
+
+
+
+
+