반응형
정답일까?
주어진 코드를 실행했을 때 화면에 나타나는 채점이라고 적힌 button 태그를 클릭하면 정답입니다!👏🏻라는 경고창이 나타나도록 코드를 작성해 주세요. (박수 이모지 만들기가 어렵다면 본문의 글을 복사해서 붙여넣어 보세요)
단, HTML 태그에 직접 이벤트 핸들러를 등록하지 말고 자바스크립트 파일에서 코드를 작성해 주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>버튼 클릭 이벤트</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 id="title">정답일까?</h2>
<button id="grade">
채점
</button>
<script src="index.js"></script>
</body>
</html>body {
text-align: center;
padding: 30px 0;
}
#title {
font-weight: 500;
}
#grade {
width: 65px;
height: 35px;
color: #6500c3;
font-size: 15px;
border: solid 1px #6500c3;
border-radius: 5px;
background-color: transparent;
transition-duration: .5s;
cursor: pointer;
}
#grade:hover {
color: #FFFFFF;
background-image: linear-gradient(280deg, #8400ff, #a25df4);
}const btn = document.querySelector('#grade');
btn.onclick = function() {
alert('정답입니다!👏🏻');
};본 내용은 Codeit의 'Javascript 중급' 강의를
참고하여 작성한 내용입니다.
반응형
'Languages > JS' 카테고리의 다른 글
| [인터랙티브 Javascript] 03. 이벤트 살펴보기 (0) | 2021.02.19 |
|---|---|
| [인터랙티브 Javascript] 02. 브라우저와 자바스크립트 (0) | 2021.02.18 |
| [프로그래밍과 데이터 in JavaScript] 04. 과제로 복습하기 (0) | 2021.02.16 |
| [프로그래밍과 데이터 in JavaScript] 04. 과제로 복습하기 (0) | 2021.02.16 |
| [프로그래밍과 데이터 in JavaScript] 04. 과제로 복습하기 (0) | 2021.02.16 |