Nomad CoderバニラJSチャレンジ4日目

#3.0 ~ #3.5
#3.0 Document Object:JavaScriptはHTMLを変更および取得できます.
#3.1 HTML in Javascript : console.要素情報はdir()で読み取ることができます.
#3.2 Searching For Elements :
querySelector =>
-elementはcssで読み込むことができます.(ex.クラス名:.hello/ID名:#hello)
-elementが多い場合は、最初のelementのみがインポートされます.
#3.3 Events : console.dir()の要素の中でonで始まるのはeventです.
#3.4 Events part Two:GoogleでMDNを検索する場合、JSの角度からHTMLタグを検索するには、Web APIという名前のドキュメントを検索してください.
#3.5 More Events:addEventListenerがon elementよりも多く使用されているのは、removeコマンドを使用してEventListenerを削除できるためです.
課題:

// <⚠️ DONT DELETE THIS ⚠️>
import "./styles.css";
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];
// <⚠️ /DONT DELETE THIS ⚠️>

/*
✅ The text of the title should change when the mouse is on top of it.
✅ The text of the title should change when the mouse is leaves it.
✅ When the window is resized the title should change.
✅ On right click the title should also change.
✅ The colors of the title should come from a color from the colors array.
✅ DO NOT CHANGE .css, or .html files.
✅ ALL function handlers should be INSIDE of "superEventHandler"
*/
const title = document.querySelector("h2");

const superEventHandler = {
  handleMouseOn: function () {
    title.innerText = "The mouse is here!";
    title.style.color = colors[0];
  },
  handleMouseLeave: function () {
    title.innerText = "The mouse is gone!";
    title.style.color = colors[1];
  },
  handleWindowResize: function () {
    title.innerText = "You just resized!";
    title.style.color = colors[2];
  },
  handleMouseRightClick: function () {
    title.innerText = "That was a right click!";
    title.style.color = colors[3];
  }
};

title.addEventListener("mouseenter", superEventHandler.handleMouseOn);
title.addEventListener("mouseleave", superEventHandler.handleMouseLeave);
window.addEventListener("resize", superEventHandler.handleWindowResize);
title.addEventListener("contextmenu", superEventHandler.handleMouseRightClick);