Useful scripts

useful-scripts.js

/* =======================================
 * Random emoji for 404 error message.
 * ==================================== */
// <h1 class="error-emoji"></h1>
const randomErrorEmoji = () => {
  const error = document.getElementsByClassName('error-emoji')[0];
  const emojiArray = [
    '\\(o_o)/', '(o^^)o', '(˚Δ˚)b', '(^-^*)', '(≥o≤)', '(^_^)b', '(·_·)',
    '(=\'X\'=)', '(>_<)', '(;-;)', '\\(^Д^)/',
  ];
  if (error) {
    const errorEmoji = emojiArray[Math.floor(Math.random() * emojiArray.length)];
    error.appendChild(document.createTextNode(errorEmoji));
  }
};
randomErrorEmoji();

/* =======================================
 * Scroll to top
 * Need to include smooth scroll lib: https://github.com/cferdinandi/smooth-scroll
 * ==================================== */
// Selected DOM elements
const toTopBtn = document.querySelector('.to-top');

// Show toTopBtn when scroll to 600px
let lastPosition = 0,
    ticking = false

window.addEventListener('scroll', () => {
  lastPosition = body.scrollTop === 0 ? html.scrollTop : body.scrollTop;
  if (!ticking) {
    window.requestAnimationFrame(() => {
      if (lastPosition >= 600) {
        toTopBtn.classList.remove('is-hide');
      } else {
        toTopBtn.classList.add('is-hide');
      }
      ticking = false;
    });
  }
  ticking = true;
});

// Smooth Scroll to top when click toTopBtn
const scroll = new SmoothScroll('a[href*="#"]');
toTopBtn.addEventListener('click', () => {
  scroll.animateScroll(0);
});