HTML과 CSS 그리고 JavaScript를 사용하여 간단한 계산기를 만들어보자. 계산기에 구현할 기능은 아래와 같다.
숫자 입력 / 더하기 / 빼기 / 곱하기 / 나누기 / 소수점 계산 / 전부 지우기 / 한 글자씩 지우기 / 계산하기
완성한 계산기는 글 맨 아래에서 확인할 수 있다.
1. HTML 작성하기
.html 파일의 <body> 태그 안에 아래의 코드를 작성해주었다.
"container" 안에 "calculator" 가 있고,
"calculator" 는 "display" 와 "buttons" 를 갖고 있는 구조이다.
버튼에서 숫자는 number, 연산자는 operator, 계산하기는 enter 등으로 구분하여 class로 그룹화했다.
그리고 각각의 버튼에 "onclick"을 사용하여 클릭 이벤트 발생 시 수행할 함수들을 지정했다.
함수들은 자바스크립트 파일에서 작성한다.
<body>
<h3>Calculator for you!</h3>
<div class="container">
<div class="calculator">
<input id="display" type="text" readonly />
<div class="buttons">
<button class="clear" onclick="reset()">Clear</button>
<button class="delete" onclick="back()">Back</button>
<button class="enter" onclick="calculate()">Enter</button>
<button class="number" onclick="addOutput(7)">7</button>
<button class="number" onclick="addOutput(8)">8</button>
<button class="number" onclick="addOutput(9)">9</button>
<button class="operator" onclick="addOutput('+')">+</button>
<button class="number" onclick="addOutput(4)">4</button>
<button class="number" onclick="addOutput(5)">5</button>
<button class="number" onclick="addOutput(6)">6</button>
<button class="operator" onclick="addOutput('-')">-</button>
<button class="number" onclick="addOutput(1)">1</button>
<button class="number" onclick="addOutput(2)">2</button>
<button class="number" onclick="addOutput(3)">3</button>
<button class="operator" onclick="addOutput('*')">*</button>
<button class="number" onclick="addOutput(0)">0</button>
<button class="decimal" onclick="addOutput('.')">.</button>
<button class="operator" onclick="addOutput('/')">/</button>
</div>
</div>
</div>
</body>2. CSS 작성하기
계산기의 버튼은 .html 파일에서 <table> 태그를 사용하는 대신 .css 파일에서 display : grid 를 이용하여 정렬하였다. 그리고 버튼에 마우스를 올렸을 때, 포인터 모양이 바뀌고 버튼의 투명도를 흐리게 하여 선택하고자 하는 버튼이 잘 보이도록 해주었다. 자세한 코드는 아래와 같다.
input {
width: 334px;
height: 80px;
padding-right: 16px;
border: none;
border-radius: 6px;
background-color: white;
font-family: "Poppins", sans-serif;
text-align: right;
color: #92b4ec;
font-size: x-large;
font-weight: bold;
}
.container {
height: 100%;
justify-content: center;
align-items: center;
}
.calculator {
background-color: #ffe69a;
width: 352px;
height: 480px;
border-radius: 16px;
padding: 45px 25px 30px 25px;
margin: 15px 25px;
border: solid 6px white;
}
.buttons {
background-color: aliceblue;
width: 304px;
height: 330px;
margin-top: 20px;
padding: 24px;
border: none;
border-radius: 12px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 10px;
}
.buttons > button {
border-radius: 12px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #92b4ec;
color: white;
cursor: pointer;
outline: none;
border: none;
font-family: "Poppins", sans-serif;
font-size: medium;
}
.enter {
grid-column: 3 / span 2;
}
.decimal {
grid-column: 2 / span 2;
}
button:hover {
opacity: 0.5;
}3. JavaScript 작성하기
클릭 이벤트 발생 시 수행할 함수들을 .js 파일에 정리했다.
계산하기 동작은 문자로 표현된 자바스크립트 코드를 실행하는 함수인 eval()을 사용했다.
코드는 아래와 같다.
const display = document.getElementById("display");
function addOutput(num) {
display.value = display.value + num;
}
function calculate() {
let result = eval(display.value);
display.value = result;
}
function reset() {
display.value = "";
}
function back() {
display.value = display.value.substring(0, display.value.length - 1);
}
디자인은 개인의 취향에 맞게 자유롭게 변경하면 된다. 이렇게 계산기를 만들어 보았다! 뿌듯해 😊
'Others' 카테고리의 다른 글
| HTML <form> 으로 주문서 양식을 만들어보자! (0) | 2022.08.05 |
|---|
댓글