index.js

import data from './data.js';

const envelope = document.querySelector('.envelope');

const honorificEle = document.querySelector('.envelope-card__honorific');
honorificEle.textContent = data.honorific;
const textEl = document.querySelector('.envelope-card__contentText');
const arr = [];
for (let i = 0, len = data.text.length; i < len; i++) {
  arr.push(`<p class="envelope-card__text">${data.text[i]}</p>`);
}
textEl.innerHTML = arr.join('');
const sourceEl = document.querySelector('.envelope-card__source');
sourceEl.textContent = data.source;
const dateEl = document.querySelector('.envelope-card__date');
dateEl.textContent = data.date;

const openBtn = document.querySelector('.btn-open');
openBtn.addEventListener('click', openEnvelope);

const closeBtn = document.querySelector('.btn-close');
closeBtn.addEventListener('click', closeEnvelope);

function toggleEnvelope() {
  envelope.classList.toggle('opened');
  envelope.classList.toggle('animate-flip');
}

function openEnvelope() {
  envelope.classList.add('opened');
  envelope.classList.add('animate-flip');
}

function closeEnvelope() {
  envelope.classList.remove('opened');
  envelope.classList.remove('animate-flip');
  envelope.classList.add('animate-fly-out');

  setTimeout(() => {
    window.chrome && window.chrome && window.chrome.closePopup();
  }, 2000);
}