how to make Scientific calculator using HTML, JavaScript and css

Hello guys, today i am going to walk you through step by step in creating your own simple scientific calculator which can perform the major calculations which most of the calculators do. Take a look at the awesome calculator below that you will create using html, javascript and css. That’s right. All you need to know is just the basics and with the few neat lines of code you can create your own working scientific calculator! So lets get started.

Html File

<head>
    <title>Minimal Calculator</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Boostrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <!-- JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.17.0/math.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

</head>

<body>
    <div class="container">
        <!-- Rounded switch -->
        <label class="switch">
            <input type="checkbox">
            <span class="slider"></span>
        </label>
        <form>
            <input readonly id="display1" type="text" class="form-control-lg text-right">
            <input readonly id="display2" type="text" class="form-control-lg text-right">
        </form>

        <div class="d-flex justify-content-between button-row">
            <button id="left-parenthesis" type="button" class="operator-group">(</button>
            <button id="right-parenthesis" type="button" class="operator-group">)</button>
            <button id="square-root" type="button" class="operator-group">√</button>
            <button id="square" type="button" class="operator-group">x²</button>
        </div>

        <div class="d-flex justify-content-between button-row">
            <button id="clear" type="button">C</button>
            <button id="backspace" type="button">⌫</button>
            <button id="ans" type="button" class="operand-group">Ans</button>
            <button id="divide" type="button" class="operator-group">÷</button>
        </div>


        <div class="d-flex justify-content-between button-row">
            <button id="seven" type="button" class="operand-group">7</button>
            <button id="eight" type="button" class="operand-group">8</button>
            <button id="nine" type="button" class="operand-group">9</button>
            <button id="multiply" type="button" class="operator-group">×</button>
        </div>


        <div class="d-flex justify-content-between button-row">
            <button id="four" type="button" class="operand-group">4</button>
            <button id="five" type="button" class="operand-group">5</button> 
            <button id="six" type="button" class="operand-group">6</button> 
            <button id="subtract" type="button" class="operator-group">−</button>
        </div>


        <div class="d-flex justify-content-between button-row">
            <button id="one" type="button" class="operand-group">1</button> 
            <button id="two" type="button" class="operand-group">2</button>
            <button id="three" type="button" class="operand-group">3</button>
            <button id="add" type="button" class="operator-group">+</button>
        </div>

        <div class="d-flex justify-content-between button-row">
            <button id="percentage" type="button" class="operand-group">%</button>
            <button id="zero" type="button" class="operand-group">0</button>
            <button id="decimal" type="button" class="operand-group">.</button>
            <button id="equal" type="button">=</button>
        </div>

    </div>
</body>
</html>

CSS File

/* ——————————— Layout ———————————*/

.container {
width: 320px;
padding: 12px;
}

/* vertically center .container */
body {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}

button {
width: 65px;
height: 45px;
font-family: ‘Roboto’, sans-serif;
border: none;
border-radius: 5px;
outline: none !important;
position:relative;
transition: all 0.1s;
}

button.operator-group, button#equal {
font-size: 30px !important;
}

button.operand-group, button#clear, button#ans {
font-size: 20px !important;
}

display1 {

font-family: 'Roboto', sans-serif;
font-weight: 400 !important;
font-size: 20px !important;
height: 50px;

}

.button-row {
margin-top: 12px;
}

form {
width: 294px;
border-radius: .25rem;
}

form input {
background-color: inherit;
border: none;
width: 294px;
margin: 0 auto;
display: block;
}

/————————— Light & Dark System —————————/

/* Light Theme */
.container-light {
background-color: #cfd8dc;
border: 1px solid #cfd8dc;
}

.form-light {
background-color: #eceff1;
box-shadow: 0 0 0 0.1rem rgba(176, 190, 197, .5);
}

.form-input-light {
color: #263238;
}

.operand-group-light {
background-color: #90a4ae;
border-color: #90a4ae;
color: black;
box-shadow: 0px 5px 0px #6b8694; /* 12% darker than bg */
}

.operand-group-light:hover {
background-color: #78909c;
border-color: #607d8b;
box-shadow: 0px 5px 0px #576b75; /* 14% darker than bg */
}

.operand-group-light:active {
background-color: #607d8b;
background-color: #607d8b;
box-shadow: 0px 2px 0px #495f69; /* 11% darker than bg */
top: 3px;
}

