Sign in
Log inSign up

Creating Calculator in JS

Aditya Singh Rawat's photo
Aditya Singh Rawat
·Mar 21, 2019

I have created a calculator with HTML/CSS , but now main thing is to make it functional , i wanted to start from the basic and that's why stuck and not able to understand how should i do. Basically what i want is when i click on a button , it should display on screen. but i have tried but failed multiple times. var button = document.querySelector('.numbers'); button.addEventListener('click',function(){ console.log('Button clicked'); })

I need to know what i'm doing wrong in JS , also if anyone can provide me their mail id cause i need to ask a lot of questions . thank you

Below is the code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" href="calculator.css"> -->
    <style>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 175%;
    font-weight: 300;
    line-height: 1.3;
}

body{
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
}

.container{
    max-width: 20rem;    
}

.calculator{
    max-width: 15rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.calculator_keys{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 2px;

}

.calculator_keys button{
    padding: 8px 20px;
    font-size: 1.5rem;
}

.calculator_keys .zero{
    grid-column: 1/3;
}

.calculator_display{
    background: #222222;
    color: white;
    margin-bottom: 2px;
    text-align: right;
    padding: 1.3rem 0.5rem;
    font-size: 1.5rem;
    border-radius: 5px;
}

.numbers{
    background: #212223;
    color: white;
    opacity: 0.9;
}
  </style>
    <script src="calculator.js"></script>
    <title>Calculator</title>
</head>
<body>

    <div class="container">
        <div class="calculator">
            <div class="calculator_display">0</div>
            <div class="calculator_keys">
                <button data-action="clear">AC</button>
                <button></button>
                <button></button>
                <button class="operators" data-action="divide">&divide;</button>

                <button class="numbers">7</button>
                <button class="numbers">8</button>
                <button class="numbers">9</button>
                <button class="operators" data-action="multiply">&times;</button>

               <button class="numbers">4</button>
               <button class="numbers">5</button>
               <button class="numbers">6</button>
                <button class="operators" data-action="minus">&minus;</button>

                <button class="numbers">1</button>
                <button class="numbers">2</button>
                <button class="numbers">3</button>
                <button class="operators" data-action="plus">&plus;</button>

                <button class="numbers zero">0</button>
                <button data-action="decimal" class="numbers">.</button>
                <button data-action="equals">&equals;</button>

            </div>
        </div>
    </div>
</body>
</html>
7