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 displayNote = (noteName) => {
    console.log(`${notesForEmma[noteName.className.split(' ')[0]]}`);
};

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 baxterHeadPat = () => {
    console.log("purrrrrr");
};

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

    const headPats = document.querySelector(".headpats");
    headPats.style.cursor = "pointer";
    headPats.addEventListener("click", baxterHeadPat);

    const transHeart = document.querySelector(".trans-pride-heart");
    transHeart.style.cursor = "pointer";
    transHeart.addEventListener("click", extraLove);

    const readThis = document.querySelector(".read-this");
    readThis.style.cursor = "default";
    readThis.removeEventListener("click", main);
};

const readThis = document.querySelector(".read-this");
readThis.addEventListener("click", main);