UI Puzzle

Building the UI

In the last lesson, we had the root div having display grid which filled the screen and had a child, h1. We'll replace the h1 with the div for the calculator root. Within this newly created div, we'll have the screen portion and the buttons portion. Let's start with the screen portion.

<template>
  <!-- Root Div -->
  <div class="h-screen w-screen grid place-items-center bg-white">
    <!-- Calculator Root -->
    <div>
      <!-- Calculator Screen -->
      <div class="h-20 w-[600px] border border-gray-400 my-3 rounded-lg"></div>
      <!-- End Calculator Screen -->
    </div>
    <!-- End Calculator Root -->
  </div>
  <!-- End Root Div -->
</template>

Note: We have set a static width for the screen size, later we'll remove it.

Let's add the reset icon on the top left of the screen div.

I'll be using Iconify Icons for this project. Although it might seem like an overkill, I highly recommend it. In fact, all the icons in this interactive platform are from the Iconify framework.

Let's install the iconify plugin for tailwind:

siliconSavanna@Fourier-PC

#|

Note: You can choose to download all the icon sets, or in our case, the set for the clock reset icon which is the material symbols collection.

To download all 100k+ icons, install as dev dependency, (I assume on the higher side that during building, the unused icons will be removed)

siliconSavanna@Fourier-PC

#|

To download only the collection we need, we run the command:

siliconSavanna@Fourier-PC

#|

Now to configure our app

const { addDynamicIconSelectors } = require('@iconify/tailwind')

export default {
    // ...
    plugins: [
    // Iconify plugin
       addDynamicIconSelectors(),
    ],
    // ...
}

Let's embed the reset icon in the top-left part of the screen div using the position absolute attribute.

<!-- Calculator Screen -->
<div 
class="h-20 w-[600px] border border-gray-400 
my-3 rounded-lg relative">
  <span 
  class="icon-[material-symbols--device-reset-rounded]
  absolute top-2 left-2 text-2xl text-gray-500 cursor-pointer">
  </span>
</div>
<!-- End Calculator Screen -->

For the default zero at the screen when it's cleared, we can declare a ref with a zero for now.

<script setup lang="ts">
import { ref } from 'vue'

const calculations = ref(0)
</script>
<template>
  <!-- Root Div -->
  <div class="h-screen w-screen grid place-items-center bg-white">
    <!-- Calculator Root -->
    <div>
      <!-- Calculator Screen -->
      <div 
      class="h-20 w-[600px] border border-gray-400 
      my-3 rounded-lg relative">
        <span 
        class="icon-[material-symbols--device-reset-rounded]
        absolute top-2 left-2 text-2xl text-gray-500 cursor-pointer">
        </span>
        <div class="absolute bottom-2 right-2 text-4xl">
          {{ calculations }}
        </div>
      </div>
      <!-- End Calculator Screen -->
    </div>
    <!-- End Calculator Root -->
  </div>
  <!-- End Root Div -->
</template>
<style scoped></style>

Note: All these parts of the app will be embedded in components later on.

In the next lesson, we focus on the buttons part of the app.