Beginner•Web Development

Random Quote Generator

Build a beautiful Random Quote Generator using only HTML, CSS, and vanilla JavaScript. Features a curated quote library, smooth fade animations, dynamic background gradients, a copy-to-clipboard button, and a one-click Tweet button — no frameworks, no backend required.

📚Scroll down to see free videos & courses ↓

View on GitHub

What You Will Build

A sleek, responsive quote card app with a glassmorphism UI set against an animated gradient background with floating blobs. It displays a random quote with the author's name, ensures the same quote never repeats back-to-back, smoothly fades text in and out on each refresh, shifts the background to a new gradient theme with every quote, and lets users copy the quote to their clipboard (with a toast notification) or share it directly on X (Twitter).

Concepts You'll Learn

Structuring a single-page UI with semantic HTML5 elements
Storing quote data as a JavaScript array of objects
Selecting a random item from an array and preventing immediate repeats
Manipulating the DOM — reading and updating textContent dynamically
Adding and removing CSS classes from JavaScript to trigger animations
Using setTimeout to sequence a fade-out → content swap → fade-in effect
Applying glassmorphism with backdrop-filter and semi-transparent backgrounds
Creating animated floating blobs with CSS keyframes and blur filters
Dynamically updating CSS custom properties and inline styles for colour themes
Copy-to-clipboard using the modern Clipboard API with a legacy execCommand fallback
Building a pre-filled Twitter/X share link with encodeURIComponent
Showing and auto-hiding a toast notification with CSS transitions
Responsive design with Flexbox and media queries for mobile devices
Using CSS custom properties (variables) for a consistent design token system