Calculator:
The first solid-state electronic calculator was created in the early 1960s. Pocket-sized devices became available in the 1970s, especially after the Intel 4004, the first microprocessor, was developed by Intel for the Japanese calculator company Busicom. They later became used commonly within the petroleum industry(oil and gas)
In this post, we will create a simple calculator for use on the web with the help of HTML, CSS, and javascript
HTML:
<!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">
<title>calculator</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<section class="calculator">
<form>
<input type="text" name="" id="" class="screen">
</form>
<div class="buttons">
<!-- yellow -->
<button type="button" class="btn btn-A" data-num=""></button>
<button type="button" class="btn btn-A" data-num="/">/</button>
<button type="button" class="btn btn-A" data-num="-">-</button>
<button type="button" class="btn btn-A" data-num="+">+</button>
<!-- grey buttons -->
<button type="button" class="btn btn-B" data-num=".">.</button>
<button type="button" class="btn btn-B" data-num="9">9</button>
<button type="button" class="btn btn-B" data-num="8">8</button>
<button type="button" class="btn btn-B" data-num="7">7</button>
<button type="button" class="btn btn-B" data-num="6">6</button>
<button type="button" class="btn btn-B" data-num="5">5</button>
<button type="button" class="btn btn-B" data-num="4">4</button>
<button type="button" class="btn btn-B" data-num="3">3</button>
<button type="button" class="btn btn-B" data-num="2">2</button>
<button type="button" class="btn btn-B" data-num="1">1</button>
<button type="button" class="btn btn-B" data-num="0">0</button>
<button type="button" class="btn-C btn-B">=</button>
<button type="button" class="btn-D btn-B">C</button>
</div>
</section>
<script src="./js/cal.js"></script>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
.calculator{
flex: 0 0 95%;
}
.screen{
width: 100%;
font-size: 7rem;
padding: 0.5rem;
background: white;
color: black;
border:none;
}
.buttons{
display: flex;
flex-wrap: wrap;
}
button{
flex:0 0 25%;
border: 1px solid black;
padding: 0.25rem 0;
}
button:hover{
background: white;
}
.btn-A{
background: green;
color: black;
}
.btn-B{
background: red;
}
.btn,.btn-C,.btn-D{
font-size: 4rem;
}
.btn-C{
background: yellow;
}
.btn-D{
background: red;
}
JavaScript:
(function(){
let screen = document.querySelector('.screen');
let buttons = document.querySelectorAll('.btn');
let clear = document.querySelector('.btn-D');
let equal = document.querySelector('.btn-C');
// numbers that are clicked
buttons.forEach(function(button){
button.addEventListener('click', function(e){
let value = e.target.dataset.num;
screen.value += value;
})
});
equal.addEventListener('click', function(e){
if(screen.value === ''){
screen.value = 'Please Enter a Value';
} else {
let answer = eval(screen.value);
screen.value = answer;
}
})
clear.addEventListener('click', function(e){
screen.value = '';
})
})();
Comments
Post a Comment