<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전화기 화면</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
.p-10 {
padding: 10px;
}
.target {
display: flex;
justify-content: end;
align-items: end;
padding: 10px;
font-size: 24px;
}
</style>
<!-- javascript 작성 공간 -->
<script>
window.addEventListener("load", function(){
var buttonList = document.querySelectorAll(".keypad");
for(var i=0; i < buttonList.length; i++) {
buttonList[i].addEventListener("click", function(){
//this == 누른 버튼(주인공)
var div = document.querySelector(".target");
div.textContent += this.textContent;
});
}
var clearBtn = document.querySelector(".clear");
clearBtn.addEventListener("click", function(){
var div = document.querySelector(".target");
div.textContent = "";
});
});
</script>
</head>
<body>
<div class="container w-400">
<div class="row">
<div class="target" style="height: 50px;"></div>
</div>
<hr>
<div class="row float-container">
<div class="col-3 p-10"><button class="btn w-100 keypad">7</button></div>
<div class="col-3 p-10"><button class="btn w-100 keypad">8</button></div>
<div class="col-3 p-10"><button class="btn w-100 keypad">9</button></div>
<div class="col-3 p-10"><button class="btn w-100 keypad">4</button></div>
<div class="col-3 p-10"><button class="btn w-100 keypad">5</button></div>
<div class="col-3 p-10"><button class="btn w-100 keypad">6</button></div>
<div class="col-3 p-10"><button class="btn w-100 keypad">1</button></div>
<div class="col-3 p-10"><button class="btn w-100 keypad">2</button></div>
<div class="col-3 p-10"><button class="btn w-100 keypad">3</button></div>
<div class="col-3 p-10"><button class="btn w-100 keypad">*</button></div>
<div class="col-3 p-10"><button class="btn w-100 keypad">0</button></div>
<div class="col-3 p-10"><button class="btn w-100 clear">#</button></div>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 기본 이벤트 제어 (0) | 2023.10.10 |
|---|---|
| 글자수 입력제한 (0) | 2023.10.05 |
| 글자크기 조절 문제 (2) | 2023.09.30 |
| 색상 변경 예제 (0) | 2023.09.27 |
| 이벤트 콜백(callback) (0) | 2023.09.26 |