Creating Calculator in JS
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">÷</button>
<button class="numbers">7</button>
<button class="numbers">8</button>
<button class="numbers">9</button>
<button class="operators" data-action="multiply">×</button>
<button class="numbers">4</button>
<button class="numbers">5</button>
<button class="numbers">6</button>
<button class="operators" data-action="minus">−</button>
<button class="numbers">1</button>
<button class="numbers">2</button>
<button class="numbers">3</button>
<button class="operators" data-action="plus">+</button>
<button class="numbers zero">0</button>
<button data-action="decimal" class="numbers">.</button>
<button data-action="equals">=</button>
</div>
</div>
</div>
</body>
</html>