최근에 sadanandpai의 Frontend Mini Challenge(이하 FMC라고 하겠음)를 하고있다...
엔간해선 다 예전에 한번 만들어 본건데 다시 하니까 감회가 새롭고 좋은듯.
현 시점에서 20개까지 해놨는데 한 번에 다 올리긴 힘드니까 일하기 싫을때마다 하나씩 올리겠음
계산기 다시 구현하다가 자꾸 실패해서 예전에 한거 보긔... 기억력 뭔
데모 : https://ohikmyeong.github.io/frontend-mini-challenges/counter
HTML
|
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
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter</title>
<link rel="stylesheet" type="text/css" href="./../common/reset.css"/>
<link rel="stylesheet" type="text/css" href="./style.css"/>
<script src="./../common/common.js" defer></script>
<script src="./main.js" type="module"></script>
</head>
<body>
<main>
<div id="counter-result">${0}</div>
<form id="counter-form">
<div class="counter-form-btns">
<button class="btn-min" data-btn="min">-</button>
<button class="btn-pls" data-btn="pls">+</button>
</div>
<div class="counter-form-per">
<span>Increase/Decrement by</span>
<input type="number" class="ipt-per" value="1" min="1" max="100"/>
</div>
<button class="btn-reset" data-btn="rst">RESET</button>
</form>
</main>
</body>
</html>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@charset "utf-8";
#counter-result{
margin-bottom:1rem;
font-size:5rem; font-weight:bold;}
#counter-form{
display:flex; flex-flow:column nowrap;
align-items:center;
gap:1rem;
}
.ipt-per{width:4em;}
.btn-reset{
margin-top:2rem;
width:100%;}
|
cs |
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
42
43
44
45
46
47
48
49
50
51
52
|
class Counter{
#result = 0;
#per = 1;
constructor(){
this.$result = document.getElementById('counter-result');
this.$form = document.getElementById('counter-form');
this.$per = document.getElementsByClassName('ipt-per')[0];
this.init();
}//constructor
init(){
this.set_per();
this.display_result();
this.$form.addEventListener('submit',e => e.preventDefault());
this.$form.addEventListener('change',this.on_change);
this.$form.addEventListener('click',this.on_click);
}//init
set_per(){
this.#per = this.$per.value;
}//set_per
display_result(){
this.$result.textContent = this.#result;
}//display_result
on_change = e =>{
if(!(e.target.classList.contains('ipt-per'))) return;
this.set_per();
}//on_change
on_click = e =>{
switch(e.target.dataset.btn){
case "min" : {
this.#result -= Number(this.#per);
}break;
case "pls" : {
this.#result += Number(this.#per);
}break;
case "rst" : {
this.$per.value = 1;
this.set_per();
this.#result = 0;
}break;
}//switch
this.display_result();
}//on_click
}//Counter
new Counter();
|
cs |
'CSS&JS > Frontend Mini Challenge' 카테고리의 다른 글
| [FMC]05.Toast Popup (0) | 2023.06.13 |
|---|---|
| [FMC]04.Light Dark Mode (0) | 2023.06.13 |
| [FMC]03.Telephone Formatter (0) | 2023.04.10 |
| [FMC]02.Guess the Number (0) | 2023.04.10 |