QuickBill

Inspiration

My inspiration was the Apple Liquid Glass UI. Since I also enjoy space themes, I decided to mix both to create a unique, futuristic atmosphere for a retail tool.

What it does

QuickBill is a functional invoice system that:

• Adds item name, quantity, and unit price.
• Automatically calculates subtotal, tax (10%), and grand total.
• Features a dynamic invoice table with real-time updates.
• Generates a unique Invoice ID and current date automatically.
• Offers a print-friendly layout for professional PDF exports.
• Includes a one-click reset functionality.

Custom Features

• Dynamic Invoice Metadata: The system automatically generates a unique Invoice ID and captures the current date the moment the first item is added, mimicking a real-world retail database.

• Print-Optimized Engine: I developed a dedicated CSS print layer (@media print). This ensures that when the user exports the invoice to PDF, all UI elements like the video background and buttons are removed, leaving a clean, high-contrast document perfect for professional use.

How we built it

Built using HTML5, CSS3, and Vanilla JavaScript. My goal was to create an essential retail tool that is both highly functional and visually charming.

Challenges we ran into

The main challenge was balancing the CSS styling. I really wanted to go deep into decoration, but since the core of the hackathon is a simple invoice system, I decided to focus more on clean JavaScript logic and use the UI to enhance, not distract.

Accomplishments that we're proud of

I’m really proud of finishing this project! I built it purely for fun, and it was a great exercise. I believe every developer should take the time to code practical tools like this to stay sharp.

What we learned

I improved my front-end skills by researching and applying Liquid Glassmorphism techniques, learning how to handle complex transparency and blurs without losing performance.

The heart of the code

This is how I handle the real-time calculations and the dynamic UI updates:

// Function to update the invoice totals 
function updateTotals() {
    let subtotal = items.reduce((acc, item) => acc + (item.price * item.qty), 0);
    let tax = subtotal * 0.10;
    let total = subtotal + tax;

    document.getElementById('subtotal').innerText = `$${subtotal.toFixed(2)}`;
    document.getElementById('tax').innerText = `$${tax.toFixed(2)}`;
    document.getElementById('total').innerText = `$${total.toFixed(2)}`;
}

Built With

• css3
• html5
• javascript
• vanilla