add js support for displaying and closing notes

valentines-day-25/index.html

@@ -40,7 +40,6 @@
                 >
             </div>
             <div class="love-note">
-                <button class="close-note"></button>
             </div>
             <div class="items">
                 <img class="baxter-thought"

valentines-day-25/js/script.js

@@ -1,25 +1,32 @@
 const notesForEmma = {
-    tileOne:    `<p>love the woman you are. all of her, genuinely.
+    tileOne:    `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
+                 <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</p>`,
-    tileTwo:    `how happy you are to be surrounded by people who understand you.
+    tileTwo:    `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
+                 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.
+    tileThree:  `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
+                 you are getting better.
                  the best part is you can tell you are getting better.
                  keep working hard. this story has a happy ending. i promise`,
-    tileFour:   `embrace the part of you that is quite simply a goofball.
+    tileFour:   `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
+                 embrace the part of you that is quite simply a goofball.
                  you don't have to do it just to fit in any more.
                  you can be silly because quite simply you are sometimes,
                  and that's a lovely thing about you`,
-    tileFive:   `you've been taking care of yourself and you are noticing.
+    tileFive:   `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
+                 you've been taking care of yourself and you are noticing.
                  how pretty did you think you looked in the mirror with those lashes?
                  the answer is very. with time all the work you are putting into yourself
                  will show. you're doing a good job, keep it up`,
-    tileSix:    `when depression tried to isolate you even further,
+    tileSix:    `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
+                 when depression tried to isolate you even further,
                  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:  `<p style="margin-bottom: 2rem;">there's a song i want you to listen to.
+    tileSeven:  `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
+                 <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.
@@ -32,26 +39,31 @@ const notesForEmma = {
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                  referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
                  </iframe>`,
-    tileEight:  `when you're ready, you'll know love again.
+    tileEight:  `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
+                 when you're ready, you'll know love again.
                  true love this time. what you are working on now is true love of
                  yourself. romance can wait for you this time`,
-    tileNine:   `current times are all but certain.
+    tileNine:   `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
+                 current times are all but certain.
                  it is important you don't let your anxiety get the best of you.
                  do not doubt yourself, you are capable of so much.
                  you have been through so much and made it out okay. you can do this`,
-    tileTen:    `you need to stop drinking coffee.
+    tileTen:    `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
+                 you need to stop drinking coffee.
                  i know you love it, but you have medication that interacts poorly with
                  it. right now you can't handle the potential anxiety that caffeine
                  introduces. you can't afford to be drinking a pot of coffee at 11 PM.
                  please do this for yourself, it will help`,
-    tileEleven: `even though sometimes it feels like they aren't helping.
+    tileEleven: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
+                 even though sometimes it feels like they aren't helping.
                  the things you have started doing to take care of yourself are
                  objectively good things. they are important for your physical
                  and mental health. this will take time, but i am so proud of
                  you for continuing to do these very important things even when
                  they don't bring you happiness. because you know they are
                  important to do regardless`,
-    tileTwelve: `don't run away any more emma. don't let depression have that over you.
+    tileTwelve: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
+                 don't run away any more emma. don't let depression have that over you.
                  you have people that care about you. every day you work so hard on 
                  caring for yourself and doing the things you need to, even if you 
                  still feel like shit at the end of the day. you're in the thick of
@@ -73,6 +85,7 @@ const baxterThoughtImgSrc = [
 const displayNote = (noteName) => {
     // console.log(`${notesForEmma[noteName.className.split(' ')[0]]}`);
     const loveNote = document.querySelector(".love-note");
+    loveNote.style.display = "block";
     loveNote.style.backgroundImage = "url(../img/pink-paper.webp)";
     loveNote.style.height = "80vh";
     loveNote.style.width = "40vw";
@@ -98,9 +111,14 @@ const baxterHeadPat = () => {
     thoughtBubble.src = baxterThoughtImgSrc[imgSrcArrayNo];
 };
 
+const closeLoveLetter = () => {
+    const loveNote = document.querySelector(".love-note");
+    loveNote.style.display = "none";
+};
+
 const main = () => {
     const tiles = document.querySelectorAll(".tile");
-    
+
     tiles.forEach((tile) => {
         tile.style.cursor = "pointer";
         tile.addEventListener("click", () => {

valentines-day-25/style/style.css

@@ -200,6 +200,7 @@ section {
     z-index: 3;
     position: absolute;
     left: 25%;
+    display: none;
 }
 
 .close-note {