JSFiddle - React, Tailwind, and code Playground

by ajinkyax

HTML

<table border="1">
            <tr>
                <th id="result" colspan="5" align="right"></th>
            </tr>
            <tr>
                <td><a href="#">1</a></td>
                <td><a href="#">2</a></td>
                <td><a href="#">3</a></td>
                <td><a href="#">4</a></td>
                <td><a href="#">+</a></td>
            </tr>
            <tr>
                <td><a href="#">5</a></td>
                <td><a href="#">6</a></td>
                <td><a href="#">7</a></td>
                <td><a href="#">8</a></td>
                <td><a href="#">-</a></td>
            </tr>
            <tr>
                <td><a href="#">9</a></td>
                <td><a href="#">0</a></td>
                <td colspan="2"><a href="#">.</a></td>
                <td><a href="#">*</a></td>
            </tr>
            <tr>
                <td><a href="#" >Clear</a></td>
                <td>&nbsp;</td>
                <td colspan="2"><a href="#">=</a></td>
                
                <td><a href="#">/</a></td>
            </tr>
        </table>

CSS

table {font-family: Arial,sans-serif,Tahoma; font-size: 14px;}
            td {padding: 5px;}
            th {padding: 10px 5px 2px; color: #4800ff; font-size: 15px;}
            a {
                font-family: Arial,sans-serif,Tahoma; font-size: 14px; text-decoration: none; color: #0043ff;
            }

JavaScript

function addDigit(digit) {
    var result = document.getElementById("result");
    result.innerHTML += digit;
    return false;
}

function calculate() {
    var resultField = document.getElementById("result");
    resultField.innerHTML = eval(resultField.innerHTML);

    return false;
}

function reset() {
    var resultField = document.getElementById("result");
    resultField.innerHTML = '';

    return false;
}

function getHandlerFunction(linkHTML) {
    return function() {
        addDigit(linkHTML);
        return false;
    }
}

onload = function() {
    var links = document.getElementsByTagName("a");
    var lengthLink = links.length;

    for (var i = 0; i < lengthLink; i++) {
        var link = links[i];
        var linkHTML = link.innerHTML;

        switch (linkHTML) {
        case "Clear":
            link.onClick = reset;
            break;
        case "=":
            link.onClick = calculate;
            break;
        default:
            link.onClick = getHandlerFunction(linkHTML);
            break;
        }
    }
}