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"
>
</div>
<div class="love-note"></div>
<div class="items">
<img class="baxter-thought"
width="100" height="100"

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

@ -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];
};

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

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