사용자 입력(input) 받기
<input> 이벤트
: <input>에서 일어나는 event
input: 사용자가 입력한 값(<input>)이 바뀔 때 실행change: 사용자가 입력한 값이 바뀌고 다른 곳을 클릭하면(focus를 잃으면)실행
document.getElementById('email').addEventListener('input', function () {
console.log('안녕')
// 사용자가 입력한 값이 바뀔 때마다 '안녕'이 콘솔에 출력됨
});입력칸 <input> 사이즈 조절하기
<input>태그 안에 넣기
(sixe="": width, height, font-size)- css에
input { }class 생성하기
/* 입력 받는 칸 */
input {
font-family: "Gugi", sans-serif;
font-size:22px;
width: 80px;
height: 30px;
}연산자
느슨한 비교 ==
엄격한 비교 ===
true로 인식 (truthy)
- 0을 제외한 숫자
- '문자'
- [ ]
- { }
false로 인식 (falsy)
- 0
- '' (빈 문자열)
- null
- undefined
- NaN
369 게임 만들기
구현 계획
369 게임 (3의 배수에 박수 치기)
- 기본 구조 구현(제목, 버튼 기능 등)
<input>으로 입력 받기- 입력 받은 값이 3의 배수인지 계산하기
i % 3 == 0이면 3의 배수
- 결과 출력하기
- 3의 배수이면 '박수' 출력
- 3의 배수가 아니면 '통과' 출력
- 9의 배수에는 '박수 박수' 출력
- 9의 배수 조건을 if문의 처음 조건에 넣기
기능 구현
input으로 입력 받은 값이 3의 배수인지 계산하기- 9의 배수인 경우 다른 메시지('박수 박수') 출력하기
document.getElementsByClassName('modal')[0].addEventListener('submit', function(e) {
if (document.getElementById('result').value % 9 == 0) { // 9의 배수
alert('박수 박수')
e.preventDefault()
} else if (document.getElementById('result').value % 3 == 0) { // 3의 배수
alert('박수')
e.preventDefault()
}
});index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css" />
<!-- 폰트 -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');
</style>
</head>
<body>
<!-- 기본 화면 -->
<div class="main">
<h4>재밌는 369 게임</h4>
<button type="button" id="start">start!</button>
</div>
<!-- 입력창 -->
<div class="modal">
<form action="success.html">
<input type="text" id="result">
<!-- <input> 사이즈 조절하기:
1. <input> 태그 안에 넣기 (sixe="": width, height, font-size)
2. css에서 input { } class 생성하기
-->
<button type="submit" id="submit">제출</button>
<button type="button" id="close">닫기</button>
</form>
</div>
<script src="index.js"></script>
</body>
</html>index.js
// 기본 기능
document.getElementById('start').addEventListener('click', function() {
document.getElementsByClassName('modal')[0].classList.add('show')
});
document.getElementById('close').addEventListener('click', function() {
document.getElementsByClassName('modal')[0].classList.remove('show')
});
/* 3의 배수에 박수 치기 + 9의 배수에는 '박수 박수' 출력 */
document.getElementsByClassName('modal')[0].addEventListener('submit', function(e) {
if (document.getElementById('result').value % 9 == 0) {
alert('박수 박수')
e.preventDefault()
} else if (document.getElementById('result').value % 3 == 0) {
alert('박수')
e.preventDefault()
}
});main.css
/* 제목 */
.main {
font-family: "Gugi", sans-serif;
font-size: 38px;
text-align: center;
margin: 100px;
}
/* start 버튼 */
#start {
background-color: coral;
font-family: "Gugi", sans-serif;
font-size: 20px;
padding: 10px;
margin: auto;
width: auto;
border-radius: 10px;
}
#start:hover {
background-color: rgb(252, 229, 27);
}
/* 모달창 */
.modal {
display: none;
background: white;
text-align: center;
padding: 8px;
margin: -80px;
}
/* 제출, 닫기 버튼 */
button {
background-color: greenyellow;
font-family: "Gugi", sans-serif;
font-size:18px;
border-radius: 8px;
}
button:hover {
background-color: gold;
}
/* 입력 받는 칸 */
input {
font-family: "Gugi", sans-serif;
font-size:22px;
text-align: center;
width: 80px;
height: 30px;
margin: 30px;
border-radius: 8px;
}
.show {
display: block;
}
success.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');
</style>
</head>
<body>
<div class="main">
<h4>통과!</h4>
</div>
<script src="index.js"></script>
</body>
</html>출처
코딩애플
비전공자 개발 일기