Hi there! So today, I’m super excited to share a fun little project a Mini Random Color Generator. This project lets you generate random colors, displays them in a “color box,” and shows the RGB code. The best part we’re using Tailwind CSS for styling and JavaScript for functionality. Let’s dive right in!
- There’s a box that starts with a placeholder text, like “Color Box.”
- Below it, there’s a button labeled Generate Color.
- When you click the button, the box changes to a random color, and the RGB value of the color is displayed as text inside the box.
- Exploring DOM manipulation (a.k.a. how JavaScript can interact with your webpage).
- Getting familiar with JavaScript math functions.
- Learning Tailwind CSS to style your project without writing custom CSS.
HTML and Tailwind: Building the Skeleton
code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color Generator</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-500 via-pink-500 to-red-500">
<div class="flex flex-col items-center space-y-5 p-10 bg-white rounded-lg shadow-lg transform transition duration-300 hover:scale-105">
<!-- Color Box -->
<div
class="box w-[150px] h-[150px] rounded-lg shadow-md border-2 border-gray-200 flex items-center justify-center text-gray-700 text-lg font-semibold">
Color Box
</div>
<!-- Button -->
<button
onclick="GetColor()"
class="px-5 py-3 bg-indigo-600 text-white rounded-lg shadow-lg transform transition hover:bg-indigo-700 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-indigo-300">
Generate Color
</button>
</div>
<script>
// JavaScript goes here
</script>
</body>
</html>
Key Notes:
- Tailwind CSS: We’re using a Tailwind gradient background for the body (
bg-gradient-to-r from-purple-500 via-pink-500 to-red-500
). The button and box use other utilities for rounded corners, shadows, hover effects, and more. - Responsive Design: Flexbox makes sure everything stays centered, even on different screen sizes.
- Dynamic Classes: Tailwind lets us use interactive classes like
hover:scale-110
, which smoothly scales up the button when hovered.
JavaScript: Adding Functionality
The magic happens here. Let’s break down the script:
codefunction GetColor() {
// Generate random RGB values
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
// Convert values to a CSS-compatible RGB string
const rgb = `rgb(${r}, ${g}, ${b})`;
// Select the box element
const box = document.querySelector(".box");
// Update box background color and text
box.style.backgroundColor = rgb;
box.textContent = rgb;
}
Key Concepts:
- Random Numbers:
Math.random()
generates a random decimal between 0 and 1.- We multiply it by 256 (the range of RGB values) and use
Math.floor()
to round down.
- DOM Manipulation:
document.querySelector(".box")
fetches the color box from the DOM.box.style.backgroundColor = rgb
changes the box’s background color.box.textContent = rgb
updates the text inside the box with the new RGB value.
- RGB Format:
- The generated random values are combined into a string like
rgb(123, 45, 67)
.
- The generated random values are combined into a string like
Full Code:
Here’s the entire code in one go:
code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color Generator</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-500 via-pink-500 to-red-500">
<div class="flex flex-col items-center space-y-5 p-10 bg-white rounded-lg shadow-lg transform transition duration-300 hover:scale-105">
<div
class="box w-[150px] h-[150px] rounded-lg shadow-md border-2 border-gray-200 flex items-center justify-center text-gray-700 text-lg font-semibold">
Color Box
</div>
<button
onclick="GetColor()"
class="px-5 py-3 bg-indigo-600 text-white rounded-lg shadow-lg transform transition hover:bg-indigo-700 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-indigo-300">
Generate Color
</button>
</div>
<script>
function GetColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
const rgb = `rgb(${r}, ${g}, ${b})`;
const box = document.querySelector(".box");
box.style.backgroundColor = rgb;
box.textContent = rgb;
}
</script>
</body>
</html>
If you need a compiler to run the result, click here and see view the output instantly.
Why Is This Cool?
- Instant Feedback: Clicking the button changes the box’s color and displays its RGB code instantly.
- Interactive Learning: You practice Tailwind CSS and JavaScript while seeing results visually.
- Customizable: Want bigger buttons, rounded corners, or gradient text? Tailwind has you covered.
Hope you enjoyed building this as much as I did explaining it. If you have any questions or tweaks, feel free to share. Happy coding!