Code Calculator Bằng Javascript Và Html

Code calculator bằng Javascript Và Html

Code calculator thực hiện cộng trừ nhân chia trong javascript và html đơn giản và đẹp. Xem thêm các cách code calculator ( máy tính bỏ túi ) khác tại đây.

Source code calculator

<!DOCTYPE html>
<html lang="vi">
<head>
  <title>Sharecs.net</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="caculate.css">
</head>
<body>
<div class="container">
        <div class="calculator">
          
            <input type="text" placeholder="0" id="output-screen">


            <button onclick="Clear('')">Cl</button>
            <button onclick="del('')">DEL</button>
            <button onclick="display('%')">%</button>
            <button onclick="display('/')">/</button>
            <button onclick="display('7')">7</button>
            <button onclick="display('8')">8</button>
            <button onclick="display('9')">9</button>
            <button onclick="display('*')">*</button>
            <button onclick="display('4')">4</button>
            <button onclick="display('5')">5</button>
            <button onclick="display('6')">6</button>
            <button onclick="display('-')">-</button>
            <button onclick="display('1')">1</button>
            <button onclick="display('2')">2</button>
            <button onclick="display('3')">3</button>
            <button onclick="display('+')">+</button>
            <button onclick="display('0')">0</button>
            <button onclick="display('.')">.</button>
            <button onclick="calculate('')" class="equal">=</button>
 
        </div>
    </div>

    <script src="calcu.js"></script>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color:#ecf0f3;
    font-family: sans-serif;
    outline: none;
}
.container{
    height: 100vh;
    display: flex;
     justify-content: center;
    align-items: center; 
}
.calculator{
    background-color: #ecf0f3;
    padding: 15px;
    border-radius: 30px;
    box-shadow:inset 5px 5px 12px #ffffff,
                     5px 5px 12px rgba(0,0,0,.16);
     display: grid;
    grid-template-columns: repeat(4,70px); 
}
input{
     grid-column: span 4;
     height: 70px; 
     width: 260px;
     background-color: #ecf0f3;
     box-shadow: inset -5px -5px 12px #ffffff,
                 inset 5px 5px  12px rgba(0,0,0,.16);
    border: none;
    border-radius: 30px;
    color: rgb(70,70,70);
    font-size: 27px;
    font-weight: 700;
    text-align: end;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 30px;
    padding: 20px;

}
button{
    height: 48px;
    width: 48px;
    background-color: #ecf0f3;
    box-shadow: -5px -5px 12px #ffffff,
    5px 5px 12px rgba(0,0,0,.16);
    border-radius: 50%;
    border: none;
    margin: 10px;
    font-size: 18px;
}
button:hover{
    background-color: rgb(241, 227, 227);
    cursor: pointer;
    transition: 0.5s;
}
.equal{
    width: 115px;
    border-radius: 40px;
    animation: col 3s infinite;
}


@keyframes col{
    0%{
        color: red;
    }
    33%{
        color: green;
    }
    100%{
        color: blue;
    }
}

let outputScreen = document.getElementById("output-screen");


// for output
function display(num){
    outputScreen.value += num;
}

// for operator

function calculate(){
    try{
        outputScreen.value = eval(outputScreen.value);
    }
    catch(err){
        alert("Invalid")
    }

}

// for clear and dellete
function Clear(){
    outputScreen.value = "";
}

function del(){
    outputScreen.value =outputScreen.value.slice(0,-1);
}