code refactoring

change class names to camelCase
update html and css to reflect this
javascript can now use querySelectorAll and grab
note from object via first class in list of
classes for tile

cafe-events/valentines-day-25/index.html

@@ -11,18 +11,18 @@
         <header>for you, emma &lt;3</header>
         <div class="container">
 
-            <div class="tile-one tile"></div>
+            <div class="tileOne tile"></div>
-            <div class="tile-two tile"></div>
+            <div class="tileTwo tile"></div>
-            <div class="tile-three tile"></div>
+            <div class="tileThree tile"></div>
-            <div class="tile-four tile"></div>
+            <div class="tileFour tile"></div>
-            <div class="tile-five tile"></div>
+            <div class="tileFive tile"></div>
-            <div class="tile-six tile"></div>
+            <div class="tileSix tile"></div>
-            <div class="tile-seven tile"></div>
+            <div class="tileSeven tile"></div>
-            <div class="tile-eight tile"></div>
+            <div class="tileEight tile"></div>
-            <div class="tile-nine tile"></div>
+            <div class="tileNine tile"></div>
-            <div class="tile-ten tile"></div>
+            <div class="tileTen tile"></div>
-            <div class="tile-eleven tile"></div>
+            <div class="tileEleven tile"></div>
-            <div class="tile-twelve tile"></div>
+            <div class="tileTwelve tile"></div>
             
             <img src="./img/sweets.jpg" alt="a box of chocolate cupcakes">
         </div>

cafe-events/valentines-day-25/script/script.js

@@ -1,75 +1,22 @@
 const notesForEmma = {
-    noteOne: "hello",
+    tileOne: "hello",
-    noteTwo: "emma",
+    tileTwo: "emma",
-    noteThree: "how",
+    tileThree: "how",
-    noteFour: "are",
+    tileFour: "are",
-    noteFive: "you",
+    tileFive: "you",
-    noteSix: "i",
+    tileSix: "i",
-    noteSeven: "think",
+    tileSeven: "think",
-    noteEight: "you",
+    tileEight: "you",
-    noteNine: "are",
+    tileNine: "are",
-    noteTen: "a",
+    tileTen: "a",
-    noteEleven: "great",
+    tileEleven: "great",
-    noteTwelve: "person",
+    tileTwelve: "person",
 };
 
-const tileOne = document.querySelector(".tile-one");
+const tiles = document.querySelectorAll(".tile");
-const tileTwo = document.querySelector(".tile-two");
-const tileThree = document.querySelector(".tile-three");
-const tileFour = document.querySelector(".tile-four");
-const tileFive = document.querySelector(".tile-five");
-const tileSix = document.querySelector(".tile-six");
-const tileSeven = document.querySelector(".tile-seven");
-const tileEight = document.querySelector(".tile-eight");
-const tileNine = document.querySelector(".tile-nine");
-const tileTen = document.querySelector(".tile-ten");
-const tileEleven = document.querySelector(".tile-eleven");
-const tileTwelve = document.querySelector(".tile-twelve");
 
-tileOne.addEventListener("click", () => {
+tiles.forEach((el) => {
-    console.log(notesForEmma["noteOne"]);
+    el.addEventListener("click", () => {
+        console.log(`${notesForEmma[el.className.split(' ')[0]]}`);
     });
-
-tileTwo.addEventListener("click", () => {
-    console.log(notesForEmma["noteTwo"]);
-});
-
-tileThree.addEventListener("click", () => {
-    console.log(notesForEmma["noteThree"]);
-});
-
-tileFour.addEventListener("click", () => {
-    console.log(notesForEmma["noteFour"]);
-});
-
-tileFive.addEventListener("click", () => {
-    console.log(notesForEmma["noteFive"]);
-});
-
-tileSix.addEventListener("click", () => {
-    console.log(notesForEmma["noteSix"]);
-});
-
-tileSeven.addEventListener("click", () => {
-    console.log(notesForEmma["noteSeven"]);
-});
-
-tileEight.addEventListener("click", () => {
-    console.log(notesForEmma["noteEight"]);
-});
-
-tileNine.addEventListener("click", () => {
-    console.log(notesForEmma["noteNine"]);
-});
-
-tileTen.addEventListener("click", () => {
-    console.log(notesForEmma["noteTen"]);
-});
-
-tileEleven.addEventListener("click", () => {
-    console.log(notesForEmma["noteEleven"]);
-});
-
-tileTwelve.addEventListener("click", () => {
-    console.log(notesForEmma["noteTwelve"]);
 });

cafe-events/valentines-day-25/style/style.css

@@ -60,7 +60,7 @@ footer {
     cursor: pointer;
 }
 
-.tile-one {
+.tileOne {
     position: absolute; 
     left: 26.61%; 
     top: 25.78%; 
@@ -69,7 +69,7 @@ footer {
     z-index: 2;
 }
 
-.tile-two {
+.tileTwo {
     position: absolute; 
     left: 38.39%; 
     top: 25.94%; 
@@ -78,7 +78,7 @@ footer {
     z-index: 2;
 }
 
-.tile-three {
+.tileThree {
     position: absolute; 
     left: 50.52%; 
     top: 25.78%; 
@@ -87,7 +87,7 @@ footer {
     z-index: 2;
 }
 
-.tile-four {
+.tileFour {
     position: absolute; 
     left: 63.44%; 
     top: 25.94%; 
@@ -96,7 +96,7 @@ footer {
     z-index: 2;
 }
 
-.tile-five {
+.tileFive {
     position: absolute; 
     left: 25.68%; 
     top: 43.05%; 
@@ -105,7 +105,7 @@ footer {
     z-index: 2;
 }
 
-.tile-six {
+.tileSix {
     position: absolute; 
     left: 37.81%; 
     top: 43.59%; 
@@ -114,7 +114,7 @@ footer {
     z-index: 2;
 }
 
-.tile-seven {
+.tileSeven {
     position: absolute; 
     left: 49.74%; 
     top: 43.44%; 
@@ -123,7 +123,7 @@ footer {
     z-index: 2;
 }
 
-.tile-eight {
+.tileEight {
     position: absolute; 
     left: 62.76%; 
     top: 43.52%; 
@@ -132,7 +132,7 @@ footer {
     z-index: 2;
 }
 
-.tile-nine {
+.tileNine {
     position: absolute; 
     left: 24.74%; 
     top: 60.94%; 
@@ -141,7 +141,7 @@ footer {
     z-index: 2;
 }
 
-.tile-ten {
+.tileTen {
     position: absolute; 
     left: 37.03%; 
     top: 61.33%; 
@@ -150,7 +150,7 @@ footer {
     z-index: 2;
 }
 
-.tile-eleven {
+.tileEleven {
     position: absolute; 
     left: 49.64%; 
     top: 61.64%; 
@@ -159,7 +159,7 @@ footer {
     z-index: 2;
 }
 
-.tile-twelve {
+.tileTwelve {
     position: absolute; 
     left: 62.55%; 
     top: 61.8%;