Generate Random Background Color JavaScript

Generate Random Background Color JavaScript
Code Snippet:JavaScript - Random RGB Color
Author: Pyxofy
Published: March 3, 2024
Last Updated: March 4, 2024
Downloads: 273
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript code enhances web design by allowing you to generate random background color. When you click the designated button, the script employs math functions to calculate random RGB values, creating a vibrant and dynamic background for your webpage. This simple yet effective feature adds an engaging visual element to your site, making it more lively and interactive.

You can utilize this code in web development projects, specifically to add interactive elements to websites. One major benefit is enhancing user engagement by dynamically changing background colors, making the site more visually appealing and lively.

How to Generate Random Background Color Using JavaScript

1. Start by creating an HTML file with a container div, an h1 element, an h2 element to display the RGB color code, and a button to trigger the color change.

<div class="container">
  <h1>Ramdom Color</h1>
  <h2></h2>
  <button>Click to Change Background Color</button>
</div>

2. Define the styles for your container, heading elements, and button in the CSS file. Customize the dimensions, fonts, and appearance to suit your design preferences.

/* Center shapes */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: Arial, Helvetica, sans-serif;
  transition: background-color 0.5s;
}


/* Set container and optional light gray border */
.container {
  width: 500px;
  height: 500px;
  border: 5px solid lightgray;
  background: transparent;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 1px;
}

h1,
h2 {
  text-shadow: 0 0 2px white, 0 0 25px white;
}

h2 {
  height: 20px;
  margin: 50px;
  font-size: 30px;
}

button {
  width: 450px;
  padding: 20px;
  background: #0d7df5;
  color: white;
  font-size: 20px;
  font-weight: bold;
  border-radius: 50px;
  border: 3px solid lightgray;
}

3. Now, let’s dive into the JavaScript code. This script utilizes the DOM to select elements and dynamically changes the background color when the button is clicked.

const container = document.querySelector(".container");
const colorCode = document.querySelector("h2");
const button = document.querySelector("button");

function generateRandomColor() {
  const red = Math.floor(Math.random() * 256);
  const green = Math.floor(Math.random() * 256);
  const blue = Math.floor(Math.random() * 256);

  container.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;

 // document.body.style.backgroundColor = `rgba(${red}, ${green}, ${blue}, 0.5)`;

  colorCode.textContent = `rgb(${red}, ${green}, ${blue})`;
}

button.addEventListener("click", generateRandomColor);

Feel free to customize the code further or integrate it into different sections of your site to create a visually engaging user experience. Experiment with colors and styles to make it uniquely yours!

That’s all! hopefully, you have successfully created Generate Random Background Color Javascript. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X