From 9647d9e9b08c479557d2b150ac59333f06fabb74 Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Thu, 30 Jan 2025 20:15:40 -0500
Subject: [PATCH] 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      | 24 ++---
 .../valentines-day-25/script/script.js        | 89 ++++---------------
 cafe-events/valentines-day-25/style/style.css | 24 ++---
 3 files changed, 42 insertions(+), 95 deletions(-)

diff --git a/cafe-events/valentines-day-25/index.html b/cafe-events/valentines-day-25/index.html
index 56f6ea1..c829410 100644
--- a/cafe-events/valentines-day-25/index.html
+++ b/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="tile-two tile"></div>
-            <div class="tile-three tile"></div>
-            <div class="tile-four tile"></div>
-            <div class="tile-five tile"></div>
-            <div class="tile-six tile"></div>
-            <div class="tile-seven tile"></div>
-            <div class="tile-eight tile"></div>
-            <div class="tile-nine tile"></div>
-            <div class="tile-ten tile"></div>
-            <div class="tile-eleven tile"></div>
-            <div class="tile-twelve tile"></div>
+            <div class="tileOne tile"></div>
+            <div class="tileTwo tile"></div>
+            <div class="tileThree tile"></div>
+            <div class="tileFour tile"></div>
+            <div class="tileFive tile"></div>
+            <div class="tileSix tile"></div>
+            <div class="tileSeven tile"></div>
+            <div class="tileEight tile"></div>
+            <div class="tileNine tile"></div>
+            <div class="tileTen tile"></div>
+            <div class="tileEleven tile"></div>
+            <div class="tileTwelve tile"></div>
             
             <img src="./img/sweets.jpg" alt="a box of chocolate cupcakes">
         </div>
diff --git a/cafe-events/valentines-day-25/script/script.js b/cafe-events/valentines-day-25/script/script.js
index 8a4ec70..d7e418b 100644
--- a/cafe-events/valentines-day-25/script/script.js
+++ b/cafe-events/valentines-day-25/script/script.js
@@ -1,75 +1,22 @@
 const notesForEmma = {
-    noteOne: "hello",
-    noteTwo: "emma",
-    noteThree: "how",
-    noteFour: "are",
-    noteFive: "you",
-    noteSix: "i",
-    noteSeven: "think",
-    noteEight: "you",
-    noteNine: "are",
-    noteTen: "a",
-    noteEleven: "great",
-    noteTwelve: "person",
+    tileOne: "hello",
+    tileTwo: "emma",
+    tileThree: "how",
+    tileFour: "are",
+    tileFive: "you",
+    tileSix: "i",
+    tileSeven: "think",
+    tileEight: "you",
+    tileNine: "are",
+    tileTen: "a",
+    tileEleven: "great",
+    tileTwelve: "person",
 };
 
-const tileOne = document.querySelector(".tile-one");
-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");
+const tiles = document.querySelectorAll(".tile");
 
-tileOne.addEventListener("click", () => {
-    console.log(notesForEmma["noteOne"]);
-});
-
-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"]);
-});
+tiles.forEach((el) => {
+    el.addEventListener("click", () => {
+        console.log(`${notesForEmma[el.className.split(' ')[0]]}`);
+    });
+});
\ No newline at end of file
diff --git a/cafe-events/valentines-day-25/style/style.css b/cafe-events/valentines-day-25/style/style.css
index 1105452..618c185 100644
--- a/cafe-events/valentines-day-25/style/style.css
+++ b/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%;