Published on

Learn How To Create A Expense Tracker Using Tailwindcss With Tailwind CSS from the Pros

Tags
Pages
Expense Tracker using Tailwindcss

Are you looking for a simple and effective way to track your expenses? Look no further than Tailwind CSS! In this tutorial, we'll show you how to create a sleek and functional expense tracker using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that makes it easy to create responsive and customizable user interfaces. With Tailwind, you can quickly build beautiful designs without having to write custom CSS code. Tailwind provides a wide range of pre-built CSS classes that you can use to style your HTML elements.

The description of Expense Tracker using Tailwindcss ui component

Our expense tracker will consist of a simple form where users can input their expenses and a table that displays all the expenses. The form will have input fields for the expense name, amount, and date. Users will be able to add new expenses and delete existing ones.

Why use Tailwind CSS to create a Expense Tracker using Tailwindcss ui component?

Tailwind CSS is an excellent choice for creating an expense tracker because it provides a wide range of pre-built CSS classes that make it easy to style our form and table. With Tailwind, we can quickly create a responsive and customizable user interface without having to write custom CSS code.

The preview of Expense Tracker using Tailwindcss ui component

To see what our expense tracker will look like, check out the preview below:

Free download of the Expense Tracker using Tailwindcss's source code

The source code of Expense Tracker using Tailwindcss ui component

To create our expense tracker, we'll be using HTML, CSS, and JavaScript. We'll also be using Tailwind CSS to style our UI components. Check out the source code below:

<div class="bg-white">
    <div class="grid grid-cols-12 gap-0 ">
        <div class="bg-fixed relative col-span-12 sm:col-span-12 md:col-span-7 lg:col-span-8 xxl:col-span-8 hidden md:block" 
        style="
            background-image:url('https://i.pinimg.com/originals/74/79/b0/7479b0e55f61567d40b0709a4d1b95d9.gif');
            background-size: cover;
            ">
            <!-- <div className="h-screen bg-gray-700 sticky inset-0 ">
                <video 
                    src={Video} 
                    autoPlay
                    muted 
                    loop 
                    class="object-cover w-full h-full"
                >
                </video>  
            </div> -->
            <div class="absolute inset-0 z-20 flex items-center justify-center h-full bg-gray-900 bg-opacity-50">
                <div class="flex justify-center h-full items-center fixed top-0">
                    <p class="text-white text-5xl lg:text-7xl">
                        <span class="border-2 p-4 rounded-md" id="time"></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-span-12 sm:col-span-12 md:col-span-5 lg:col-span-4 xxl:col-span-4">
            <div>
            <div class="border-b">
                    <div class="my-4 px-6">
                        <h2 class="font-semibold text-2xl">Expense Tracker</h2>
                    </div>
                </div>
                <div class="px-8 py-2">
                    <h4 class="text-lg text-gray-500 font-thin">Your Balance</h4>
                    <h4 class="text-2xl font-semibold">RM 430.00</h4>
                </div>
                <div class="flex space-x-0 flex-col lg:flex-row lg:space-x-2 my-2 px-6">
                    <div class="bg-green-600 p-4 border-2 rounded-md shadow-lg  w-full text-white text-center">
                        <h1 class="text-xl font-light">INCOME</h1>
                        <h1 class="text-2xl text-green-100 font-semibold">RM 600.00</h1>
                    </div>
                    <div class="bg-red-600 p-4 border-2 rounded-md shadow-lg  w-full text-white text-center">
                        <h1 class="text-xl font-light">EXPENSE</h1>
                        <h1 class="text-2xl text-red-100 font-semibold">RM 170.00</h1>
                    </div>
                </div>
                <div class="px-8 my-6">
                    <div class="my-4 border-b w-full">
                        <h2 class="font-semibold text-lg">History</h2>
                    </div>
                    <div class="ml-6 relative bg-white p-4 border-r-8 shadow-md my-4 flex justify-between border-green-500">
                        <div class="absolute -left-6">
                            <div class="cursor-pointer bg-red-600 p-2 w-6 flex items-center text-xs text-white justify-center">
                                x
                            </div>
                        </div>
                        <div>
                            <p>My wallet</p>
                        </div>
                        <div>
                            <p>RM +400</p>
                        </div>
                    </div>
                    <div class="ml-6 relative bg-white p-4 border-r-8 shadow-md my-4 flex justify-between border-green-500">
                        <div class="absolute -left-6">
                            <div class="cursor-pointer bg-red-600 p-2 w-6 flex items-center text-xs text-white justify-center">
                                x
                            </div>
                        </div>
                        <div>
                            <p>Deck</p>
                        </div>
                        <div>
                            <p>RM +200</p>
                        </div>
                    </div>
                    <div class="ml-6 relative bg-white p-4 border-r-8 shadow-md my-4 flex justify-between border-red-500">
                        <div class="absolute -left-6">
                            <div class="cursor-pointer bg-red-600 p-2 w-6 flex items-center text-xs text-white justify-center">
                                x
                            </div>
                        </div>
                        <div>
                            <p>Wheel</p>
                        </div>
                        <div>
                            <p>RM -170</p>
                        </div>
                    </div>
                </div>
                <div class="px-8 my-6">
                    <div class="my-4 border-b w-full">
                        <h2 class="font-semibold text-lg">Add new transaction</h2>
                    </div>
                    <div class="bg-white p-4 border-2 rounded-md">
                        <form  class="mt-4">
                            <div class="my-5 text-sm">
                                <label htmlFor="text" class="block text-black">Text</label>
                                <input type="text" autoFocus 
                                class="rounded-sm px-4 py-3 mt-1 focus:outline-none bg-gray-100 w-full" 
                                placeholder="Enter Text" />
                            </div>
                            <div class="my-5 text-sm">
                                <label htmlFor="amount" class="block text-black">
                                    Amount 
                                    <small class="text-gray-600"> (
                                        <span class="text-red-400"> negative-expense</span> ,
                                        <span class="text-green-400"> positive-income</span>
                                        )
                                    </small>
                                </label>
                                <input type="number" autoFocus
                                class="rounded-sm px-4 py-3 mt-1 focus:outline-none bg-gray-100 w-full" 
                                placeholder="Enter Amount" />
                            </div>
                            <div class="my-5">
                                <button class="rounded-sm block text-center text-white bg-gray-800 p-3 duration-300  hover:bg-black w-full">
                                    Add Transaction
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    const getCurrentTimeDate = () => {
        let currentTimeDate = new Date();
        var hours   =  currentTimeDate.getHours();
        var minutes =  currentTimeDate.getMinutes();
        minutes = minutes < 10 ? '0'+minutes : minutes;
         var AMPM = hours >= 12 ? 'PM' : 'AM';
        if(hours === 12){
            hours=12;
        }else{
            hours = hours%12;
        }
        var currentTime = `${hours}:${minutes}${AMPM}`;
        document.getElementById("time").innerHTML = currentTime;
        setTimeout(getCurrentTimeDate, 500);
    }
    getCurrentTimeDate();
