script.js

//Variables
let mobile_media_query = window.matchMedia("(max-width: 400px)");
let tablet_media_query = window.matchMedia(
  "(min-width: 400px) and (max-width: 600px)"
);
const notes = document.querySelectorAll(".js-note");

document.addEventListener("click", playAudio);
function playAudio() {
  const audio = document.querySelector("audio");
  audio.play();
  document.removeEventListener("click", playAudio);
}
randomlySelectPoem();
function randomlySelectPoem() {
  const poems = [
    [
      "If I thought for just one moment that this would be my last breath,\nI'd tell you I'll love you forever, even beyond death.\nIf I thought for just one moment that your face would be the last I'd see,\nI'd take a million pictures and save them just for me.\n",
      "If I thought for just one moment that your voice would be the last I'd hear,\nI'd listen attentively and promise not to shed a tear.\nIf I thought for just one moment that your touch would be the last I'd feel,\nI'd embrace you and know that this has all been real.<br>",
      "If I thought for just one moment that my heart would beat its last beat,\nI'd thank the Lord for allowing us to meet.<br>",
    ],
    [
      "i carry your heart with me(i carry it in\nmy heart)i am never without it(anywhere\ni go you go,my dear;and whatever is done\nby only me is your doing,my darling)",
      "i fear\n no fate(for you are my fate,my sweet)i want\nno world(for beautiful you are my world,my true)\nand it’s you are whatever a moon has always meant\nand whatever a sun will always sing is you",
      "here is the deepest secret nobody knows\n(here is the root of the root and the bud of the bud\nand the sky of the sky of a tree called life;which grows\nhigher than soul can hope or mind can hide)\nand this is the wonder that's keeping the stars apart\n\ni carry your heart(i carry it in my heart)",
    ],
    [
      "Let me take care of your broken heart\nand show you how to fly.\nLet me hold you gently by the hand\nand kiss your tears goodbye.",
      "Let me lead you to tomorrow's light\nand out of needless rain,\n'cause all I want right now\nis to see you smile again.",
      "Let me sing you all the songs I wrote\n'til you sleep in my embrace,\nand I'll keep you safe and warm until\nthe sunlight strokes your face.",
    ],
    [
      "No words could ever tell you,\nNo action could express\nThe way I feel about you.\nWith you, my life is blessed.\n",
      "You're the light in my tunnel.\nYou are my pot of gold.\nYou are the strength that gets me through\nWhen despair has taken hold.",
      "There's nothing I could ever say\nAnd nothing I could do\nTo let you know just how much\nLove is in my heart for you.",
    ],
    [
      "I love you soooo much,\nMeri pooku Suzu\nMeri pookie bear\nMeri Ms Universe,\n Meri Dhadkan \n Meri Jaan \n Meri mutu \nMeri Sujata",
      "Please take my hand, come walk with me\nI will show you the way and let you see\nHow love and happiness will make you feel\nAnd make your life feel so unreal",
      "I will hold you tight\nAll through the night\nAnd never let you out of my sight\nFor you belong to me\nFor all the world to see",
    ],
  ];

  const randomIndex = Math.floor(Math.random() * poems.length);
  const selectedPoem = poems[randomIndex];

  document.getElementById("one").innerHTML = selectedPoem[0].replace(
    /\n/g,
    "<br>"
  );
  document.getElementById("two").innerHTML = selectedPoem[1].replace(
    /\n/g,
    "<br>"
  );
  document.getElementById("three").innerHTML = selectedPoem[2].replace(
    /\n/g,
    "<br>"
  );
}

//-> Function that resets the size of the notes.
function recize_notes() {
  for (let i = 0; i < notes.length; i++) {
    if (notes[i].classList.contains("active")) {
      notes[i].classList.remove("active");
      gsap.set(notes[i], {
        height: "30%",
        clearProps: "all",
      });
    }
  }
}

//-> Main function that enables all the notes.
function notes_ready() {
  gsap.to(".js-envelop-content", {
    height: "110%",
    duration: 0.5,
  });

  for (let i = 0; i < notes.length; i++) {
    notes[i].addEventListener("click", function () {
      if (mobile_media_query.matches) {
        if (this.classList.contains("active")) {
          this.classList.remove("active");
          gsap.set(this, {
            height: "30%",
            clearProps: "all",
          });
        } else {
          for (let i = 0; i < notes.length; i++) {
            if (notes[i].classList.contains("active")) {
              notes[i].classList.remove("active");
              gsap.set(notes[i], {
                height: "30%",
                clearProps: "all",
              });
            }
          }
          this.classList.add("active");
          gsap.set(this, {
            height: 125 + 40 * i + "%",
          });
        }
      } else if (tablet_media_query.matches) {
        if (this.classList.contains("active")) {
          this.classList.remove("active");
          gsap.set(this, {
            height: "30%",
            clearProps: "all",
          });
        } else {
          for (let i = 0; i < notes.length; i++) {
            if (notes[i].classList.contains("active")) {
              notes[i].classList.remove("active");
              gsap.set(notes[i], {
                height: "30%",
                clearProps: "all",
              });
            }
          }
          this.classList.add("active");
          gsap.set(this, {
            height: 80 + 21 * i + "%",
          });
        }
      } else {
        if (this.classList.contains("active")) {
          this.classList.remove("active");
          gsap.set(this, {
            height: "30%",
            clearProps: "all",
          });
        } else {
          for (let i = 0; i < notes.length; i++) {
            if (notes[i].classList.contains("active")) {
              notes[i].classList.remove("active");
              gsap.set(notes[i], {
                height: "30%",
                clearProps: "all",
              });
            }
          }
          this.classList.add("active");
          gsap.set(this, {
            height: 70 + 20 * i + "%",
          });
        }
      }
    });
  }
}

//-> Function that set up the up paper of the envelope.
function set_up_paper() {
  var arr = [0, 0, 100, 0, 50, 61];
  gsap.set(".js-up-paper", {
    bottom: "97%",
    rotation: 180,
    zIndex: 200,
    clipPath:
      "polygon(" +
      arr[0] +
      "%" +
      arr[1] +
      "%," +
      arr[2] +
      "%" +
      arr[3] +
      "%," +
      arr[4] +
      "%" +
      arr[5] +
      "%)",
    onComplete: notes_ready,
  });
}

//-> Function that starts the up paper transition.
function envelop_transition() {
  gsap.to(".js-up-paper", {
    bottom: "1%",
    duration: 0.25,
    onComplete: set_up_paper,
  });
  document
    .querySelector(".js-up-paper")
    .removeEventListener("click", envelop_transition);
  document.querySelector(".js-up-paper").classList.remove("cursor");
}

//-> Function that allows cut the sticker.
function sticker() {
  gsap.set(".js-sticker", { width: "20%", left: "-80%" });
  document.body.classList.remove("scissors");
  document.querySelector(".js-sticker").removeEventListener("click", sticker);
  document
    .querySelector(".js-up-paper")
    .addEventListener("click", envelop_transition);
  document.querySelector(".js-up-paper").classList.add("cursor");
}

document.querySelector(".js-sticker").addEventListener("click", sticker);

window.onresize = function (event) {
  recize_notes();
};