<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<link rel="stylesheet" href="calc.css" type="text/css" media="all" />
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
}
body{
background-image: linear-gradient(145deg,aqua, grey,black,white);
background-size: cover;
background-repeat: no-repeat;
color: white;
width: 100vw;
height: 100vh;
}
.Calculator{
border: 2px solid green;
border-radius: 20px;
width:288px;
height: 576px;
margin: 10px auto;
top: 80px;
background-color: grey;
position: relative;
}
.main {
width: 100%;
height: 100%;
}
.history {
width: 100%;
height: 10%;
background: red;
font-size: 20px;
text-align: left;
padding-top: 10px;
border-radius: 20px;
color: pink;
}
#result{
border-radius: 20px;
width: 100%;
height: 15%;
background: red;
font-size: 20px;
text-align: left;
padding-top: 10px;
color: pink;
}
.keyboard{
height: 380px;
}
.hlo:active{
font-size: 15px;
}
.hlo{
width: 48px;
height: 55px;
margin: 10px;
float: left;
border-radius: 50%;
border-width: 0px;
font-weight: bold;
font-size: 20px;
box-shadow: 0 0 2px 5px red,inset 0 0 2px 5px grey;
}
.operator, .number, .empty{
width: 48px;
height: 55px;
margin: 10px;
float: left;
box-shadow: 0 0 2px 5px red,inset 0 0 2px 5px white;
border-radius: 50%;
border-width: 0px;
font-weight: bold;
font-size: 20px;
}
.number, .empty {
background-color: grey;
}
.number:active, .operator:active{
font-size: 15px;
}
.number:focus ,.operator:focus, .empty:focus{
outline: 0px;
}
button:nth-child(4){
background-color: red;
font-size: 30px;
}
button:nth-child(8){
background-color: yellow;
font-size: 30px;
}
button:nth-child(12){
background-color: orange;
font-size: 30px;
}
button:nth-child(16){
background-color: blue;
font-size: 30px;
}
button:nth-child(20){
background-color: green;
font-size: 30px;
}
@media screen and (min-width:361px) {
body{
background: red;
}
.hlo{
box-shadow: 0 0 2px 5px green,inset 0 0 2px 5px yellow;
}
}
</style>
</head>
<body>
<!-- this is main -->
<div class="main">
<!-- this is calculator body -->
<div class="Calculator">
<!-- this is for button-->
<div class="history" contenteditable="true" id="history">
<p id="inputvalue" value=""></p>
</div>
<!-- this is for results-->
<div id="result">
<p id="result1"></p>
</div>
<!-- for numbers -->
<div class="keyboard">
<!-- buttons -->
<button class="hlo" id="Clear" onclick="clearall()">C</button>
<button class="hlo "id="backspace" >⌫</button>
<button class="operator" id="%">%</button>
<button class="number" id="-">-</button>
<button class="number" id="7" >7</button>
<button class="number" id="8">8</button>
<button class="number" id="9">9</button>
<button class="number" id="+" >+</button>
<button class="number" id="4">4</button>
<button class="number" id="5">5</button>
<button class="number" id="6">6</button>
<button class="number" id="*" >×</button>
<button class="number" id="1">1</button>
<button class="number" id="2">2</button>
<button class="number" id="3">3</button>
<button class="number" id="/" >÷</button>
<button class="number" id="(">(</button>
<button class="number" id="0">0</button>
<button class="number" id=")">)</button>
<button class="number" id="=" >=</button>
</div>
</div>
</div>
</body>
<script type="text/javascript" charset="utf-8">
console.log('this is for calculator');
const input = document.getElementById('inputvalue')
input.addEventListener('click',function(){
input.style.contenteditable= 'true';
});
let one = document.getElementById('1');
one.addEventListener('click',function(){
let html = one.innerText;
input.innerText = input.innerText+one.innerText
})
let two = document.getElementById('2');
two.addEventListener('click',function(){
let html = two.innerText;
input.innerText = input.innerText+two.innerText
})
let three = document.getElementById('3');
three.addEventListener('click',function(){
let html = three.innerText;
input.innerText = input.innerText+html;
})
let four = document.getElementById('4');
four.addEventListener('click',function(){
let html = four.innerText;
input.innerText = input.innerText+html
})
let five = document.getElementById('5');
five.addEventListener('click',function(){
let html = five.innerText;
input.innerText = input.innerText+html
})
let six = document.getElementById('6');
six.addEventListener('click',function(){
let html = six.innerText;
input.innerText = input.innerText+html
})
let seven = document.getElementById('7');
seven.addEventListener('click',function(){
let html = seven.innerText;
input.innerText = input.innerText+html
})
let eight = document.getElementById('8');
eight.addEventListener('click',function(){
let html = eight.innerText;
input.innerText = input.innerText+html
})
let nine = document.getElementById('9');
nine.addEventListener('click',function(){
let html = nine.innerText;
input.innerText = input.innerText+html
})
let zero = document.getElementById('0');
zero.addEventListener('click',function(){
input.innerText = input.innerText+'0'
})
let clear = document.getElementById('Clear');
clear.addEventListener('click',function(){
let result= document.getElementById('result1')
input.innerText = '';
result.innerText= ''
})
let multiply = document.getElementById('*');
multiply.addEventListener('click',function(){
input.innerText = input.innerText+ '*'
})
let divide = document.getElementById('/');
divide.addEventListener('click',function(){
input.innerText = input.innerText+ '/'
})
let plus = document.getElementById('+');
plus.addEventListener('click',function(){
input.innerText = input.innerText+ '+'
})
let subs = document.getElementById('-');
subs.addEventListener('click',function(){
input.innerText = input.innerText+ '-'
})
let equa = document.getElementById('=');
equa.addEventListener('click',function(){
let result= document.getElementById('result1');
result.innerText = eval(input.innerText)
if (result.innerText==undefined) {
alert('hgv')
}
})
let perc = document.getElementById('%');
perc.addEventListener('click',function(){
input.innerText = input.innerText+ '/100'
})
let sma = document.getElementById('(');
sma.addEventListener('click',function(){
input.innerText = input.innerText+ '('
})
let sml = document.getElementById(')');
sml.addEventListener('click',function(){
input.innerText = input.innerText+ ')'
})
let back = document.getElementById('backspace');
back.addEventListener('click',function(){
input.innerText = input.innerText.substring(0,input.innerText.length-1)
})
</script>
<script src="a.js" type="text/javascript" charset="utf-8"></script>
</html>
Comments
Post a Comment