코드스테이츠에서 만난 조원분들과 스터디를 구상해보았다.
🌱 스터디의 목적
다양한 프로젝트 경험하기!!
계산기, todo, 미니게임등을 만들어보면서 실제 웹에서 사용하는 언어들을 사용해보고 유용한 기능을 구현해보는 것!!
꾸준히 성실하게 해보자~
대망의 1주차 미션은 Calculator구현하기
내가 만든 계산기
👉 https://dakyungoh.github.io/project-calculator/
코드스테이츠에서 한번 만들어 본 터라 금방 만들거라고 생각했지만, 은근 복잡하고 고려해야 할 점이 많았다...
스터디 노션에서 조원들과 상의를 통해 참고사항과 도전과제를 만들어보고, 이점을 참고하여 만들어보기로 했다.
나의 코드
- html로 구현하기
<!DOCTYPE html>
<html lang="en">
<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>Calculator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<div class="calculator">
<div class="row">
<div class="cell cell-result"></div>
</div>
<div class="row">
<div class="cell cell-reset">AC</div>
<div class="cell cell-equal">Enter</div>
</div>
<div class="row">
<div class="cell cell-number">7</div>
<div class="cell cell-number">8</div>
<div class="cell cell-number">9</div>
<div class="cell cell-operator">÷</div>
</div>
<div class="row">
<div class="cell cell-number">4</div>
<div class="cell cell-number">5</div>
<div class="cell cell-number">6</div>
<div class="cell cell-operator">x</div>
</div>
<div class="row">
<div class="cell cell-number">1</div>
<div class="cell cell-number">2</div>
<div class="cell cell-number">3</div>
<div class="cell cell-operator">-</div>
</div>
<div class="row">
<div class="cell cell-number cell-number-zero">0</div>
<div class="cell cell-dot">.</div>
<div class="cell cell-operator">+</div>
</div>
</div>
</main>
<script src="index.js"></script>
</body>
</html>
- div로 구역을 나눈 후 css적용에 용이하게 접근하기 위해 cell을 두번 작성하였다.
- css로 구현하기
* {
box-sizing: border-box;
font-family: monospace, cursive;
/* border: 1px solid gray; */
}
body {
background-color: beige;
width: 100%;
margin: 40px auto;
padding: 100px;
text-align: center;
}
.calculator {
border: 3px solid #61876e;
border-radius: 20px;
background-color: #a6bb8d;
width: 400px;
height: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 10px;
padding: 30px;
-webkit-box-shadow: 6px 4px 24px -10px rgba(0, 0, 0, 1);
-moz-box-shadow: 6px 4px 24px -10px rgba(0, 0, 0, 1);
box-shadow: 6px 4px 24px -10px rgba(0, 0, 0, 1);
}
.row {
flex: 1;
display: flex;
justify-content: center;
gap: 5px;
}
.cell {
flex: 1;
display: flex;
text-align: center;
flex-direction: row;
justify-content: center;
align-items: center;
border: 2px solid #61876e;
border-radius: 30px;
font-size: 2rem;
-webkit-box-shadow: 3px 2px 9px -3px rgba(0, 0, 0, 1);
-moz-box-shadow: 3px 2px 9px -3px rgba(0, 0, 0, 1);
box-shadow: 3px 2px 9px -3px rgba(0, 0, 0, 1);
}
.cell:hover {
background-color: #8c9e59;
color: white;
cursor: pointer;
}
.cell-result {
background-color: #faf8f1;
height: 110px;
}
.cell-equal {
background-color: #eae7b1;
}
.cell-number {
background-color: #faf8f1;
}
.cell-operator,
.cell-reset,
.cell-dot {
background-color: #faeab1;
}
.cell-number-zero {
background-color: #faf8f1;
flex: 2;
}
- javascript로 구현하기
const calculator = document.querySelector(".calculator");
const cellResult = document.querySelector(".cell-result");
const cellReset = document.querySelector(".cell-reset");
const cellEqual = document.querySelector(".cell-equal");
const cellNumbers = document.querySelectorAll(".cell-number");
const cellOperators = document.querySelectorAll(".cell-operator");
const cellDot = document.querySelector(".cell-dot");
function calculate(n1, opererator, n2) {
let result = 0;
let num1 = Number(n1);
let num2 = Number(n2);
if (opererator === "+") {
result = num1 + num2;
} else if (opererator === "-") {
result = num1 - num2;
} else if (opererator === "x") {
result = num1 * num2;
} else if (opererator === "÷") {
result = num1 / num2;
}
return result;
}
let userInputNum1 = "";
let userInputOperator = "";
let userInputNum2 = "";
cellNumbers.forEach(function (cellNumber) {
cellNumber.addEventListener("click", function (event) {
if (userInputOperator.length === 0) {
userInputNum1 += event.target.innerHTML;
} else {
userInputNum2 += event.target.innerHTML;
}
updateResult();
});
});
cellDot.addEventListener("click", function () {
if (userInputOperator.length === 0) {
userInputNum1 = addDot(userInputNum1);
} else {
userInputNum2 = addDot(userInputNum2);
}
updateResult();
});
cellOperators.forEach(function (cellOperator) {
cellOperator.addEventListener("click", function (event) {
if (userInputNum1.length > 0 && userInputNum2.length === 0) {
userInputOperator = event.target.innerHTML;
}
updateResult();
});
});
cellReset.addEventListener("click", function () {
initUserInput();
updateResult();
});
cellEqual.addEventListener("click", function () {
const result = calculate(userInputNum1, userInputOperator, userInputNum2);
cellResult.innerHTML = result;
initUserInput();
});
function updateResult() {
cellResult.innerHTML = userInputNum1 + userInputOperator + userInputNum2;
}
function initUserInput() {
userInputNum1 = "";
userInputOperator = "";
userInputNum2 = "";
}
function addDot(userInputNumber) {
let result = userInputNumber;
if (result.length > 0) {
result += ".";
result = result.replaceAll(".", "");
result += ".";
}
return result;
}
⚡️ 구현하고 싶던 부분!
<CSS>
- box-shadow활용하여 그림자 만들기
- hover 사용하여 색깔 변경과 마우스 커서 변경하기
<JS>
- 소수점 계산 구현하기
- 연산자, 소수점 부분 중복 방지하기
💡 추가로 구현하고 싶은 부분!
<CSS>
- 터치감 느껴지는 트랜지션 적용하기
- night모드 적용하기
<JS>
- 값의 history 만들기
- 값 한개씩 지우기 모드 적용시켜보기
- 여러 개의 값 입력해서 결과 값 도출하기 (현재 연산자를 한개만 사용가능→연산자를 동시에 누를 시 초기값만 남음)
✍️ 새로 알게 된 부분!
- innerText와 innerHTML, textContent의 차이점
- innerText : 'Element'의 속성으로 element 안의 text 값들만을 가져온다. 즉,해당 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타낸다.
- innerHTML : 'Element'의 속성으로 innerText와는 달리 innerHTML은 element 안의 HTML이나 XML마크업을 가져온다.
-> innerHTML의 경우 외부 공격(XSS)에 취약하여 보안상의 문제가 있을 수 있다고 한다. - textContent : 'Node'의 속성으로
<script>나<style>태그와 상관없이 해상 노드가 가지고 있는 텍스트 값을 그대로 읽는다.
개발자 꿈나무🌳