diff --git a/valentines-day-25/js/script.js b/valentines-day-25/js/script.js index b5dbdad..7c06f88 100644 --- a/valentines-day-25/js/script.js +++ b/valentines-day-25/js/script.js @@ -26,7 +26,7 @@ const notesForEmma = { 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. +

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. @@ -72,7 +72,46 @@ const notesForEmma = { Don't let it. Don't run away

`, }; -const creditNote = ``; +const readThisMessage = ` +

You were out late last night, again. A craving for chocolate + had sent you on a quest late at night. You needed something special. This was + no time for a Hershey's bar. You took the bus into the city, and found a specialty + shop. Quite odd, when did this show up? You entered and a woman behind the counter + said "You need these, i can tell."

+ +

"Honey, quite simply, you look like you've seen some shit" she said in + a playful, yet caring tone. "This box here, each item comes with a note, the notes all + have something you've desperately needed to hear. Take them, no charge." Free candy? + Who could resist? Certainly not me.

+ +

Any ways you wrote this down in your journal so you'd believe yourself. + Maybe don't stay up so late anymore, hm?

+ +

(a note to the visitor - other items on the page are clickable! Baxter however may + have a bit of a preference on where he wants pets).

+ + `; + +const creditNote = ` +

credits for resources used to make this event entry

+ + `; const baxterThoughtImgSrc = [ "../img/baxter-thoughts/baxter-thought-one.webp", @@ -84,17 +123,24 @@ const baxterThoughtImgSrc = [ "../img/baxter-thoughts/baxter-thought-seven.webp" ]; +const displayReadThisNote = () => { + const readNote = document.querySelector(".love-note"); + readNote.style.display = "block"; + readNote.innerHTML = readThisMessage; +}; + 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"; - loveNote.style.padding = "3rem"; loveNote.innerHTML = notesForEmma[noteName.className.split(' ')[0]]; }; +const displayCredits = () => { + const credits = document.querySelector(".love-note"); + credits.style.display = "block"; + credits.innerHTML = creditNote; +}; + const extraLove = () => { const header = document.querySelector(".header-text"); header.innerHTML += '. Always '; @@ -117,6 +163,8 @@ const closeLoveLetter = () => { }; const main = () => { + displayReadThisNote(); + const tiles = document.querySelectorAll(".tile"); tiles.forEach((tile) => { @@ -139,5 +187,8 @@ const main = () => { readThis.removeEventListener("click", main); }; +const credits = document.querySelector(".credits"); +credits.addEventListener("click", displayCredits); + const readThis = document.querySelector(".read-this"); readThis.addEventListener("click", main); \ No newline at end of file diff --git a/valentines-day-25/style/style.css b/valentines-day-25/style/style.css index 4b5b67a..4e6c5a2 100644 --- a/valentines-day-25/style/style.css +++ b/valentines-day-25/style/style.css @@ -79,6 +79,14 @@ a:hover { color: var(--link-hover-color); } +ul { + list-style-type: none; +} + +li { + padding: 0.5rem; +} + .footer-container { display: flex; width: 100%; @@ -231,6 +239,10 @@ a:hover { } .love-note { + height: 80vh; + width: 40vw; + background-image: url(../img/pink-paper.webp); + padding: 3rem; z-index: 3; position: absolute; left: 25%; @@ -239,12 +251,14 @@ a:hover { .note { font-size: 1.75rem; + line-height: 2rem; + margin-bottom: 1rem; font-family: learning-curve-regular; } .close-note { - height: 4vh; - width: 4vw; + height: 2vh; + width: 2vw; background-color: #00000000; border: none; font-size: 2rem;