.operator-group-light {
background-color: #546e7a;
border-color: #546e7a;
color: #ffffff;
box-shadow: 0px 5px 0px #3f525a; /* 10% darker than bg */
}

.operator-group-light:hover {
background-color: #455a64;
border-color: #37474f;
box-shadow: 0px 5px 0px #2a363c; /* 13% darker than bg */
}

.operator-group-light:active {
background-color: #37474f;
border-color: #37474f;
box-shadow: 0px 2px 0px #1f292d; /* 11% darker than bg */
top: 3px;
}

.clear-light {
background-color: #f44336;
border-color: #f44336;
color: #ffffff;
box-shadow: 0px 5px 0px #c2160a;
color: #ffffff;
}

.clear-light:hover {
background-color: #e53935;
border-color: #d32f2f;
box-shadow: 0px 5px 0px #b51a17;
}

.clear-light:active {
background-color: #d32f2f;
border-color: #d32f2f;
box-shadow: 0px 2px 0px #a82424;
top: 3px;
}

.ans-light, .backspace-light {
background-color: #ff9800;
border-color: #ff9800;
color: #ffffff;
box-shadow: 0px 5px 0px #cc7a00;
color: #ffffff;
}

.ans-light:hover, .backspace-light:hover {
background-color: #fb8c00;
border-color: #f57c00;
box-shadow: 0px 5px 0px #b36200;
}

.ans-light:active, .backspace-light:active {
background-color: #f57c00;
border-color: #f57c00;
box-shadow: 0px 2px 0px #b35900;
top: 3px;
}

.equal-light {
background-color: #4caf50;
border-color: #4caf50;
color: #ffffff;
box-shadow: 0px 5px 0px #3e8e41;
color: #ffffff;
}

.equal-light:hover {
background-color: #43a047;
border-color: #388e3c;
box-shadow: 0px 5px 0px #357e38;
}

.equal-light:active {
background-color: #388e3c;
border-color: #388e3c;
box-shadow: 0px 2px 0px #245b27;
top: 3px;
}

/* Dark Theme */
.container-dark {
background-color: #37474f;
border: 1px solid #37474f;
}

.form-dark {
background-color: #263238;
box-shadow: 0 0 0 0.1rem rgba(69, 90, 100, .5);
}

.form-input-dark {
color: #eceff1;
}

.operand-group-dark {
background-color: #607d8b;
border-color: #607d8b;
color: #ffffff;
box-shadow: 0px 5px 0px #495f69;
}

.operand-group-dark:hover {
background-color: #546e7a;
border-color: #455a64;
box-shadow: 0px 5px 0px #3f525a;
}

.operand-group-dark:active {
background-color: #455a64;
border-color: #455a64;
box-shadow: 0px 2px 0px #2a363c;
top: 3px;
}

.operator-group-dark {
background-color: #b0bec5;
border-color: #b0bec5;
color: #000000;
box-shadow: 0px 5px 0px #8a9ea8;
}

.operator-group-dark:hover {
background-color: #90a4ae;
border-color: #78909c;
box-shadow: 0px 5px 0px #6b8694;
}

.operator-group-dark:active {
background-color: #78909c;
border-color: #78909c;
box-shadow: 0px 2px 0px #576b75;
top: 3px;
}

.clear-dark {
background-color: #f44336;
border-color: #f44336;
color: #ffffff;
box-shadow: 0px 5px 0px #c2160a;
color: #000000;
}

.clear-dark:hover {
background-color: #e53935;
border-color: #d32f2f;
box-shadow: 0px 5px 0px #b51a17;
}

.clear-dark:active {
background-color: #d32f2f;
border-color: #d32f2f;
box-shadow: 0px 2px 0px #931f1f;
top: 3px;
}

.ans-dark, .backspace-dark {
background-color: #ff9800;
border-color: #ff9800;
color: #ffffff;
box-shadow: 0px 5px 0px #cc7a00;
color: #000000;
}

.ans-dark:hover, .backspace-dark:hover {
background-color: #fb8c00;
border-color: #f57c00;
box-shadow: 0px 5px 0px #b36200;
}

.ans-dark:active, .backspace-dark:active {
background-color: #f57c00;
border-color: #f57c00;
box-shadow: 0px 2px 0px #b35900;
top: 3px;
}

