From fdcefdf75bd554ba58ce9ee0467305d8ff0b3f3a Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Sun, 9 Feb 2025 07:32:20 -0500
Subject: [PATCH] add functionality for love notes add note div to index.html
 initial styling in style.css making love note appear with proper styling and
 content in script.js

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

diff --git a/valentines-day-25/index.html b/valentines-day-25/index.html
index 8096763..cd730dd 100644
--- a/valentines-day-25/index.html
+++ b/valentines-day-25/index.html
@@ -39,7 +39,7 @@
                  height="1000" width="1000"
                 >
             </div>
-
+            <div class="love-note"></div>
             <div class="items">
                 <img class="baxter-thought"
                     width="100" height="100"
diff --git a/valentines-day-25/js/script.js b/valentines-day-25/js/script.js
index 3a6fc6d..fe9ebf4 100644
--- a/valentines-day-25/js/script.js
+++ b/valentines-day-25/js/script.js
@@ -1,7 +1,7 @@
 const notesForEmma = {
-    tileOne:    `love the woman you are. all of her, genuinely.
+    tileOne:    `<p>love the woman you are. all of her, genuinely.
                  don't be afraid of yourself. don't be afraid to seek help.
-                 don't be afraid to share yourself with others`,
+                 don't be afraid to share yourself with others</p>`,
     tileTwo:    `how happy you are to be surrounded by people who understand you.
                  who support you. who love seeing you at your best`,
     tileThree:  `you are getting better.
@@ -19,14 +19,14 @@ const notesForEmma = {
                  you stood up for yourself. you took action. you made friends at one
                  of your loneliest points. how brave you are to take that risk.
                  how happy you are to know friendship again`,
-    tileSeven:  `there's a song i want you to listen to.
+    tileSeven:  `<p style="margin-bottom: 2rem;">there's a song i want you to listen to.
                  you haven't listened to it in a long time.
                  i want you to remember the times you used to dream of dancing
                  and twirling in your apartment with the stereo on.
                  the only two important things in that moment was the music
-                 and what you felt in your heart
+                 and what you felt in your heart</p>
 
-                 <iframe width="560" height="315" 
+                 <iframe width="500" height="280" 
                  src="https://www.youtube-nocookie.com/embed/hlco1UrtJSc?si=P3YNM8EM27kAn2vA" 
                  title="YouTube video player" frameborder="0" 
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
@@ -71,7 +71,15 @@ const baxterThoughtImgSrc = [
 ];
 
 const displayNote = (noteName) => {
-    console.log(`${notesForEmma[noteName.className.split(' ')[0]]}`);
+    // console.log(`${notesForEmma[noteName.className.split(' ')[0]]}`);
+    const loveNote = document.querySelector(".love-note");
+    loveNote.style.backgroundImage = "url(../img/pink-paper.webp)";
+    loveNote.style.height = "80vh";
+    loveNote.style.width = "40vw";
+    loveNote.style.padding = "3rem";
+    loveNote.style.fontSize = "1.75rem";
+    loveNote.style.fontFamily = "learning-curve-regular";
+    loveNote.innerHTML = notesForEmma[noteName.className.split(' ')[0]];
 };
 
 const extraLove = () => {
@@ -84,9 +92,9 @@ const extraLove = () => {
 }
 
 const baxterHeadPat = () => {
-    const imgSrcArrayNo = Math.floor(Math.random() * 7)
-    console.log(imgSrcArrayNo)
+    const imgSrcArrayNo = Math.floor(Math.random() * 7);
     const thoughtBubble = document.querySelector(".baxter-thought");
+    
     thoughtBubble.src = baxterThoughtImgSrc[imgSrcArrayNo];
 };
 
diff --git a/valentines-day-25/style/style.css b/valentines-day-25/style/style.css
index 94f2cc5..a921f0a 100644
--- a/valentines-day-25/style/style.css
+++ b/valentines-day-25/style/style.css
@@ -196,6 +196,12 @@ section {
     width: auto;
 }
 
+.love-note {
+    z-index: 3;
+    position: absolute;
+    left: 25%;
+}
+
 .items {
     display: flex;
     flex-direction: column;