🎨 Calculator

kirin.log·2021년 3월 15일

🪐 logic

html 내 input을 통해 버튼을 생성해준다
숫자+연산자를 누르면 input에 value들어가는 함수 생성
숫자+연산자를 입력 후 =버튼을 누르면 연산되는 기능(eval)
AC버튼을 누르면 리셋기능 함수 생성
del버튼을 누르면 오른쪽부터 삭제 기능 함수 생성

🚀 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" />
        <link href="index.css" rel="stylesheet" />
        <script defer src="index.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div class="container">
            <div class="calFrame">
                <div class="inputFrame">
                    <input class="input previous" type="text" readonly />
                    <input class="input current" type="text" readonly />
                </div>

                <div class="btnFrame">
                    <input type="button" value="AC" class="spanTwo clear" />
                    <input type="button" value="DEL" class="del" />
                    <input type="button" value="+" class="operator" />
                    <input type="button" value="7" class="number" />
                    <input type="button" value="8" class="number" />
                    <input type="button" value="9" class="number" />
                    <input type="button" value="-" class="operator" />
                    <input type="button" value="4" class="number" />
                    <input type="button" value="5" class="number" />
                    <input type="button" value="6" class="number" />
                    <input type="button" value="*" class="operator" />
                    <input type="button" value="1" class="number" />
                    <input type="button" value="2" class="number" />
                    <input type="button" value="3" class="number" />
                    <input type="button" value="/" class="operator" />
                    <input type="button" value="0" class="number" />
                    <input type="button" value="." class="number" />
                    <input type="button" value="=" class="spanTwo result" />
                </div>
            </div>
        </div>
    </body>
</html>

🚀 css
>
* {
    background: linear-gradient(to right, rgb(252, 6, 121), rgb(240, 117, 154));
    box-sizing: border-box;
    outline: none;
}
>
.calFrame {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: 100px auto;
    padding: 10px;
    max-width: 400px;
    width: 30vw;
    height: 55vh;
    background: thistle;
    border: 1px solid black;
    border-radius: 5px;
}
>
.btnFrame {
    display: grid;
    grid-template-columns: repeat(4, 75px);
    grid-template-rows: repeat(5, 75px);
    background: thistle;
}
>
.btnFrame input {
    margin: 3px;
    color: whitesmoke;
    font-weight: 900;
    font-size: x-large;
    cursor: pointer;
}
>
.inputFrame {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 65px;
    border: 1px solid black;
}
>
.previous,
.current {
    padding: 0 30px;
    height: 50px;
    border: none;
    color: rgb(39, 30, 30);
    background: rgb(250, 202, 226);
    text-align: right;
}
>
.previous {
    font-size: 20px;
}
>
.current {
    font-size: 30px;
}
>
.spanTwo {
    grid-column: span 2;
}

🚀 js

'use strict';

const operator = document.querySelectorAll(".operator"); // 연산자
const numBtn = document.querySelectorAll(".number"); // 숫자(0~9)
const input = document.querySelector(".input"); // 입력란

const previous = document.querySelector(".previous");
const current = document.querySelector(".current");


// 숫자 및 연산자는 "배열"로 받아진다(querySelectorAll)

// 버튼 클릭 시, 입력창에 입력 기능
const btnClick = () => {
    for (let i = 0; i < numBtn.length; i++) {
        numBtn[i].addEventListener("click", function (e) {
            //console.log(e.target);
            current.value = (current.value += e.target.value).toLocaleString();
        });
    }

    for (let i = 0; i < operator.length; i++) {
        operator[i].addEventListener("click", function (e) {
            //console.log(e.target);
            current.value += e.target.value;
        });
    }
};
btnClick();

// 연산 기능
const resultBtn = document.querySelector(".result");

resultBtn.addEventListener("click", (e) => {
    previous.value = current.value;
    current.value = eval(current.value).toLocaleString();
});

// 초기화(AC) 기능
const reset = document.querySelector(".clear");

reset.addEventListener("click", (e) => {
    previous.value = "";
    current.value = "";
});

// delete 기능
const del = document.querySelector(".del");

del.addEventListener("click", (e) => {
    current.value = current.value.slice(handleNumber.length, -1);
});

kirin.log

boma91@gmail.com

이전 포스트

🎨 Scroll-blog

다음 포스트

🎨 Calculator

🪐 logic

🎨 Scroll-blog

🎨 mini-shopping mall

0개의 댓글