</script>

How to create a Expense Tracker using Tailwindcss with Tailwind CSS?

Now that we've covered the basics, let's dive into how to create our expense tracker using Tailwind CSS.

Step 1: Set up your project

To get started, create a new HTML file and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Expense Tracker</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" />
  </head>
  <body>
    <div class="container mx-auto px-4">
      <h1 class="text-2xl font-bold mb-4">Expense Tracker</h1>
      <!-- Expense form goes here -->
      <!-- Expense table goes here -->
    </div>
  </body>
</html>

In this code, we've included the Tailwind CSS stylesheet and set up a basic HTML structure for our expense tracker.

Step 2: Create the expense form

Next, let's create the form where users can input their expenses. Add the following code below the h1 element:

<form class="mb-4">
  <div class="flex mb-4">
    <div class="w-1/2 mr-2">
      <label class="block text-gray-700 font-bold mb-2" for="expense-name">
        Expense Name
      </label>
      <input
        class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="expense-name"
        type="text"
        placeholder="Enter expense name"
      />
    </div>
    <div class="w-1/4 mr-2">
      <label class="block text-gray-700 font-bold mb-2" for="expense-amount">
        Amount
      </label>
      <input
        class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="expense-amount"
        type="number"
        placeholder="Enter amount"
      />
    </div>
    <div class="w-1/4">
      <label class="block text-gray-700 font-bold mb-2" for="expense-date">
        Date
      </label>
      <input
        class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="expense-date"
        type="date"
        placeholder="Enter date"
      />
    </div>
  </div>
  <div class="flex">
    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
      type="button"
    >
      Add Expense
    </button>
  </div>
</form>

In this code, we've created a form with input fields for the expense name, amount, and date. We've also added a button to submit the form.

Step 3: Create the expense table

Now, let's create the table where all the expenses will be displayed. Add the following code below the form:

<table class="table-auto mb-4">
  <thead>
    <tr>
      <th class="px-4 py-2">Name</th>
      <th class="px-4 py-2">Amount</th>
      <th class="px-4 py-2">Date</th>
      <th class="px-4 py-2"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Example Expense</td>
      <td class="border px-4 py-2">$100.00</td>
      <td class="border px-4 py-2">2021-07-01</td>
      <td class="border px-4 py-2">
        <button
          class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="button"
        >
          Delete
        </button>
      </td>
    </tr>
  </tbody>
</table>

In this code, we've created a table with columns for the expense name, amount, date, and a delete button.

Step 4: Add JavaScript functionality

Finally, let's add some JavaScript code to make our expense tracker functional. Add the following code at the bottom of your HTML file, just before the closing body tag:

<script>
  const form = document.querySelector('form');
  const table = document.querySelector('table tbody');

  form.addEventListener('submit', (event) => {
    event.preventDefault();

    const name = document.querySelector('#expense-name').value;
    const amount = document.querySelector('#expense-amount').value;
    const date = document.querySelector('#expense-date').value;

    const row = `
      <tr>
        <td class="border px-4 py-2">${name}</td>
        <td class="border px-4 py-2">$${amount}</td>
        <td class="border px-4 py-2">${date}</td>
        <td class="border px-4 py-2">
          <button
            class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            type="button"
          >
            Delete
          </button>
        </td>
      </tr>
    `;

    table.insertAdjacentHTML('beforeend', row);
  });
</script>

In this code, we've added an event listener to the form that listens for the submit event. When the form is submitted, we grab the values from the input fields and create a new row in the table with the expense information. We've also added a delete button to each row, although it doesn't currently do anything.

Step 5: Customize the design

Now that we have the basic functionality in place, we can start customizing the design using Tailwind CSS. Try experimenting with different colors, fonts, and spacing to create a design that suits your needs.

Conclusion

In this tutorial, we've shown you how to create a simple expense tracker using Tailwind CSS. With Tailwind, you can quickly create a responsive and customizable user interface without having to write custom CSS code. We hope this tutorial has been helpful and that you're inspired to create your own Tailwind-powered projects!