.equal-dark {
background-color: #4caf50;
border-color: #4caf50;
color: #ffffff;
box-shadow: 0px 5px 0px #367c39;
color: #000000;
}

.equal-dark:hover {
background-color: #43a047;
border-color: #388e3c;
box-shadow: 0px 5px 0px #2d6c30;
}

.equal-dark:active {
background-color: #388e3c;
border-color: #388e3c;
box-shadow: 0px 2px 0px #245b27;
top: 3px;
}

/—————————– Rounded switch ——————————/

.switch input {
display: none;
}

.switch {
position: relative;
width: 30px;
height: 17px;
display: inline-block;
margin-bottom: 5px;
}

.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
transition: .4s;
border-radius: 50px;
background-color: #263238;
}

.slider:before {
position: absolute;
content: “”;
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
transition: .4s;
border-radius: 50%;
}

input:checked + .slider:before {
background-color: #263238;
}

input:not(:checked) + .slider:before {
background-color: #eceff1;
}

input:checked + .slider {
background-color: white;
}

p:checked + .back {
color: white
}

input:focus + .slider {
box-shadow: 0 0 1px #eceff1;
}

input:checked + .slider:before {
transform: translateX(13px);
}

Javascript File

// Standard Priority Calculator

var display1 = {
operation: “”,
evaluation: “”,
answer: “”
};

// default flag values
var flag = {
ansAllowed: false, // Initially do not allow the use of Ans button
/*
decimalPointAllowed: true,
pctAllowed: false,
ansAllowed: false,
digitAllowed: true
*/
};

