Generate Random Colors Using JavaScript

JavaScript
Written by Rick Bowen (JavaScript)

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!

  1. There’s a box that starts with a placeholder text, like “Color Box.”
  2. Below it, there’s a button labeled Generate Color.
  3. 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.
  4. Exploring DOM manipulation (a.k.a. how JavaScript can interact with your webpage).
  5. Getting familiar with JavaScript math functions.
  6. 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:

  1. 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.
  2. Responsive Design: Flexbox makes sure everything stays centered, even on different screen sizes.
  3. 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:

  1. 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.
  2. 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.
  3. RGB Format:
    • The generated random values are combined into a string like rgb(123, 45, 67).

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!

Related blog posts

Load more
Know More About FSIBLOG
Useful Pages

2024 © FSIBLOG. All Rights Reserved.