zepp
/
my-cafe-events
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
emma 2025-02-09 07:32:20 -05:00
parent 7abe038713
commit fdcefdf75b
3 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
valentines-day-25/index.html
View File

@ -39,7 +39,7 @@
height="1000" width="1000" height="1000" width="1000"
> >
</div> </div>
<div class="love-note"></div>
<div class="items"> <div class="items">
<img class="baxter-thought" <img class="baxter-thought"
width="100" height="100" width="100" height="100"

24
valentines-day-25/js/script.js
View File

@ -1,7 +1,7 @@
const notesForEmma = { 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 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. tileTwo: `how happy you are to be surrounded by people who understand you.
who support you. who love seeing you at your best`, who support you. who love seeing you at your best`,
tileThree: `you are getting better. tileThree: `you are getting better.
@ -19,14 +19,14 @@ const notesForEmma = {
you stood up for yourself. you took action. you made friends at one 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. of your loneliest points. how brave you are to take that risk.
how happy you are to know friendship again`, 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. you haven't listened to it in a long time.
i want you to remember the times you used to dream of dancing i want you to remember the times you used to dream of dancing
and twirling in your apartment with the stereo on. and twirling in your apartment with the stereo on.
the only two important things in that moment was the music 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" src="https://www.youtube-nocookie.com/embed/hlco1UrtJSc?si=P3YNM8EM27kAn2vA"
title="YouTube video player" frameborder="0" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
@ -71,7 +71,15 @@ const baxterThoughtImgSrc = [
]; ];
const displayNote = (noteName) => { 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 = () => { const extraLove = () => {
@ -84,9 +92,9 @@ const extraLove = () => {
} }
const baxterHeadPat = () => { const baxterHeadPat = () => {
const imgSrcArrayNo = Math.floor(Math.random() * 7) const imgSrcArrayNo = Math.floor(Math.random() * 7);
console.log(imgSrcArrayNo)
const thoughtBubble = document.querySelector(".baxter-thought"); const thoughtBubble = document.querySelector(".baxter-thought");
thoughtBubble.src = baxterThoughtImgSrc[imgSrcArrayNo]; thoughtBubble.src = baxterThoughtImgSrc[imgSrcArrayNo];
}; };

6
valentines-day-25/style/style.css
View File

@ -196,6 +196,12 @@ section {
width: auto; width: auto;
} }
.love-note {
z-index: 3;
position: absolute;
left: 25%;
}
.items { .items {
display: flex; display: flex;
flex-direction: column; flex-direction: column;