바닐라 JavaScript를 사용하여 간단한 계산기 만들기(단계별)

32155 단어 cssjavascriptcalculatorhtml
HTML, CSS, JS로만 만든 간단한 계산기입니다. 새로운 기술을 배우는 것보다 더 중요한 JavaScript의 기초를 강화할 것입니다.

전제 지식



HTML, CSS, JavaScript의 기초와 새로운 것을 만들고자 하는 열망.

당신이 배울 것


  • CSS 플렉스박스
  • 그리드 레이아웃
  • JS 배열 메서드
  • 논리적 사고
  • DOM 조작



    • 시작하자



    해야 할 일 목록에서와 같이 계산기 스케치를 만든 다음 프로토타입으로 변환합니다.

    1. 브레인스토밍




    아이디어를 종이에 인쇄해야 하는 모든 프로젝트에서 가장 중요한 단계입니다. 코딩을 시작하기 전에 프로젝트의 모양과 기능에 대해 명확하게 생각해야 합니다.

    2. 프로토타입 만들기




    선호하는 UX/UI 디자인 소프트웨어를 사용할 수 있습니다. 내 것은 Adobe Xd입니다.

    3. 프로젝트 디렉토리 생성




  • 먼저 Simple Calculator라는 폴더를 만듭니다.
  • 모든 프로젝트 자산을 저장할 수 있는 Designs라는 또 다른 폴더를 만듭니다.
  • 이제 index.html이라는 HTML 파일을 만듭니다
    • .
  • style.css라는 CSS 파일을 만듭니다.
  • script.js라는 JavaScript 파일 생성

    • 4. HTML 구조 만들기



    선호하는 텍스트 편집기에서 index.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>Calcualtor :: By Karan Kumar</title>
    </head>

    <body>
        <div class="container">
            <section id="Display-area">
                <div class="currentInput"></div>
                <div class="answerScreen">0</div>
            </section>
            <section class="keypad-btns">
                <button type="button" class="fun_btn" id="clear" value="">
                    C
                </button>
                <button type="button" class="fun_btn" id="erase" value="">
                    &#11013;
                </button>
                <button type="button" class="fun_btn" value="/">/</button>
                <button type="button" class="fun_btn" value="%">%</button>
                <button type="button" class="num_btn" value="7">7</button>
                <button type="button" class="num_btn" value="8">8</button>
                <button type="button" class="num_btn" value="9">9</button>
                <button type="button" class="fun_btn" value="*">x</button>
                <button type="button" class="num_btn" value="4">4</button>
                <button type="button" class="num_btn" value="5">5</button>
                <button type="button" class="num_btn" value="6">6</button>
                <button type="button" class="fun_btn" value="-">-</button>
                <button type="button" class="num_btn" value="1">1</button>
                <button type="button" class="num_btn" value="2">2</button>
                <button type="button" class="num_btn" value="3">3</button>
                <button type="button" class="fun_btn" value="+">+</button>
                <button type="button" class="num_btn" value="00">00</button>
                <button type="button" class="num_btn" value="0">0</button>
                <button type="button" class="num_btn" value=".">.</button>
                <button type="button" class="fun_btn" id="evaluate" value="">=</button>
            </section>
        </div>
    </body>
</html>


    출력 -



    5. CSS 스타일링 추가



    CSS 스타일을 추가하려면 먼저 style.css를 index.html 파일과 연결해야 합니다.

    
<head>
<link rel="stylesheet" href="style.css" />
</head>

    index.html 파일의 <head> 태그 안에 있는 링크 태그를 사용하면 쉽게 할 수 있습니다.
    이제 style.css 파일을 열고 이 코드를 작성하여 스타일을 추가합니다.

    * {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f5f5f5;
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background-color: #131313;
    max-width: 300px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px 35px;
    border-radius: 10px;
    user-select: none;
}

#Display-area {
    width: 100%;
    margin: 3vh 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(2, minmax(40px, auto));
    word-wrap: break-word;
    padding-bottom: 20px;
    border-bottom: 1px rgba(128, 128, 128, 0.116) solid;
}

#Display-area .currentInput {
    /* display: flex; */
    text-align: right;
    height: 8vh;
    color: white;
    font-size: xx-large;
    line-height: 2;
    word-wrap: break-word;
}

