Build a calculator easily with tailwind

Build a calculator easily with tailwind

Make a beautiful calculator

Ashish Prajapati's photo
Ashish Prajapati
·

2 min read

Here are some steps to build a calculator like this one.

You can build it very easily.

First of all you got to create a HTML file you can name it anything you want. We will name index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>

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

Add this boilerplate code to your index file.

And now we will work on the body part of the calculator application.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class = "w-full h-screen flex justify-center items-center bg-indigo-100">
    <div class = "container w-1/3">
        <div class = "input-container h-16 mb-2">
            <input id = "result" class = "px-4 text-2xl text-right border w-full h-full rounded-md" type = "text">
        </div>
        <div class = "grid grid-cols-4 grid-rows-5 gap-2">
            <button onclick = "buttonClickHandler('(')" class = "bg-gray-300 rounded-md px-4 py-2">(</button>
            <button onclick = "buttonClickHandler(')')" class = "bg-gray-300 rounded-md px-4 py-2">)</button>
            <button onclick = "buttonClickHandler('%')" class = "bg-gray-300 rounded-md px-4 py-2">%</button>
            <button onclick = "clrEvent()" class = "bg-gray-300 rounded-md px-4 py-2">AC</button>
            <button onclick = "buttonClickHandler(7)" class = "bg-gray-100 rounded-md px-4 py-2">7</button>
            <button onclick = "buttonClickHandler(8)" class = "bg-gray-100 rounded-md px-4 py-2">8</button>
            <button onclick = "buttonClickHandler(9)" class = "bg-gray-100 rounded-md px-4 py-2">9</button>
            <button onclick = "buttonClickHandler('/')" class = "bg-gray-300 rounded-md px-4 py-2">/</button>
            <button onclick = "buttonClickHandler(4)" class = "bg-gray-100 rounded-md px-4 py-2">4</button>
            <button onclick = "buttonClickHandler(5)" class = "bg-gray-100 rounded-md px-4 py-2">5</button>
            <button onclick = "buttonClickHandler(6)" class = "bg-gray-100 rounded-md px-4 py-2">6</button>
            <button onclick = "buttonClickHandler('*')" class = "bg-gray-300 rounded-md px-4 py-2">X</button>
            <button onclick = "buttonClickHandler(1)" class = "bg-gray-100 rounded-md px-4 py-2">1</button>
            <button onclick = "buttonClickHandler(2)" class = "bg-gray-100 rounded-md px-4 py-2">2</button>
            <button onclick = "buttonClickHandler(3)" class = "bg-gray-100 rounded-md px-4 py-2">3</button>
            <button onclick = "buttonClickHandler('-')" class = "bg-gray-300 rounded-md px-4 py-2">-</button>
            <button onclick = "buttonClickHandler(0)" class = "bg-gray-100 rounded-md px-4 py-2">0</button>
            <button onclick = "buttonClickHandler('.')" class = "bg-gray-300 rounded-md px-4 py-2">.</button>
            <button onclick = "getResult()" class = "bg-gray-300 rounded-md px-4 py-2">=</button>
            <button onclick = "buttonClickHandler('+')" class = "bg-gray-300 rounded-md px-4 py-2">+</button>
        </div>
    </div>
    <script src = "./script.js">
    </script>
</body>
</html>

This is the script file of the calculator app.

const result = document.getElementById("result");
// number button event handler
function buttonClickHandler(num){
    result.value += num.toString();
}
// clr event handler
function clrEvent(){
    result.value = "";
}
// result event handler
function getResult(){
    result.value = eval(result.value);
}

You can find all this code from my github account.

https://github.com/beingsocasual/calculatorApp
Tailwind CSSHTML5