Code calculator bằng Javascript Và Html

Mục lục

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);
}