Alat hitung 2
<!DOCTYPE html>
<html>
<head>
<title>Belajar Koding Informatika MAN Kapuas</title>
<styl>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
form{
width: 350px;
padding: 30px 15px 15px 15px;
box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.6);
border-radius: 5px;
background-color: #f9f9f9;
}
input[type="text"]{
font-family: 'Orbitron', sans-serif;
width: 100%;
font-size: 36px;
padding: 5px;
height: 70px;
background-color: rgb(241, 241, 241);
text-overflow: ellipsis;
text-align: right;
}
hr{
margin: 15px 0;
background-color: silver;
}
form .onOffBtn{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
form .onOffBtn input{
outline: none;
border: none;
width: 40px;
height: 40px;
font-size: 15px;
border-radius: 10%;
background-color: red;
box-shadow: 2px 2px 8px rgb(136, 129, 129),
inset -2px -2px 6px black;
cursor: pointer;
color: #fff;
}
form .onOffBtn .onBtn{
background-color: #535cF1;
}
form .onOffBtn .offBtn:active{
font-size: 13px;
}
.onOffBtn .onBtn:active,
.onOffBtn .offBtn:active{
box-shadow: inset 2px 2px 8px rgb(0, 0, 0),
inset -2px -2px 6px rgb(0, 0, 0);
}
form .numOpeBtn{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
form .numOpeBtn input{
height: 50px;
background-color: rgb(0, 0, 0);
color: #fff;
font-size: 24px;
cursor: pointer;
border-radius: 5px;
}
form .numOpeBtn input:hover{
color: rgb(37, 255, 255);
}
form .numOpeBtn .ope{
background-color: rgba(10, 41, 10, 0.925);
}
form .numOpeBtn .clear{
background-color: #690505;
}
form .numOpeBtn .blueBtn{
background-color: #01012e;
}
</style>
</head>
<body>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&display=swap" rel="stylesheet">
<section class="container">
<form action="#" name="calculator">
<input type="text" id="scr" placeholder="0" name="screen" disabled>
<hr>
<div class="onOffBtn">
<input type="button" value="OFF" class="offBtn" onclick="s_off()">
<input type="button" value="ON" class="onBtn" onclick="s_on()">
</div>
<div class="numOpeBtn">
<input type="button" value="C" class="clear button" onclick="calculator.screen.value = '' ">
<input type="button" value="CE" class="clear button" onclick="calculator.screen.value = calculator.screen.value.slice(0, -1)">
<input type="button" value="x!" class="blueBtn ope button" onclick="factorial()">
<input type="button" value="±" class="blueBtn ope button" onclick="negate()">
<input type="button" value="x²" class="blueBtn ope button" onclick="calculator.screen.value = Math.pow(calculator.screen.value, 2)">
<input type="button" value="Mod" class="blueBtn ope button" onclick="calculator.screen.value += '%' ">
<input type="button" value="Abs" class="blueBtn ope button" onclick="calculator.screen.value = Math.abs(calculator.screen.value)">
<input type="button" value="%" class="ope button" onclick="percentage()">
<input type="button" value="7" class="button" onclick="calculator.screen.value += '7' ">
<input type="button" value="8" class="button" onclick="calculator.screen.value +='8' ">
<input type="button" value="9" class="button" onclick="calculator.screen.value += '9' ">
<input type="button" value="÷" class=" ope button" onclick="calculator.screen.value += '/' ">
<input type="button" value="4" class="button" onclick="calculator.screen.value += '4' ">
<input type="button" value="5" class="button" onclick="calculator.screen.value += '5' ">
<input type="button" value="6" class="button" onclick="calculator.screen.value += '6' ">
<input type="button" value="×" class=" ope button" onclick="calculator.screen.value += '*' ">
<input type="button" value="1" class="button" onclick="calculator.screen.value += '1' ">
<input type="button" value="2" class="button" onclick="calculator.screen.value += '2' ">
<input type="button" value="3" class="button" onclick="calculator.screen.value += '3' ">
<input type="button" value="–" class=" ope button" onclick="calculator.screen.value += '-' ">
<input type="button" value="." class="button" onclick="calculator.screen.value += '.' ">
<input type="button" value="0" class="button" onclick="calculator.screen.value += '0' ">
<input type="button" value="00" class="button" onclick="calculator.screen.value += '00' ">
<input type="button" value="+" class=" ope button" onclick="calculator.screen.value += '+' ">
<input type="button" value="(" class="blueBtn button" onclick="calculator.screen.value += '(' ">
<input type="button" value=")" class="blueBtn button" onclick="calculator.screen.value += ')' ">
<input type="button" value="√" class=" ope button" onclick="calculator.screen.value = Math.sqrt(calculator.screen.value)">
<input type="button" value="=" class="ope button" onclick="equal()">
</div>
</form>
</section>
<scrip>
var screen = document.getElementById('scr')
var btns = document.querySelectorAll('.button')
var offScreen = () => {
screen.value = ""
screen.style.background = "#636361"
screen.style.border = "1px solid #636361"
btns.forEach(btn =>{
btn.disabled = true
})
}
offScreen()
function s_off(){
offScreen()
}
function s_on(){
screen.style.background = "rgb(241, 241, 241)"
screen.style.border = "2px solid #c0c0c0"
btns.forEach(btn =>{
btn.disabled = false
})
}
function equal(){
try{
screen.value = eval(screen.value)
}
catch{
screen.value = 'Error!'
}
}
function factorial(){
var i, num, f
f=1
num = screen.value
for(i=1; i<=num; i++){
f = f*i
}
screen.value = f
}
function negate(){
var num, neg
num = screen.value
neg = -parseFloat(num)
screen.value = neg
}
function percentage(){
var num, per
num = screen.value
per = eval(num/100)
screen.value = per
}
</scrip>
</body>
</html>
0 komentar: