챌린지 4일차

자세한 첼린지 내용은 쓸 수 없어서 코드 설명만 쓰려고 했다.

 

// <⚠️ 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 = {
  handleOver: function () {
    title.innerText = "The mouse is here!";
    title.style.color = colors[0];
  },
  handleOut: function () {
    title.innerText = "The mouse is gone!";
    title.style.color = colors[1];
  },
  handleRight: function () {
    title.innerText = "That was a right click!";
    title.style.color = colors[2];
  },
  handleResize: function () {
    title.innerText = "You just resized!";
    title.style.color = colors[3];
  }
};

window.addEventListener("contextmenu", superEventHandler.handleRight);
window.addEventListener("resize", superEventHandler.handleResize);
title.addEventListener("mouseover", superEventHandler.handleOver);
title.addEventListener("mouseout", superEventHandler.handleOut);

css에서 글자체를 import하여 창에 보여준다.

함수를 superEventHandler 안에 모두 저장하는 방법을 알게되었다. 그리고 window는 웹 창의 전체적인 부분을 다룬다는 것을 확실히 알게 되었다. 이로 window와 document의 차이를 더 정확히 알게되었다.

글자의 색을 바꾸려면 title.style.color로 해야하는 것을 알았다. 처음에 글자 색을 바꿀 때 title.color로만 했다가 변경이 안됐다.

이 첼린지를 하면서 이벤트 리스너의 종류가 여러가지 있는 것을 확인했고 좀 더 많이 공부해야겠다고 생각했다.