Published on

How To Build A Calculator UI With Tailwind CSS From Scratch

Calculator UI

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to quickly build custom user interfaces. It is a low-level framework that allows developers to easily create responsive and customizable designs without writing any CSS code from scratch.

The description of Calculator UI ui component

A calculator UI is a user interface component that allows users to perform basic mathematical operations such as addition, subtraction, multiplication, and division. It usually consists of a display area, numeric buttons, and operator buttons.

Why use Tailwind CSS to create a Calculator UI ui component?

Tailwind CSS provides a set of pre-defined classes that make it easy to create a calculator UI without writing any CSS code from scratch. It also provides responsive design classes that allow the UI to adapt to different screen sizes. Using Tailwind CSS can save a lot of development time and effort.

The preview of Calculator UI ui component.

To create a calculator UI with Tailwind CSS, we can use the pre-defined classes to style the display area, numeric buttons, and operator buttons. Here is a preview of what the calculator UI will look like:

Free download of the Calculator UI's source code

The source code of Calculator UI ui component.

To create a calculator UI with Tailwind CSS, we can use HTML and Tailwind CSS classes. Here is the source code for the calculator UI:

<style>@import url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.min.css);</style>

<div class="min-w-screen min-h-screen bg-gray-100 flex items-center justify-center px-5 py-5">
    <div class="w-full mx-auto rounded-xl bg-gray-100 shadow-xl text-gray-800 relative overflow-hidden" style="max-width:300px">
        <div class="w-full h-40 bg-gradient-to-b from-gray-800 to-gray-700 flex items-end text-right">
            <div class="w-full py-5 px-6 text-6xl text-white font-thin">340.0</div>
        </div>
        <div class="w-full bg-gradient-to-b from-indigo-400 to-indigo-500">
            <div class="flex w-full">
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-opacity-50 text-xl font-light">C</button>
                </div>
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-opacity-50 text-xl font-light">+/-</button>
                </div>
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-opacity-50 text-xl font-light">%</button>
                </div>
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none bg-indigo-700 bg-opacity-10 hover:bg-opacity-20 text-white text-2xl font-light">÷</button>
                </div>
            </div>
            <div class="flex w-full">
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-xl font-light">7</button>
                </div>
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-xl font-light">8</button>
                </div>
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-xl font-light">9</button>
                </div>
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none bg-indigo-700 bg-opacity-10 hover:bg-opacity-20 text-white text-xl font-light"></button>
                </div>
            </div>
            <div class="flex w-full">
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-xl font-light">4</button>
                </div>
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-xl font-light">5</button>
                </div>
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-xl font-light">6</button>
                </div>
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none bg-indigo-700 bg-opacity-10 hover:bg-opacity-20 text-white text-xl font-light">-</button>
                </div>
            </div>
            <div class="flex w-full">
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-xl font-light">1</button>
                </div>
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-xl font-light">2</button>
                </div>
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-xl font-light">3</button>
                </div>
                <div class="w-1/4 border-r border-b border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none bg-indigo-700 bg-opacity-10 hover:bg-opacity-20 text-white text-xl font-light">+</button>
                </div>
            </div>
            <div class="flex w-full">
                <div class="w-1/4 border-r border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-xl font-light">0</button>
                </div>
                <div class="w-1/4 border-r border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none hover:bg-indigo-700 hover:bg-opacity-20 text-white text-xl font-light">.</button>
                </div>
                <div class="w-2/4 border-r border-indigo-400">
                    <button class="w-full h-16 outline-none focus:outline-none bg-indigo-700 bg-opacity-30 hover:bg-opacity-40 text-white text-xl font-light">=</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- BUY ME A BEER AND HELP SUPPORT OPEN-SOURCE RESOURCES -->
