[바닐라JS 챌린지] DAY4 과제

STUDY 📒/Javascript

[바닐라JS 챌린지] DAY4 과제

South Dev 2024. 2. 23. 00:04

✔ 오늘의 강의

강의: 바닐라 JS로 크롬앱 만들기 3.0 ~ 3.5

✔ 목표

제공되는 보일러 플레이트를 사용해 애플리케이션을 만들자

✔ 조건

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

참고 링크

https://developer.mozilla.org/en-US/docs/Web/Events

[Event reference | MDN

Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events

developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/Events)

✔ 과정

html

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h2>Hello!</h2>
    <script src="src/index.js"></script>
  </body>
</html>

// <⚠️ 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 superEventHandler = {};


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

// 1. 마우스가 title(h2) 위로 올라가면 텍스트가 변경되어야 한다.
title.addEventListener("mouseover", function () {
  title.innerText = "마우스가 위에 있다.";
});

// 2. 마우스가 title(h2)을 벗어나면 텍스트가 변경되어야 한다.
title.addEventListener("mouseout", function () {
  title.innerText = "마우스가 떠났다.";
});

// 3. 브라우저 창의 사이즈가 변하면 title(h2)이 바뀌어야 한다.
window.addEventListener("resize", function () {
  title.innerText = "사이즈를 변경했다.";
});

// 4. 마우스 우클릭하면 title(h2)이 바뀌어야 한다.
window.addEventListener("contextmenu", function () {
  title.innerText = "우클릭을 했다.";
});

7. 모든 함수 핸들러는 superEventHandler 내부에 작성해야 한다.

superEventHandler로 이동

// <⚠️ 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 = {
  // 1. 마우스가 title(h2) 위로 올라가면 텍스트가 변경되어야 한다.
  mouseOver: function () {
    title.innerText = "마우스가 위에 있다.";
    title.style.color = colors[0];
  },

  // 2. 마우스가 title(h2)을 벗어나면 텍스트가 변경되어야 한다.
  mouseLeave: function () {
    title.innerText = "마우스가 떠났다.";
    title.style.color = colors[1];
  },

  // 3. 브라우저 창의 사이즈가 변하면 title(h2)이 바뀌어야 한다.
  resize: function () {
    title.innerText = "사이즈를 변경했다.";
    title.style.color = colors[2];
  },

  // 4. 마우스 우클릭하면 title(h2)이 바뀌어야 한다.
  contextMenu: function () {
    title.innerText = "우클릭을 했다.";
    title.style.color = colors[3];
  }
};

title.addEventListener("mouseenter", superEventHandler.mouseOver);
title.addEventListener("mouseleave", superEventHandler.mouseLeave);
window.addEventListener("resize", superEventHandler.resize);
window.addEventListener("contextmenu", superEventHandler.contextMenu);

✔ 기억하고 싶은 점

- console.dir(document)와 console.log(document)의 차이점

dir은 객체의 속성을 확인

log는 객체의 요소를 확인