From effd7feefce611adac52a3c98644e7fb0d300e7b Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Wed, 5 Feb 2025 09:44:09 -0500
Subject: [PATCH] code changes add fontawesome - use heart glyph remove event
 listener from note after reading to prevent triggering other event listeners
 again

---
 cafe-events/valentines-day-25/index.html      |  2 +-
 cafe-events/valentines-day-25/js/script.js    | 36 +++++++++----------
 cafe-events/valentines-day-25/style/style.css |  6 +++-
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/cafe-events/valentines-day-25/index.html b/cafe-events/valentines-day-25/index.html
index 4dd827d..de4d7cf 100644
--- a/cafe-events/valentines-day-25/index.html
+++ b/cafe-events/valentines-day-25/index.html
@@ -52,7 +52,7 @@
                 >
             </div>
         </section>
-
+        <script src="https://kit.fontawesome.com/821c138f8d.js" crossorigin="anonymous"></script>
         <script src="/js/script.js" defer></script>
         <footer>
             <p>happy valentine's day!</p>
diff --git a/cafe-events/valentines-day-25/js/script.js b/cafe-events/valentines-day-25/js/script.js
index 5774d14..5f36cd4 100644
--- a/cafe-events/valentines-day-25/js/script.js
+++ b/cafe-events/valentines-day-25/js/script.js
@@ -13,9 +13,20 @@ const notesForEmma = {
     tileTwelve: "person",
 };
 
-const note = document.querySelector(".read-this");
+const displayNote = (noteName) => {
+    console.log(`${notesForEmma[noteName.className.split(' ')[0]]}`);
+};
 
-note.addEventListener("click", () => {
+const extraLove = () => {
+    const header = document.querySelector(".header-text");
+    header.innerHTML += '. Always <i class="fa-solid fa-heart"></i>';
+
+    const transHeart = document.querySelector(".trans-pride-heart");
+    transHeart.style.cursor = "default";
+    transHeart.removeEventListener("click", extraLove);
+}
+
+const main = () => {
     const tiles = document.querySelectorAll(".tile");
     
     tiles.forEach((el) => {
@@ -27,22 +38,11 @@ note.addEventListener("click", () => {
     const transHeart = document.querySelector(".trans-pride-heart");
     transHeart.style.cursor = "pointer";
     transHeart.addEventListener("click", extraLove);
-});
 
-const displayNote = (noteName) => {
-    console.log(`${notesForEmma[noteName.className.split(' ')[0]]}`);
+    const note = document.querySelector(".read-this");
+    note.style.cursor = "default";
+    note.removeEventListener("click", main);
 };
 
-const extraLove = () => {
-    const header = document.querySelector(".header-text");
-    header.innerHTML += `. Always <svg width="40" height="40" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.99987 6.00001C10.6646 3.66763 14.4999 6.50001 15.9999 8.50001C17.4999 6.5 21.3351 3.66763 25.9999 6.00001C31.9999 8.99999 30.4998 16.5 25.9998 21C23.8041 23.1958 19.9371 27.0628 17.1087 29.2137C16.4552 29.7106 15.5614 29.6884 14.9226 29.1728C12.3299 27.08 8.16491 23.165 5.99987 21C1.49986 16.5 -0.000126839 8.99999 5.99987 6.00001Z" fill="#F8312F"/>
-<path d="M15.9998 8.49998V11.5492C17.2695 8.86501 20.4252 5.28051 25.6578 5.83746C21.1482 3.80623 17.463 6.54908 15.9998 8.49998Z" fill="#CA0B4A"/>
-<path d="M11.9456 5.53691C10.2614 4.95005 8.22499 4.88745 5.99987 6.00001C-0.000126839 8.99999 1.49986 16.5 5.99987 21C8.16491 23.165 12.3299 27.08 14.9226 29.1728C15.5614 29.6884 16.4552 29.7106 17.1087 29.2137C17.3629 29.0204 17.6255 28.8132 17.8945 28.5946C15.0398 26.4524 11.0335 23.0762 8.85898 21.1325C3.90218 16.702 2.24993 9.31788 8.85898 6.36425C9.93279 5.88435 10.9667 5.62654 11.9456 5.53691Z" fill="#CA0B4A"/>
-<ellipse cx="23.4771" cy="12.5937" rx="2.83554" ry="4.78125" transform="rotate(30 23.4771 12.5937)" fill="#F37366"/>
-</svg>`;
-
-    const transHeart = document.querySelector(".trans-pride-heart");
-    transHeart.style.cursor = "default";
-    transHeart.removeEventListener("click", extraLove);
-}
\ No newline at end of file
+const note = document.querySelector(".read-this");
+note.addEventListener("click", main);
\ 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 dc24693..c47d4cc 100644
--- a/cafe-events/valentines-day-25/style/style.css
+++ b/cafe-events/valentines-day-25/style/style.css
@@ -69,7 +69,11 @@ section {
 
 .header-text {
     font-family: alwaysinmyheart;
-    font-size: 3.5rem;
+    font-size: 3.25rem;
+    color: var(--text-color-light-red);
+}
+
+.fa-solid.fa-heart {
     color: var(--text-color-light-red);
 }