<div class="flex items-end justify-end fixed bottom-0 right-0 mb-4 mr-4 z-10">
    <div>
        <a title="Buy me a beer" href="https://www.buymeacoffee.com/scottwindon" target="_blank" class="block w-16 h-16 rounded-full transition-all shadow hover:shadow-lg transform hover:scale-110 hover:rotate-12">
            <img class="object-cover object-center w-full h-full rounded-full" src="https://i.pinimg.com/originals/60/fd/e8/60fde811b6be57094e0abc69d9c2622a.jpg"/>
        </a>
    </div>
</div>

How to create a Calculator UI with Tailwind CSS?

To create a calculator UI with Tailwind CSS, follow these steps:

  1. Create an HTML file and add a div element for the calculator UI.
<div class="calculator">
  <!-- calculator UI goes here -->
</div>
  1. Add a display area to the calculator UI using a div element and the Tailwind CSS classes.
<div class="calculator">
  <div class="bg-gray-200 p-2 text-right">
    <span>0</span>
  </div>
  <!-- numeric and operator buttons go here -->
</div>
  1. Add numeric buttons to the calculator UI using button elements and the Tailwind CSS classes.
<div class="calculator">
  <div class="bg-gray-200 p-2 text-right">
    <span>0</span>
  </div>
  <div class="flex flex-wrap">
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">1</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">2</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">3</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">+</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">4</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">5</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">6</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">-</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">7</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">8</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">9</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">*</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">0</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">.</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">/</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">=</button>
  </div>
</div>
  1. Add operator buttons to the calculator UI using button elements and the Tailwind CSS classes.
<div class="calculator">
  <div class="bg-gray-200 p-2 text-right">
    <span>0</span>
  </div>
  <div class="flex flex-wrap">
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">1</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">2</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">3</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">+</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">4</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">5</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">6</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">-</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">7</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">8</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">9</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">*</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">0</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">.</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">/</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">=</button>
  </div>
</div>
  1. Add JavaScript code to handle button clicks and perform calculations.
const display = document.querySelector('.calculator span');
const buttons = document.querySelectorAll('.calculator button:not([value="="])');
const equalsButton = document.querySelector('.calculator button[value="="]');

let firstOperand = null;
let operator = null;
let secondOperand = null;

function handleButtonClick(event) {
  const button = event.target;
  const value = button.textContent;

  if (value >= '0' && value <= '9') {
    if (operator === null) {
      if (firstOperand === null) {
        firstOperand = value;
      } else {
        firstOperand += value;
      }
      display.textContent = firstOperand;
    } else {
      if (secondOperand === null) {
        secondOperand = value;
      } else {
        secondOperand += value;
      }
      display.textContent = secondOperand;
    }
  } else {
    operator = value;
  }
}

function handleEqualsButtonClick() {
  const first = parseFloat(firstOperand);
  const second = parseFloat(secondOperand);

  switch (operator) {
    case '+':
      display.textContent = first + second;
      break;
    case '-':
      display.textContent = first - second;
      break;
    case '*':
      display.textContent = first * second;
      break;
    case '/':
      display.textContent = first / second;
      break;
  }

  firstOperand = null;
  operator = null;
  secondOperand = null;
}

buttons.forEach(button => {
  button.addEventListener('click', handleButtonClick);
});

equalsButton.addEventListener('click', handleEqualsButtonClick);
  1. Style the calculator UI using Tailwind CSS classes.
<div class="calculator">
  <div class="bg-gray-200 p-2 text-right">
    <span>0</span>
  </div>
  <div class="flex flex-wrap">
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">1</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">2</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">3</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">+</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">4</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">5</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">6</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">-</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">7</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">8</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">9</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">*</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">0</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">.</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400">/</button>
    <button class="w-1/4 p-2 bg-gray-300 hover:bg-gray-400" value="=">=</button>
  </div>
</div>

Conclusion

In this article, we learned how to create a calculator UI with Tailwind CSS from scratch. We used pre-defined classes to style the display area, numeric buttons, and operator buttons. We also added JavaScript code to handle button clicks and perform calculations. Using Tailwind CSS can save a lot of development time and effort, and allows developers to easily create responsive and customizable designs.