Improving the UI & UX of My Quote Generator✨🎨

Improving the Frontend: UI & UX

Hey everyone!,
This is the second post in my quote generator project series. In this one, I’ll talk about why and how I updated the UI and UX on the frontend to make the project feel more appealing and realistic.

Why I Had to Change the UI

Personally, an unnatural and featureless UI completely repels me.
And honestly, you DO judge a book by its cover — I definitely do. I didn’t want my project’s “cover” to be something that makes people close the tab instantly.

That said, functionality matters too. So instead of focusing only on looks or only on logic, I decided to pair both together.

The goal was simple:

Make the app enjoyable to use and realistic enough to feel like a real product.

What I Decided to Improve

I started adding simple CSS styles and logical frontend features — nothing too crazy, but enough to make the project feel alive.

Here’s what I added:

• Dark / Light Mode
• Dynamic Backgrounds
• Smooth Animations
• Better layout
• Copy Quote Button
• Category-Based Quotes

🔁 Dark / Light Mode: The Toggle Logic

One of the most important pieces of logic I worked on was the dark/light mode toggle.
It’s a small feature, but it completely changes how the app feels.

Here’s the JavaScript behind it:

function toggleMode() {
  darkMode = !darkMode;
  document.body.classList.toggle("dark-mode");

  let btn = document.getElementById("modeToggle");
  btn.classList.toggle("active");
  let ball = document.querySelector(".toggle-ball");

  ball.textContent = darkMode ? "🌞" : "🌙";

  document.body.style.backgroundColor = darkMode ? "#121212" : "#49B587";
}

The logic is simple:

• Toggle a dark-mode class on the body
• Update the button state
• Switch icons (🌞 / 🌙)
• Dynamically change background colors

Nothing too complex — but very effective.

🌗 Before vs After: Toggle in Action

Visually, this made a huge difference.

Light Mode (Before):

Dark Mode (After):

This single feature alone made the app feel far more modern and usable.

🎯 What I Took Away From This

Working on this frontend taught me a lot about the ins and outs of CSS — layouts, animations, theming, and how small UI details can completely change user experience.

These are skills that I know will come in handy in pretty much any future project I work on.

In the next post, I’ll move away from UI and dive into the backend side of this project — APIs, databases, and making this app truly full stack.

Stay tuned!🚀