#Display-area .answerScreen {
    text-align: right;
    color: rgba(150, 150, 150, 0.87);
    height: 7px;
    line-height: 3;
    font-size: larger;
}

.keypad-btns {
    display: grid;
    grid: repeat(5, 70px) / repeat(4, 70px);
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}

.keypad-btns button {
    outline: none;
    border: none;
    border-radius: 10px;
    background-color: #131313;
    color: white;
    font-size: x-large;
}

.keypad-btns .fun_btn {
    color: #ff8800;
}

.num_btn:hover,.fun_btn:hover {
    background-color: rgba(29, 29, 29, 0.979);
}


    출력 -



    6. 반응형으로 만들기



    계산기를 반응형으로 만들려면 미디어 쿼리를 사용해야 합니다.

    
@media only screen and (max-width: 600px) {
    body {
        background-color: #131313;
        align-items: flex-start;
    }
}

    이 코드는 본문의 최대 너비가 600px일 때 배경색을 변경하고 항목을 정렬한다는 것을 의미합니다.

    7. 자바스크립트 기능



    JS 코드를 시작하기 전에 먼저 사용자가 버튼을 누를 때마다 발생하는 것과 같이 계산기 작동을 계획해야 합니다.


    버튼이 눌리면 우리 함수는 어떤 종류의 버튼이 클릭되었는지 확인할 것입니다. 숫자나 연산자 버튼이면 배열에 값을 삽입해야 합니다. 그러나 기능(지우기, 지우기 또는 평가) 버튼인 경우 버튼 유형에 따라 작업을 수행해야 합니다.


    먼저 script.js 파일을 index.html 파일과 연결해야 합니다.


    <head>
        <script src="script.js" defer></script>
</head>

    Here defer means, we are telling the browser to first parse all the files and then start executing scripts.



    이제 스크립트 .js 파일을 열고 스크립트 파일에 이 코드 작성을 추가합니다.

    // Variables
let currentInput = document.querySelector('.currentInput');
let answerScreen = document.querySelector('.answerScreen');
let buttons = document.querySelectorAll('button');
let erasebtn = document.querySelector('#erase');
let clearbtn = document.querySelector('#clear');
let evaluate = document.querySelector('#evaluate');



// Calculator Display
let realTimeScreenValue = []

// To Clear

clearbtn.addEventListener("click", () => {

    realTimeScreenValue = [''];
    answerScreen.innerHTML = 0;
    currentInput.className = 'currentInput'
    answerScreen.className = 'answerScreen';
    answerScreen.style.color = " rgba(150, 150, 150, 0.87)";
})

// Get value of any button clicked and display to the screen

buttons.forEach((btn) => {


    btn.addEventListener("click", () => {
        // when clicked button is not erased button 
        if (!btn.id.match('erase')) {
            // To display value on btn press
            realTimeScreenValue.push(btn.value)
            currentInput.innerHTML = realTimeScreenValue.join('');

            // To evaluate answer in real time
            if (btn.classList.contains('num_btn')) {

                answerScreen.innerHTML = eval(realTimeScreenValue.join(''));

            }

        }

        // When erase button is clicked
        if (btn.id.match('erase')) {
            realTimeScreenValue.pop();
            currentInput.innerHTML = realTimeScreenValue.join('');
            answerScreen.innerHTML = eval(realTimeScreenValue.join(''));
        }

        // When clicked button is evaluate button
        if (btn.id.match('evaluate')) {
            currentInput.className = 'answerScreen';
            answerScreen.className = 'currentInput';
            answerScreen.style.color = "white";
        }

        // To prevent undefined error in screen
        if (typeof eval(realTimeScreenValue.join('')) == 'undefined') {
            answerScreen.innerHTML = 0
        }

    })
})

    이제 작업이 완료되었습니다. JavaScript 기능을 추가할 때 계산기의 모양은 다음과 같습니다.

    데모 보기






    소스 코드 : 카란쿠마르코 / 간단한 계산기 HTML, CSS 및 JS를 사용하는 계산기

    크롬 확장 vimium을 맞춤설정해 봅시다.
    그래프 표현: 인접 목록 대 인접 매트릭스

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage