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

code changes 

add fontawesome - use heart glyph
remove event listener from note after reading
to prevent triggering other event listeners
again
This commit is contained in:
emma 2025-02-05 09:44:09 -05:00
parent b20b037fe5
commit effd7feefc
3 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,7 @@
>
</div>
</section>
<script src="https://kit.fontawesome.com/821c138f8d.js" crossorigin="anonymous"></script>
<script src="/js/script.js" defer></script>
<footer>
<p>happy valentine's day!</p>

36
cafe-events/valentines-day-25/js/script.js
View File

@ -13,9 +13,20 @@ const notesForEmma = {
tileTwelve: "person",
};
const note = document.querySelector(".read-this");
const displayNote = (noteName) => {
console.log(`${notesForEmma[noteName.className.split(' ')[0]]}`);
};
note.addEventListener("click", () => {
const extraLove = () => {
const header = document.querySelector(".header-text");
header.innerHTML += '. Always <i class="fa-solid fa-heart"></i>';
const transHeart = document.querySelector(".trans-pride-heart");
transHeart.style.cursor = "default";
transHeart.removeEventListener("click", extraLove);
}
const main = () => {
const tiles = document.querySelectorAll(".tile");
tiles.forEach((el) => {
@ -27,22 +38,11 @@ note.addEventListener("click", () => {
const transHeart = document.querySelector(".trans-pride-heart");
transHeart.style.cursor = "pointer";
transHeart.addEventListener("click", extraLove);
});
const displayNote = (noteName) => {
console.log(`${notesForEmma[noteName.className.split(' ')[0]]}`);
const note = document.querySelector(".read-this");
note.style.cursor = "default";
note.removeEventListener("click", main);
};
const extraLove = () => {
const header = document.querySelector(".header-text");
header.innerHTML += `. Always <svg width="40" height="40" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.99987 6.00001C10.6646 3.66763 14.4999 6.50001 15.9999 8.50001C17.4999 6.5 21.3351 3.66763 25.9999 6.00001C31.9999 8.99999 30.4998 16.5 25.9998 21C23.8041 23.1958 19.9371 27.0628 17.1087 29.2137C16.4552 29.7106 15.5614 29.6884 14.9226 29.1728C12.3299 27.08 8.16491 23.165 5.99987 21C1.49986 16.5 -0.000126839 8.99999 5.99987 6.00001Z" fill="#F8312F"/>
<path d="M15.9998 8.49998V11.5492C17.2695 8.86501 20.4252 5.28051 25.6578 5.83746C21.1482 3.80623 17.463 6.54908 15.9998 8.49998Z" fill="#CA0B4A"/>
<path d="M11.9456 5.53691C10.2614 4.95005 8.22499 4.88745 5.99987 6.00001C-0.000126839 8.99999 1.49986 16.5 5.99987 21C8.16491 23.165 12.3299 27.08 14.9226 29.1728C15.5614 29.6884 16.4552 29.7106 17.1087 29.2137C17.3629 29.0204 17.6255 28.8132 17.8945 28.5946C15.0398 26.4524 11.0335 23.0762 8.85898 21.1325C3.90218 16.702 2.24993 9.31788 8.85898 6.36425C9.93279 5.88435 10.9667 5.62654 11.9456 5.53691Z" fill="#CA0B4A"/>
<ellipse cx="23.4771" cy="12.5937" rx="2.83554" ry="4.78125" transform="rotate(30 23.4771 12.5937)" fill="#F37366"/>
</svg>`;
const transHeart = document.querySelector(".trans-pride-heart");
transHeart.style.cursor = "default";
transHeart.removeEventListener("click", extraLove);
}
const note = document.querySelector(".read-this");
note.addEventListener("click", main);

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

@ -69,7 +69,11 @@ section {
.header-text {
font-family: alwaysinmyheart;
font-size: 3.5rem;
font-size: 3.25rem;
color: var(--text-color-light-red);
}
.fa-solid.fa-heart {
color: var(--text-color-light-red);
}