Dashboard Temp Share Shortlinks Frames API

HTMLify

calc.html
Views: 627 | Author: kartik 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>calculetor by mohit</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=poppins:wght@500gdisplay=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppings',sans-serif;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #0a0a0a, #3a4452);

}
.calculetor{
    border: 1px solid #717377;
    padding: 20px;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(113,115,119,0.5);
}
input{
    width: 320px;
    border: none;
    padding: 24px;
    margin: 10px;
    background: transparent;
    box-shadow: 0px,3px 15px rgba(84, 84, 84, 0.1);
    font-size: 40px;
    text-align: right;
    color: #ffffff;
    background-color: #717377;
    border-radius: 10px;
}
input::placeholder{
    color: #ffffff;

}
button{
    border: none;
    width: 60px;
    height: 60px;
    margin: 10px;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    box-shadow: -8px -8px 15px rgba(38, 160, 99, 0.3);
    cursor: pointer;
}
.equalBtn{
    background-color: #fb7c14;
}
    </style>
</head>
<body>
    <div class="calculetor">
        <input type="text" placeholder="0" id="inputBox">
        <div>
            <button>AC</button>
            <button>DEL</button>
            <button>%</button>
            <button>*</button>
        </div>
        <div>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>/</button>
        </div>
        <div>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>+</button>
        </div>
        <div>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>-</button>
        </div>
        <div>
            <button>00</button>
            <button>0</button>
            <button>.</button>
            <button class="equalBtn">=</button>
        </div>
    </div>
    <script>
        let input = document.getElementById('inputBox');
let buttons = document.querySelectorAll('button');

let string = "";
let arr = Array.from(buttons);
arr.forEach(button =>{
    button.addEventListener('click',(e) =>{
        if(e.target.innerHTML == '='){
            string = eval(string);
            input.value = string;
        }
        else if(e.target.innerHTML == 'AC'){
            string = ""
            input.value = string;
        }
        else if(e.target.innerHTML == 'DEL'){
            string = string.substring(0,string.length-1);
            input.value = string;
        }
        else{
            string += e.target.innerHTML;
            input.value = string;
        }
    })
})
    </script>
</body>
</html>

Share this file: