안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.
자바스크립트 예제 풀기 : 프로젝트 6번째 포스팅입니다.
이번 포스팅에서는 자바스크립트로 계산기를 만들어보겠습니다.
html, css, js까지 차근차근 따라와 주세요!
먼저, 완성된 이미지 먼저 보여드리겠습니다.
css로 정말 계산기처럼 보이도록 스타일을 입혔고,
=, C에 각각의 기능을 넣었습니다.
html
약간... 노가다 느낌이긴 한데, 그래도 계산기에 있는 버튼들은 다 만들어봐야겠죠?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Recording</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<section class="calculator">
<form>
<input type="text" name="" id="" class="screen">
</form>
<div class="buttons">
<!-- yellow -->
<button type="button" class="btn btn-yellow" data-num="*">*</button>
<button type="button" class="btn btn-yellow" data-num="/">/</button>
<button type="button" class="btn btn-yellow" data-num="-">-</button>
<button type="button" class="btn btn-yellow" data-num="+">+</button>
<!-- grey buttons -->
<button type="button" class="btn btn-grey" data-num=".">.</button>
<button type="button" class="btn btn-grey" data-num="9">9</button>
<button type="button" class="btn btn-grey" data-num="8">8</button>
<button type="button" class="btn btn-grey" data-num="7">7</button>
<button type="button" class="btn btn-grey" data-num="6">6</button>
<button type="button" class="btn btn-grey" data-num="5">5</button>
<button type="button" class="btn btn-grey" data-num="4">4</button>
<button type="button" class="btn btn-grey" data-num="3">3</button>
<button type="button" class="btn btn-grey" data-num="2">2</button>
<button type="button" class="btn btn-grey" data-num="1">1</button>
<button type="button" class="btn btn-grey" data-num="0">0</button>
<button type="button" class="btn-equal btn-grey">=</button>
<button type="button" class="btn-clear btn-grey">C</button>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>
js
querySelector로 element들을 가져왔습니다.
그리고 마우스로 클릭한 내용을 screen.value에 담아 계산하도록 처리했어요.
마지막으로 screen.value에 빈 값(' ')을 담아 초기화하도록 했습니다.
(function(){
let screen = document.querySelector('.screen');
let buttons = document.querySelectorAll('.btn');
let clear = document.querySelector('.btn-clear');
let equal = document.querySelector('.btn-equal');
// 클릭한 번호로 데이터 보여지기
buttons.forEach(function(button){
button.addEventListener('click', function(e){
let value = e.target.dataset.num;
screen.value += value;
})
});
// '=' 기능
equal.addEventListener('click', function(e){
if(screen.value === ''){
screen.value = '값을 입력해 주세요.';
} else {
let answer = eval(screen.value);
screen.value = answer;
}
})
// 'C' 기능 (초기화)
clear.addEventListener('click', function(e){
screen.value = '';
})
})();
eval()
- 문자로 표현된 JavaScript 코드를 실행하는 함수예요.
- 사용법 : eval(string);
- 주어진 코드에서 얻은 값이 없으면 undefined를 반환합니다.
- 이 함수는 해킹 당하기 쉬우므로 사용할 때, 아래 링크 통해 확인하고 사용해 주세요.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/eval
css
계산기 느낌을 낼 수 있도록 배치했어요.
js만 공부하실 거라면 css는 그냥 복붙하시면 됩니다.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.calculator{
flex: 0 0 95%;
}
.screen{
width: 100%;
font-size: 7rem;
padding: 0.5rem;
background: rgb(41,41,56);
color: white;
border:none;
}
.buttons{
display: flex;
flex-wrap: wrap;
transition: all 0.5s linear;
}
button{
flex:0 0 25%;
border: 1px solid black;
padding: 0.25rem 0;
transition: all 2s ease;
}
button:hover{
background: blue;
}
.btn-yellow{
background: rgb(245,146,62);
color: white;
}
.btn-grey{
background: rgb(224,224,224);
}
.btn,.btn-equal,.btn-clear{
font-size: 4rem;
}
.btn-equal{
background: green;
}
.btn-clear{
background: red;
}
위 코드는 아래 링크에 있는 자바스크립트 프로젝트를 활용 및 참고하여 작업하였습니다.
100+ JavaScript Projects for Beginners! [ Solutions Provided! ]
Looking for JavaScript projects to get more JavaScript practice? Here's a list of over 100 javascript projects for beginners!
jsbeginners.com
728x90
'코딩도 합니다 > JS' 카테고리의 다른 글
| [자바스크립트 에러 Js Error] Cannot read property 'slice' of null (0) | 2021.07.14 |
|---|---|
| [자바스크립트 js / 프로젝트 7] to do list 만들기 (0) | 2021.07.13 |
| [자바스크립트js / 프로젝트5] 이미지 스크롤 / hover 시 dom 이동 / 필터 기능 / dataset / toLowerCase() / trim() (0) | 2021.07.13 |
| [자바스크립트 js / 프로젝트4] 리뷰 별 아이콘 / 리뷰 슬라이드 / forEach 실습 / 슬라이드 이미지 교체 / 슬라이드 텍스트 교체 (0) | 2021.07.13 |
| [자바스크립트 js / 실무 기록] 서브페이지 안의 서브페이지 메뉴 활성화 (0) | 2021.07.11 |
