const notesForEmma = {
    tileOne: "hello",
    tileTwo: "emma",
    tileThree: "how",
    tileFour: "are",
    tileFive: "you",
    tileSix: "i",
    tileSeven: "think",
    tileEight: "you",
    tileNine: "are",
    tileTen: "a",
    tileEleven: "great",
    tileTwelve: "person",
};

const note = document.querySelector(".read-this");

note.addEventListener("click", () => {
    const tiles = document.querySelectorAll(".tile");
    
    tiles.forEach((el) => {
        el.addEventListener("click", () => {
            displayNote(el);
        });
    });

    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 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);
}