문제
- 마우스가
title위로 올라가면 텍스트가 변경되어야 합니다. - 마우스가
title을 벗어나면 텍스트가 변경되어야 합니다. - 브라우저 창의 사이즈가 변하면
title이 바뀌어야 합니다. - 마우스를 우 클릭하면
title이 바뀌어야 합니다. title의 색상은colors배열에 있는 색을 사용해야 합니다..css와.html파일은 수정하지 마세요.- 모든 함수 핸들러는
superEventHandler내부에 작성해야 합니다. - 모든 조건이 충족되지 못하면 ❌를 받습니다.
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// <⚠️ 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 = {
onMouseEnter: function () {
title.innerHTML = "The mouse is here!";
title.style.color = colors[0];
},
onmouseout: function () {
title.innerHTML = "The mouse is gone!";
title.style.color = colors[1];
},
onresize: function () {
title.innerHTML = "you just resized!!";
title.style.color = colors[2];
},
onClick: function () {
title.innerHTML = "That was a right click!!";
title.style.color = colors[4];
}
};
title.addEventListener("mouseenter", superEventHandler.onMouseEnter);
title.addEventListener("mouseout", superEventHandler.onmouseout);
window.addEventListener("resize", superEventHandler.onresize);
title.addEventListener("contextmenu", superEventHandler.onClick);