노마더코더 바닐라js 4일차 숙제

1. 마우스가 title위로 올라가면 텍스트가 변경되어야 합니다.
2. 마우스가 title을 벗어나면 텍스트가 변경되어야 합니다.
3. 브라우저 창의 사이즈가 변하면 title이 바뀌어야 합니다.
4. 마우스를 우 클릭하면 title이 바뀌어야 합니다.
5. title의 색상은 colors 배열에 있는 색을 사용해야 합니다.
6. .css 와 .html 파일은 수정하지 마세요.
7. 모든 함수 핸들러는 superEventHandler내부에 작성해야 합니다.
8. 모든 조건이 충족되지 못하면 ❌를 받습니다.

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

const txt = document.getElementsByTagName("h2").item(0);

const superEventHandler = {
  mouseover: function () {
    txt.innerText = "The mouse is here!";
    txt.style.color = colors[Math.floor(Math.random() * colors.length)];
  },

  mouseout: function () {
    txt.innerText = "The mouse is gone!";
    txt.style.color = colors[Math.floor(Math.random() * colors.length)];
  },
  click: function () {
    txt.innerText = "That was a right click!";
    txt.style.color = colors[Math.floor(Math.random() * colors.length)];
  },
  resize: function () {
    txt.innerText = "You just resized";
    txt.style.color = colors[Math.floor(Math.random() * colors.length)];
  }
};

txt.addEventListener("mouseover", superEventHandler.mouseover);
txt.addEventListener("mouseout", superEventHandler.mouseout);
window.addEventListener("click", superEventHandler.click);
window.addEventListener("resize", superEventHandler.resize);

 

document.getElementByTagName()을 변경하려면 .item(int) 를 붙여줬어야 했는데 그걸 몰라서 계속 에러가 났다.

나중에 다른사람이 쓴 코드 보니까 

const title = document.querySelector("h2");

로 써도 됐었네

이거쓸껄.....