*/-----How to make simple calculator with javascript-----/*
*/-------source code below available----/*
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>calculator</title>
<style>
*{
box-sizing: border-box;
}
body{
min-height: 100vh;
background: #efeff2;
display: flex;
justify-content: center;
align-items: center;
}
.main{
width: 300px;
height: 500px;
box-shadow: 4px 4px 30px rgba(0, 0,0,0.3);
border-radius: 12px;
background: #22252D;
overflow: hidden;
}
form input{
width: 100%;
height: 150px;
border: none;
border-radius: 12px;
font-size: 2rem;
padding: 1rem;
color: #fff;
background-color: #000;
text-align: right;
pointer-events: none;
}
.buttons{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
button{
flex: 0 0 22%;
margin: 5px 0;
border: 1px solid #000;
width: 60px;
height: 52px;
font-size: 22px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
}
.btn-yellow{
background: rgb(245,146,62);
color: #fff;
}
.btn-grey{
background: rgb(224,224,224);
}
.btn-equal{
background: green;
}
.btn-clear{
background: red ;
}
</style>
</head>
<body>
<div class="main">
<form class="calculatorform" name="calculatorform">
<div class="screen ">
<input name="screen" readonly="" type="text" />
</div>
</form>
<div class="buttons">
<button class="btn btn-yellow " name="multiply" onclick="valuebutton(this);" type="button" value="*">*</button>
<button class="btn btn-yellow " name="div" onclick="valuebutton(this);" type="button" value="/">/</button>
<button class="btn btn-yellow " name="sub" onclick="valuebutton(this);" type="button" value="-">-</button>
<button class="btn btn-yellow " name="plus" onclick="valuebutton(this);" type="button" value="+">+</button>
<button class="btn btn-grey" name="num9" onclick="valuebutton(this);" type="button" value="9">9</button>
<button class="btn btn-grey" name="num8" onclick="valuebutton(this);" type="button" value="8">8</button>
<button class="btn btn-grey" name="num7" onclick="valuebutton(this);" type="button" value="7">7</button>
<button class="btn btn-grey" name="num6" onclick="valuebutton(this);" type="button" value="6">6</button>
<button class="btn btn-grey" name="num5" onclick="valuebutton(this);" type="button" value="5">5</button>
<button class="btn btn-grey" name="num4" onclick="valuebutton(this);" type="button" value="4">4</button>
<button class="btn btn-grey" name="num3" onclick="valuebutton(this);" type="button" value="3">3</button>
<button class="btn btn-grey" name="num2" onclick="valuebutton(this);" type="button" value="2">2</button>
<button class="btn btn-grey" name="num1" onclick="valuebutton(this);" type="button" value="1">1</button>
<button class="btn btn-grey" name="num0" onclick="valuebutton(this);" type="button" value="0">0</button>
<button class="btn btn-grey" name="dec" onclick="valuebutton(this);" type="button" value=".">. </button>
<button class="btn btn-equal" name="equal" onclick="calculate();" type="button" value="=">=</button>
<button class="btn btn-clear" name="clear" onclick="calculatorform.screen.value=''" type="button" value="clear">C</button>
</div>
</div>
<script>
function valuebutton(e){
calculatorform.screen.value += e.value;
}
function calculate(){
calculatorform.screen.value = eval(calculatorform.screen.value);
}
</script>
</body>
</html>
*/-----output-----/*
Comments
Post a Comment