💻Unit6 / 7
계산기 목업 만들기
flex박스 속성을 이용해서 계산기 목업을 만드는 실습을 해보았다.
실습 코드
<!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>Calculator</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
</head>
<body>
<div class="calculator">
<div class="menu">
<div class="display">
0
</div>
<div class="buttonPad">
<div class="buttonLine">
<button id ="ac" class="operator">AC</button>
<button id ="enter" class="operator">Enter</button>
</div>
<div class="buttonLine">
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">+</button>
</div>
<div class="buttonLine">
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">-</button>
</div>
<div class="buttonLine">
<button class="number">1</button>
<button class="number">2</button>
<button class="number" >3</button>
<button class="operator">*</button>
</div>
<div class="buttonLine">
<button class="number0">0</button>
<button class="operator">.</button>
<button class="operator">/</button>
</div>
</div>
</div>
</div>
</body>
</html>* {
box-sizing: border-box;
border-radius: 5px;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
height: 100vh;
}
.calculator {
width: 350px;
height: 500px;
border: 5px solid black;
background-color: #e5e5e5;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
font-family: 'Alfa Slab One', cursive;
}
.display {
height: 50px;
background-color: #a3b18a;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
font-size: 30px;
color: black;
margin: 0 14px 10px 14px;
padding: 0 12px;
}
.buttonPad {
display: flex;
flex-direction: column;
/* background-color: #023047; */
}
.buttonLine {
margin: 5px 10px;
display: flex;
justify-content: flex-start;
align-items: center;
}
button {
margin: 0px 5px;
display: inline-block;
border: 1px ;
width: 60px;
height: 60px;
font-size: 22px;
color:#14213d;
background-color:#ffffff;
font-family: 'Alfa Slab One', cursive;
border-radius: 50%;
box-shadow: 2px 2px grey;
transition-duration: 0.3s;
}
button:hover {
/* background-color: #2f243a;
color:#fff; */
opacity: 0.5;
}
button:active {
box-shadow: 0px 0px;
}
.number0 {
flex-grow: 1;
border-radius: 5px;
}
.operator {
font-size: 25px;
}
#ac {
width: 130px;
background-color: #d62828;
color:#fff;
border-radius: 5px;
}
#ac:hover{
background-color: #2f243a;
color:#fff;
}
#enter {
width: 130px;
border-radius: 5px;
background-color: #ff8c42;
color:#fff;
}
#enter:hover {
background-color: #2f243a;
color:#fff;
}레퍼런스
<!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>(세션용)계산기</title>
<link rel="stylesheet" href="session.css">
</head>
<body>
<div class="container">
<div class="calculator">
<div class="display">
<span>0</span>
</div>
<div class="button_container">
<div class="button_row">
<button class="button_column">clear</button>
<button class="button_column w50">on/off</button>
<button class="button_column">+</button>
</div>
<div class="button_row">
<button class="button_column">7</button>
<button class="button_column">8</button>
<button class="button_column">9</button>
<button class="button_column">-</button>
</div>
<div class="button_row">
<button class="button_column">4</button>
<button class="button_column">5</button>
<button class="button_column">6</button>
<button class="button_column">*</button>
</div>
<div class="button_row">
<button class="button_column">1</button>
<button class="button_column">2</button>
<button class="button_column">3</button>
<button class="button_column">/</button>
</div>
<div class="button_row">
<button class="button_column w50">0</button>
<button class="button_column">.</button>
<button class="button_column">=</button>
</div>
</div>
</div>
</div>
</body>
</html>* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
border: 3px solid black;
width: 350px;
height: 500px;
padding: 5px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.display {
display: flex;
height: 25%;
border: 1px solid black;
justify-content: right;
align-items: center;
}
.display span {
margin-right: 10px;
}
.button_container {
display: flex;
flex-direction: column;
height: 55%;
border: 1px solid black;
}
.button_row {
border: 1px solid black;
flex: 1 0 20%;
display: flex;
flex-direction: row;
}
.button_column {
flex: 1 0 25%;
}
.w50 {
flex: 1 0 50%;
}실습한 코드와 레퍼런스 코드와 비교해보니 레퍼런스의 flex속성을 통해 깔끔하게 코딩을 할수 있다는 것을 알았다. 확실히 이해할 수 있게 남는시간에 다시한번 flex 속성을 이용해서 만들어 봐야 할거같다.
계산기 기능 구현
if (target.matches('button')) {
if (action === 'number') {
if ( display.textContent === '0' || previousKey === 'operator') {
console.log('숫자 ' + buttonContent + ' 버튼');
display.textContent = buttonContent;
}else {
display.textContent += buttonContent;
}
previousKey = 'number';
}
if (action === 'operator') {
firstNum = display.textContent;
console.log('연산자 ' + buttonContent + ' 버튼');
operatorForAdvanced = buttonContent;
previousKey = 'operator';
}
if (action === 'decimal') {}
if (action === 'clear') {
display.textContent = '0';
firstNum = undefined;
operatorForAdvanced = undefined;
previousKey = undefined;
previousNum = undefined;
}
if (action === 'calculate') {
previousNum = display.textContent;
previousKey = 'calculate';
return display.textContent = calculate(firstNum, operatorForAdvanced, previousNum);
}
}
});구글선생님과 함께 고민하면서 advanced과제까지는 구현에는 성공했다. nightmare단계까지는 너무 어려웠다.. previousKey를 선언하여 전에 입력했던키를 할당하는 것, 연산자를 입력하고 새로 숫자를 입력했을때 화면에 새롭게 숫자가 출력되는 부분이 어려웠다.
nightmare단계는 주말이나 시간남을때 한번 도전해봐야겠다.
FE 개발자(진)가 되고 싶습니다