TIL Day 5 - 6
28322 ワード
計算機の作成
Achievement Goals
htmlとcssとjavascriptの接続手順は理解できます。
計算機を実装する各プロセスで論理を確立し、コードに記述できます。
けいさんきけいじょう
CSS CODE
* {
margin: 0;
padding: 0;
border: 0px;
box-sizing: border-box;
font-family: 'Righteous', cursive;
color: #000;
}
body {
background-image: url('./data/codestates-motif.png');
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
background-color: #4000c7;
width: 350px;
height: 500px;
border-radius: 10px;
padding: 30px 20px;
}
.calculator__display--bare {
display: none;
background-color: #ffffff;
text-align: center;
vertical-align: middle;
height: 100px;
width: 100%;
border-radius: 10px;
font-size: 20px;
padding: 25px 15px;
overflow: hidden;
overflow-wrap: break-word;
}
.calculator__display--bare > span {
display: inline-block;
text-align: center;
background-color: #f3f0fc;
margin: 5px;
width: 40px;
height: 45px;
border-radius: 10px;
font-size: 20px;
padding: 10px 5px;
}
.calculator__display--for-advanced {
/* display: none; 이 줄을 모두 지우면 advanced 테스트를 하실 수 있습니다. */
background-color: #ffffff;
height: 100px;
width: 100%;
border-radius: 10px;
font-size: 20px;
text-align: right;
vertical-align: right;
padding: 25px 15px;
overflow: hidden;
overflow-wrap: break-word;
}
.calculator__buttons {
background-color: #ffffff;
width: 100%;
height: 330px;
margin-top: 10px;
padding: 10px;
border-radius: 10px;
}
.clear__and__enter {
height: 50px;
margin: 10px;
background-color: #f3f0fc;
}
.clear__and__enter > button {
border-radius: 10px;
width: 50px;
height: 40px;
margin: 0px 5px;
background-color: #00da75;
cursor: pointer;
outline: none;
}
.button__row {
height: 50px;
margin: 10px;
background-color: #f3f0fc;
}
.button__row > button {
width: 50px;
height: 40px;
border-radius: 10px;
cursor: pointer;
outline: none;
background-color: #ebebeb;
}
.button__row > .operator {
color: #ffffff;
background-color: #313132;
}
.button__row > .double {
width: 115px;
}
.button__row > .isPressed {
background-color: #00da75;
}
.logo {
position: fixed;
padding: 30px;
bottom: 0px;
right: 0px;
}
Javascript Code
document.querySelectorを使用してhtmlの段落を取得する
const calculator = document.querySelector('.calculator'); // calculator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const buttons = calculator.querySelector('.calculator__buttons'); // calculator__keys 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const firstOperend = document.querySelector('.calculator__operend--left'); // calculator__operend--left 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const operator = document.querySelector('.calculator__operator'); // calculator__operator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const secondOperend = document.querySelector('.calculator__operend--right'); // calculator__operend--right 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const calculatedResult = document.querySelector('.calculator__result'); // calculator__result 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
計算関数の作成
function calculate(n1, operator, n2) {
let result = 0;
if(operator === '+') {
result = Number(n1) + Number(n2)
}
if(operator === '-'){
result = Number(n1) - Number(n2)
}
if(operator === '*'){
result = Number(n1) * Number(n2)
}
if(operator === '/'){
result = Number(n1) + Number(n2)
}
return String(result);
}
コンテキスト関連機能を実装するための変数の設定
let firstNum, operatorForAdvanced, previousKey, previousNum;
計算ボタンを起動する関数の作成
buttons.addEventListener('click', function (event) {
// 버튼을 눌렀을 때 작동하는 함수입니다.
const target = event.target;
const action = target.classList[0];
const buttonContent = target.textContent;
if (target.matches('button')) {
if (action === 'number') {
if(firstOperend.textContent !== '0'){
secondOperend.textContent = buttonContent;
}else{
firstOperend.textContent = buttonContent;
}
console.log('숫자 ' + buttonContent + ' 버튼');
}
if (action === 'operator') {
operator.textContent = buttonContent;
console.log('연산자 ' + buttonContent + ' 버튼');
}
if (action === 'decimal') {
}
if (action === 'clear') {
firstOperend.textContent = 0;
secondOperend.textContent = 0;
operator.textContent = '+';
calculatedResult.textContent = 0;
console.log('초기화 버튼');
}
if (action === 'calculate') {
calculatedResult.textContent = calculate(firstOperend.textContent,operator.textContent,secondOperend.textContent);
console.log('계산 버튼');
}
}
});
comment
Reference
この問題について(TIL Day 5 - 6), 我々は、より多くの情報をここで見つけました https://velog.io/@boo1996/TIL-Day-5-6テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol