JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="display">
            <input type="text" id="result" readonly>
        </div>
        <div class="buttons">
            <button class="operator" onclick="display('+')">+</button>
            <button class="operator" onclick="display('-')">-</button>
            <button class="operator" onclick="display('*')">*</button>
            <button class="operator" onclick="display('/')">/</button>
            <button class="operator" onclick="calculate()">=</button>
            <button class="clear" onclick="clearScreen()">C</button>
            <button onclick="display('1')">1</button>
            <button onclick="display('2')">2</button>
            <button onclick="display('3')">3</button>
            <button onclick="display('4')">4</button>
            <button onclick="display('5')">5</button>
            <button onclick="display('6')">6</button>
            <button onclick="display('7')">7</button>
            <button onclick="display('8')">8</button>
            <button onclick="display('9')">9</button>
            <button onclick="display('0')">0</button>
            <button onclick="display('.')">.</button>
        </div>
    </div>

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

CSS

body {
    font-family: sans-serif;
}

.container {
    width: 300px;
    margin: 0 auto;
    text-align: center;
}

.display {
    background-color: #eee;
    padding: 10px;
}

.display input {
    width: 100%;
    font-size: 18px;
    border: none;
    outline: none;
}

.buttons button {
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    margin: 5px;
}

.buttons button:hover {
    background-color: #f2f2f2;
}

.operator {
    background-color: #f2f2f2;
}

JavaScript

let result = document.getElementById('result');
let operators = ['+', '-', '*', '/'];

function display(value) {
    result.value += value;
}

function clearScreen() {
    result.value = '';
}

function calculate() {
    let expression = result.value;
    for (let operator of operators) {
        expression = expression.replace(new RegExp('[' + operator + ']', 'g'), ` ${operator} `);
    }
    let answer = eval(expression);
    result.value = answer;
}