요구조건
- 마우스가 title위로 올라가면 텍스트가 변경되어야 합니다.
- 마우스가 title을 벗어나면 텍스트가 변경되어야 합니다.
- 브라우저 창의 사이즈가 변하면 title이 바뀌어야 합니다.
- 마우스를 우 클릭하면 title이 바뀌어야 합니다.
- title의 색상은 colors 배열에 있는 색을 사용해야 합니다.
- 모든 함수 핸들러는 superEventHandler내부에 작성해야 합니다.
<!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 ⚠️>
const myText = document.querySelector("h2");
const superEventHandler = {
click: function () {
myText.innerText = "That was a right click!";
myText.style.color = colors[0];
},
mouseEnter: function () {
myText.innerText = "The mouse is here!";
myText.style.color = colors[1];
},
mouseLeave: function () {
myText.innerText = "The mouse is gone!";
myText.style.color = colors[2];
},
resize: function () {
myText.innerText = "You just Resized!";
myText.style.color = colors[3];
}
};
myText.addEventListener("contextmenu", superEventHandler.click);
myText.addEventListener("mouseenter", superEventHandler.mouseEnter);
myText.addEventListener("mouseleave", superEventHandler.mouseLeave);
window.addEventListener("resize", superEventHandler.resize);
'웹 개발 > 바닐라js' 카테고리의 다른 글
| [드림코딩] 윈도우 사이즈 가져오기 (0) | 2021.09.21 |
|---|---|
| [노마드코더] 바닐라JS 챌린지 - 랜덤 그라데이션 백그라운드 (0) | 2021.09.02 |
| [노마드코더] 바닐라JS 챌린지 - 크리스마스 이브 D-day 계산기 (0) | 2021.09.02 |
| [노마드코더] 바닐라JS 챌린지 - 숫자 입력 게임 (0) | 2021.08.31 |
| [노마드코더] 바닐라JS 챌린지 - resize발생시 배경화면 색 변경 (0) | 2021.08.27 |
[노마드코더] 바닐라JS 챌린지 - 마우스 이벤트, 윈도우 사이즈 - 글자 색변 경하기