<!DOCTYPE html>
<html>
<head>
<title>Belajar Koding Informatika MAN Kapuas</title>
@import url(https://fonts.googleapis.com/css?family=Roboto:100);
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Roboto;
font-weight: 300;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: rgb(255, 255, 255);
}
.screen{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 333;
width: 216px;
height: 248px;
border-radius: 50px;
background-color: #000000;
display: flex;
flex-wrap: wrap;
box-shadow: inset 0 0 1px 3px #dadada,
inset 0 0 3px 5px #dadada,
inset 0 0 2px 9px rgb(0 0 0 / 90%),
inset 0 0 0 10px #dadada,
inset 0 0 0 17px black,
inset 0 0 11px 20px #424242,
0 0 100px 2px rgb(0, 0, 0);
}
#innerScreen{
width: 92%;
height: 86%;
margin: 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
background-color: transparent;
margin-top: 12px;
margin-left: 11px;
border-radius: 30px;
}
#display{
width: 85%;
height: 18%;
border-radius: inherit;
margin-top: 10px;
display: flex;
justify-content: flex-end;
color: #fff;
padding: 10px;
overflow: hidden;
font-size: 25px;
}
.btn{
color: #fff;
width: 18.5%;
height: 25px;
border-radius: 40px;
background-color: rgb(66, 66, 66);
display: flex;
justify-content: center;
align-items: center;
margin-right: 4px;
cursor: pointer;
transform: .2s;
}
.btn:hover{
background-color: rgb(255, 136, 0);
color: #fff;
}
.btn.zero{
width: 39%;
}
.btn_operator{
background-color: rgb(255, 136, 0);
color: #fff;
}
#calc_Clear,
#negativepositive,
#percent{
background-color: #aaaaaa;
color: #000000;
font-weight: 500;
}
.controller{
position: absolute;
top: 64px;
right: -9px;
width: 8px;
height: 30px;
border-radius: 100px;
background: linear-gradient(to bottom, #aaaaaa, #fff);
box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 80%),
inset 0 3px 2px 0 #dadada,
inset 0 6px 2px 0 rgba(0, 0, 0, 0.712),
inset 0 1.3px 0 0 rgb(0 0 0 / 80%),
inset 0 -1px 2px 0 rgb(0 0 0 / 80%),
inset 0 -3px 2px 0 #dadada,
inset 0 -6px 2px 0 rgba(0, 0, 0, 0.712),
inset 0 -1.3px 0 0 rgb(0 0 0 / 80%),
-4px 0 3px 0 rgba(0, 0, 0, 0.822);
}
.right_button{
position: absolute;
top: 125px;
right: -2.5px;
width: 4px;
height: 59px;
border-radius: 50px;
border: 1px solid rgba(136, 134, 134, 0.432);
z-index: 777;
background: linear-gradient(to bottom, #aaaaaa, #fff);
box-shadow: inset 0 4px 3px 0 rgba(0,0,0,0.438),
inset 0 -5px 2.5px 0 rgba(0,0,0,0.733);
}
.container{
width: 185px;
height: 470px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 100px;
box-shadow: inset 0 0 100px 0 rgb(0, 0, 0);
border-top: none;
}
.watchband{
position: absolute;
width: 180px;
height: 250px;
border: 1px solid #fff;
border-radius: 80px;
box-shadow: 0 9px 7px 0 rgb(214, 214, 214),
0 9px 7px 0 rgb(214, 214, 214),
0 -9px 7px 0 rgb(214, 214, 214),
0 -9px 7px 0 rgb(214, 214, 214);
background-color: rgb(255, 255, 255);
}
.watchband:nth-of-type(1){
top: -108px;
left: -81%;
}
.watchband:nth-of-type(2){
top: -108px;
left: 83%;
}
.watchband:nth-of-type(3){
top: 328px;
left: -81%;
}
.watchband:nth-of-type(4){
top: 328px;
left: 83%;
}
</style>
</head>
<body>
<div class="screen">
<div id="innerScreen" class="calculator">
<div id="display">0</div>
<span class="clear btn" id="calc_Clear">AC</span>
<span class="btn btn_operator" id="negativepositive">+/-</span>
<span class="btn btn_operator" id="percent">%</span>
<span class="btn btn_operator">÷</span>
<span class="btn btn_num" id="calc_Seven">7</span>
<span class="btn btn_num" id="calc_Eight">8</span>
<span class="btn btn_num" id="calc_Nine">9</span>
<span class="btn btn_operator">×</span>
<span class="btn btn_num" id="calc_Four">4</span>
<span class="btn btn_num" id="calc_Five">5</span>
<span class="btn btn_num" id="calc_Six">6</span>
<span class="btn btn_operator">-</span>
<span class="btn btn_num" id="calc_One">1</span>
<span class="btn btn_num" id="calc_Two">2</span>
<span class="btn btn_num" id="calc_Three">3</span>
<span class="btn btn_operator">+</span>
<span class="btn zero btn_num" id="calc_Zero">0</span>
<span class="btn calc_decimal">.</span>
<span class="btn btn_operator">=</span>
</div>
<div class="controller"></div>
<div class="right_button"></div>
</div>
<div class="container">
<div class="watchband"></div>
<div class="watchband"></div>
<div class="watchband"></div>
<div class="watchband"></div>
</div>
<scrip>var numBtns = document.getElementsByClassName('btn_num')
var operatorBtns = document.getElementsByClassName('btn_operator')
var btnDecimal = document.querySelector('.calc_decimal')
var btnClear = document.getElementById('calc_Clear')
var display = document.getElementById('display')
var displayVal = '0'
var pendingVal;
var evalStringArry = []
var updateDisplayVal = (clickObj) => {
var btnText = clickObj.target.innerText
if(displayVal === '0'){
displayVal = ''
}
displayVal += btnText
display.innerText = displayVal
}
var performOperation = (clickObj) => {
var operator = clickObj.target.innerText
switch(operator){
case '+':
pendingVal = displayVal;
displayVal = '0'
display.innerText = displayVal
evalStringArry.push(pendingVal)
evalStringArry.push('+')
break
case '-':
pendingVal = displayVal;
displayVal = '0'
display.innerText = displayVal
evalStringArry.push(pendingVal)
evalStringArry.push('-')
break
case '×':
pendingVal = displayVal;
displayVal = '0'
display.innerText = displayVal
evalStringArry.push(pendingVal)
evalStringArry.push('*')
break
case '÷':
pendingVal = displayVal;
displayVal = '0'
display.innerText = displayVal
evalStringArry.push(pendingVal)
evalStringArry.push('/')
break
case '%':
evalStringArry.push(displayVal)
var per = eval(displayVal/100)
displayVal = per
display.innerText = displayVal
evalStringArry = []
break
case '+/-':
evalStringArry.push(displayVal)
var neg = -parseFloat(displayVal)
displayVal = neg
display.innerText = displayVal
evalStringArry = []
break
case '=':
evalStringArry.push(displayVal)
var evaluation = eval(evalStringArry.join(' ')) // ['a', '+', 'a'] = 'a + a'
displayVal = evaluation + ''
display.innerText = displayVal
evalStringArry = []
break
default:
break
}
}
for(var i=0; i < numBtns.length; i++){
numBtns[i].addEventListener('click', updateDisplayVal, false)
}
for(var i=0; i < operatorBtns.length; i++){
operatorBtns[i].addEventListener('click', performOperation, false)
}
btnDecimal.addEventListener('click', ()=>{
if(!displayVal.includes('.')){
displayVal += '.'
display.innerText = displayVal
}
})
btnClear.addEventListener('click', ()=>{
displayVal = '0'
pendingVal = undefined
evalStringArry = []
display.innerText = displayVal
})</scrip>
</body>
</html>