// default display values
$(‘#display1’).val(“”);
$(‘#display2’).val(“”);

// Set default theme (light)
$(“.container”).addClass(“container-light”);
$(“form”).addClass(“form-light”);
$(“form input”).addClass(“form-input-light”);
$(“.operand-group”).addClass(“operand-group-light”);
$(“.operator-group”).addClass(“operator-group-light”);
$(“#equal”).addClass(“equal-light”);
$(“#clear”).addClass(“clear-light”);
$(“#backspace”).addClass(“backspace-light”);

/*
try {
myroutine(); // may throw three types of exceptions
} catch (e) {
if (e instanceof TypeError) {
// statements to handle TypeError exceptions
} else if (e instanceof RangeError) {
// statements to handle RangeError exceptions
} else if (e instanceof EvalError) {
// statements to handle EvalError exceptions
} else {
// statements to handle any unspecified exceptions
logMyErrors(e); // pass exception object to error handler
}
}
function isValidJSON(text) {
try {
JSON.parse(text);
return true;
} catch {
return false;
}
}
*/
function evaluate() {
try {
math.eval(display1.operation);
display1.evaluation = math.eval(display1.operation);
return true; // no exception occured
} catch (e) {
if (e instanceof SyntaxError) { // Syntax error exception
display1.evaluation = “E”;
return false; // exception occured
}
else {// Unspecified exceptions
display1.evaluation = “UE”;
return false; // exception occured
}
}
}

// Digits
$(‘#zero’).on(‘click’, function () {
display1.operation = display1.operation + “0”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u0030’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#one’).on(‘click’, function () {
display1.operation = display1.operation + “1”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u0031’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#two’).on(‘click’, function () {
display1.operation = display1.operation + “2”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u0032’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#three’).on(‘click’, function () {
display1.operation = display1.operation + “3”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u0033’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#four’).on(‘click’, function () {
display1.operation = display1.operation + “4”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u0034’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#five’).on(‘click’, function () {
display1.operation = display1.operation + “5”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u0035’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#six’).on(‘click’, function () {
display1.operation = display1.operation + “6”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u0036’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#seven’).on(‘click’, function () {
display1.operation = display1.operation + “7”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u0037’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#eight’).on(‘click’, function () {
display1.operation = display1.operation + “8”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u0038’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#nine’).on(‘click’, function () {
display1.operation = display1.operation + “9”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u0039’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#decimal’).on(‘click’, function () {
display1.operation = display1.operation + “.”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u002e’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

// Operators
$(‘#left-parenthesis’).on(‘click’, function () {
display1.operation = display1.operation + “(“;
$(‘#display1’).val($(‘#display1’).val() + ‘\u0028’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#right-parenthesis’).on(‘click’, function () {
display1.operation = display1.operation + “)”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u0029’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#add’).on(‘click’, function () {
display1.operation = display1.operation + “+”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u002b’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#subtract’).on(‘click’, function () {
display1.operation = display1.operation + “-“;
$(‘#display1’).val($(‘#display1’).val() + ‘\u2212’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#multiply’).on(‘click’, function () {
display1.operation = display1.operation + “*”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u00d7’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#divide’).on(‘click’, function () {
display1.operation = display1.operation + “/”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u00f7’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#square-root’).on(‘click’, function () {

var count = 0;
var index = -1;
var radicand = "";
var result = "";

// radicand is a complex expression
if (display1.operation.endsWith(')')) 
{
    // Find the position of matching parenthesis
    // For example if operation="2+(3-(3+4))", then the index of the 
    // matching '(' would be 2 and the radicand would be (3-(3+4))
    for (i = display1.operation.length - 2; i > -1; i--) 
    {
        if (display1.operation.charAt(i) === '(') 
        {
            if (count === 0) 
            {
                index = i;
                break;
            } 
            else 
            {
                count -= 1;
                continue;
            }
        } 
        else if (display1.operation.charAt(i) === ')') 
        {
            count += 1;
        } 
        else 
        {
            continue;
        }
    }
    if (index === -1) 
    {
        //alert("Malformed expression");
        $('#display2').val("Malformed expression");
        return;
    }
} 
// radicand is a single number
else if (display1.operation.endsWith('0') || display1.operation.endsWith('1') || 
           display1.operation.endsWith('2') || display1.operation.endsWith('3') || 
           display1.operation.endsWith('4') || display1.operation.endsWith('5') ||
           display1.operation.endsWith('6') || display1.operation.endsWith('7') || 
           display1.operation.endsWith('8') || display1.operation.endsWith('9') ||
           display1.operation.endsWith('.'))
{
    index = display1.operation.length - 1;
    for (i = display1.operation.length - 2; i > -1; i--) 
    {
        if (display1.operation.charAt(i) === '0' || display1.operation.charAt(i) === '1' ||
            display1.operation.charAt(i) === '2' || display1.operation.charAt(i) === '3' ||
            display1.operation.charAt(i) === '4' || display1.operation.charAt(i) === '5' ||
            display1.operation.charAt(i) === '6' || display1.operation.charAt(i) === '7' ||
            display1.operation.charAt(i) === '8' || display1.operation.charAt(i) === '9' ||
            display1.operation.charAt(i) === '.' || display1.operation.charAt(i) === '^')
        {
            index = i;
        }
        else 
        {
            break;
        }
    }
}
else 
{
    return;
}

// Get the radicand
radicand = display1.operation.substring(index, display1.operation.length);

// Update operation with sqrt(radicand)
display1.operation = display1.operation.substring(0, index) + "sqrt(" + radicand + ")";

// Replace '^2' with superscript two (don't forget to escape '^' with '\')
radicand = radicand.replace(/\^2/g, "\u00b2");

// Find the last occurence of radicand
index = $('#display1').val().lastIndexOf(radicand);

radicand = $('#display1').val().substring(index, $('#display1').val().length);

// Update #display1
$('#display1').val($('#display1').val().substring(0, index) + '\u221a' + radicand);

// Evaluate
evaluate();

// Display current evaluation
$('#display2').val(display1.evaluation);

});

$(‘#square’).on(‘click’, function () {
display1.operation = display1.operation + “^2”;
$(‘#display1’).val($(‘#display1’).val() + ‘\u00b2’);
evaluate();
$(‘#display2’).val(display1.evaluation);
})

$(‘#percentage’).on(‘click’, function () {
/*
// Only one % is allowed for the entire operation.
// The last % indicates the end of the entire operation and triggers the equal button.
if (display1.numOfPct < 1 && flag.pctAllowed) {
//Num
if (display1.numOfOperands === 0) {
display1.operand = eval(display1.operand + “/” + “100”).toString();
$(‘#display1’).val(display1.operand);
$(‘#display2’).val(display1.operand);
}
else {
$(‘#display1’).val($(‘#display1’).val() + ‘\u0025’);
display1.numOfPct ++;
switch (display1.operator) {
// ab% case ““:
// ab/100 display1.operand = eval(display1.evaluation + “” + display1.operand + “/” + “100”).toString();
display1.operation = “1”;
// result = 1 * (a*b/100)
$(‘#display2’).val(eval(display1.operation + display1.operator + display1.operand).toString());
if (display1.numOfOperands)
break;

            // a/b%
            case "/":
                // a/b*100
                display1.operand = eval(display1.evaluation + "/" + display1.operand + "*" + "100").toString();
                display1.operation = "1";
                display1.operator = "*";
                // result = 1 * (a/b*100)
                $('#display2').val(eval(display1.operation + display1.operator + display1.operand).toString());
                break;

            // a+b%, a-b%
            default:
                // a*b/100
                display1.operand = eval(display1.evaluation + "*" + display1.operand + "/" + "100").toString();
                // result = a + (a*b/100), result = a - (a*b/100)
                $('#display2').val(eval(display1.operation + display1.operator + display1.operand).toString());
                break;
        }
        // Execute the handler attached to the $("#equal") element for the 'click' event type.
        $("#equal").trigger("click");
    }
}
*/

})

// Clear
$(‘#clear’).on(‘click’, function () {
display1.operation = “”,
display1.evaluation = “”,
$(‘#display1’).val(“”);
$(‘#display2’).val(“”);
})

// Equal
$(‘#equal’).on(‘click’, function () {
display1.answer = display1.evaluation; // Store the answer (Ans button)
$(‘#display1’).val(display1.answer); // Update display1
$(‘#display2’).val(“”); // Update display2
display1.operation = display1.answer; // Current operation equals the answer
flag.ansAllowed = true; // Allow the use of Ans button
})

$(‘#ans’).on(‘click’, function () { 

// Allow 'Ans' when its flag is enabled
if (flag.ansAllowed) {
    if (flag.squareRoot) {
        display1.operation = display1.operation.substring(0, display1.operation.length-1) + display1.answer + ")";
    }
    else {
        display1.operation = display1.operation + display1.answer;
    }
    $('#display1').val($('#display1').val() + 'Ans');
    evaluate();
    $('#display2').val(display1.evaluation);
}

})

// Backspace
$(‘#backspace’).on(‘click’, function () {
display1.operation = display1.operation.slice(0, display1.operation.length-1);
$(‘#display1’).val($(‘#display1’).val().slice(0, $(‘#display1’).val().length-1));
evaluate();
$(‘#display2’).val(display1.evaluation);
})

// Theme system
$(“input[type=’checkbox’]”).change(function () {
// dark theme
if (this.checked) {
//alert(“dark”);
$(“.container”).removeClass(“container-light”);
$(“.container”).addClass(“container-dark”);
$(“form”).removeClass(“form-light”);
$(“form”).addClass(“form-dark”);
$(“form input”).removeClass(“form-input-light”);
$(“form input”).addClass(“form-input-dark”);
$(“.operand-group”).removeClass(“operand-group-light”);
$(“.operand-group”).addClass(“operand-group-dark”);
$(“.operator-group”).removeClass(“operator-group-light”);
$(“.operator-group”).addClass(“operator-group-dark”);
$(“#equal”).removeClass(“equal-light”);
$(“#equal”).addClass(“equal-dark”);
$(“#clear”).removeClass(“clear-light”);
$(“#clear”).addClass(“clear-dark”);
$(“#backspace”).removeClass(“backspace-light”);
$(“#backspace”).addClass(“backspace-dark”);
}
// light theme (default)
else {
//alert(“light”);
$(“.container”).removeClass(“container-dark”);
$(“.container”).addClass(“container-light”);
$(“form”).removeClass(“form-dark”);
$(“form”).addClass(“form-light”);
$(“form input”).removeClass(“form-input-dark”);
$(“form input”).addClass(“form-input-light”);
$(“.operand-group”).removeClass(“operand-group-dark”);
$(“.operand-group”).addClass(“operand-group-light”);
$(“.operator-group”).removeClass(“operator-group-dark”);
$(“.operator-group”).addClass(“operator-group-light”);
$(“#equal”).removeClass(“equal-dark”);
$(“#equal”).addClass(“equal-light”);
$(“#clear”).removeClass(“clear-dark”);
$(“#clear”).addClass(“clear-light”);
$(“#backspace”).removeClass(“backspace-dark”);
$(“#backspace”).addClass(“backspace-light”);
}
})

Leave a comment

Create a website or blog at WordPress.com

Up ↑

Design a site like this with WordPress.com
Get started