UI Buttons

Building the buttons

Let's now handle the buttons UI for the calculator app. We declare an array for all the symbols and numerics for all the buttons in the UI. I'll use the reactive data declaration.

import { ref, reactive } from "vue"
const buttons = reactive([
    'Rad', 'Deg', 'x!', '(', ')',
    '%', 'AC', 'Inv', 'sin', 'ln',
    '7', '8', '9', '÷', 'π', 
    'cos', 'log', '4', '5', '6', 
    '×', 'e', 'tan', '√', '1', 
    '2', '3', '-', 'Ans', 'EXP',
    'x<sup>y</sup>', '0', '.', '=', '+'])

Onto rendering the data onto the DOM for the application using the moustache syntax, we use grid layout of 5 by 7, that is, 5 rows and 7 columns.

<!-- ... -->
<!-- End Calculator Screen -->
<!-- Calculator Buttons -->
<div class="grid grid-cols-7 grid-rows-5 gap-[6px]">
  <div
    v-for="(button, i) in buttons"
    :key="i"
    class="rounded">
    <span v-html="button"></span>
  </div>
</div>
<!-- End Calculator Buttons -->
<!-- ... -->

We introduce a concept here, list rendering. In Vue, we use v-for to loop through an array and access each item. When only needing the item and not also the index, we can define it as so:

<div v-for="button in buttons">

In Vue's v-for loop, the "key" attribute is used to identify each item in a list so that Vue can efficiently update the DOM when items are added, removed, or reordered.
Without a unique identifier, Vue may have to re-render the entire list when changes occur, leading to poor performance.
The "key" attribute should be a unique value for each item, such as an ID or index, and it should not be changed during re-renders.

📂list rendering ✅

Let's integrate the colors and themes for the final UI in order to meet the final UI look.

Because all buttons will have a base shared look, so let's declare a css property for this in the style.css using the @apply attribute.

/* style.css */
/* ... */
@tailwind utilities;

@layer components{
    .calculator-button {
        @apply py-2 px-6 text-sm flex 
        items-center justify-center cursor-pointer;
    }
}

@layer base{
/* ... */

<!-- ... -->
<div
    v-for="(button, i) in buttons"
    :key="i"
    class="calculator-button rounded">
    <span v-html="button"></span>
</div>
<!-- ... -->

Next, we know that in the UI, some buttons have different color themes from others, let's set that. Let's set another array for the basic color theme buttons which will be used for checking and setting of the necessary color themes for each button.

Note: Ensure that the three custom colors used in the color rendering below are extended in tailwind.config.js for tailwindcss.

<script setup lang="ts">
import { ref, reactive } from "vue"
/* 
... 
*/
const basic = reactive([
    '0', '1', '2', '3', '4', '5', 
    '6', '7', '8', '9', '.'])
</script>
<template>
  <!-- Root Div -->
    <!-- ... -->
      <!-- Calculator Buttons -->
      <div class="grid grid-cols-7 grid-rows-5 gap-[6px]">
        <div
          v-for="(button, i) in buttons"
          :key="i"
          class="calculator-button rounded"
          :class="
            basic.includes(button)
              ? 'bg-basic'
              : button == '='
              ? 'bg-highlight text-white'
              : 'bg-complex'
          ">
          <span v-html="button"></span>
        </div>
      </div>
      <!-- End Calculator Buttons -->
    <!-- ... -->
  <!-- End Root Div -->
</template>

In class binding, we can assign CSS classes dynamically based on the data evaluated and computed properties. It's like using if-else to set classes. I've used chained ternary operator to set both the basic, complex and highlight color themes.
The chained operator evaluates from outwards going inwards.

🔥Class bindings ✅

Finishing on UI buttons

Finally, note that the first two buttons are a bit different from the others, in that they have a unique layout.
For this reason, I'll have to define their styles separately and hence the array for buttons will now start from the third one and not from the first one as initially styled.

<!-- ... -->
<div class="grid grid-cols-7 grid-rows-5 gap-[6px]">
<!-- unique buttons -->
<div class="col-span-2 flex justify-between items-center bg-complex rounded">
  <div class="calculator-button rounded-l">{{ buttons[0] }}</div>
  <div class="bg-gray-400 h-4/6 w-[1px]"></div>
  <div class="calculator-button rounded-r">{{ buttons[1] }}</div>
</div>
<!-- End unique buttons -->
<div
  v-for="(button, i) in buttons.slice(2)" ... >
<!-- ... -->

On the next bit, that is, the next lesson, let's bundle each part of our application into components.