Create stunning backgrounds with Vanilla JS!

Find Saas Video Reviews — it's free

Saas Video Reviews

Makeup

Personal Care

Home Generator Create stunning backgrounds with Vanilla JS!

Create stunning backgrounds with Vanilla JS!

Introduction
Setting up the Website
- Installing Bootstrap
- Adding a Navbar
Changing the Background Color
- Understanding Hex Values
- Generating Random Hex Values
- Creating a Function to Get New Colors
Adding a Button
- Using Bootstrap Buttons
- Hooking up the Button to the Function
Conclusion

Building a Color Picker Website

Welcome back! In today's challenge, we're going to build a website that changes color every time we reload it. We'll also add a button that allows us to force a new color with a single click. We'll even display the hexadecimal value of the color to the user. So let's dive in and get started!

Setting up the Website

The first step is to set up our website. We'll be using Visual Studio Code as our editor and Bootstrap for the styling. Make sure you have these tools installed before we begin.

To install Bootstrap, we'll use a CDN (Content Delivery Network). Open your index.html file and add the following HTML code:

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">Color Picker</a>
    </div>
  </nav>
</body>

Great! Now if you reload the webpage, you should see a simple navigation bar with the title "Color Picker".

Changing the Background Color

Next, we want to make sure we can change the background color dynamically. To do this, we'll write some JavaScript code.

First, add a script tag to your index.html file and insert the following code:

<script>
  document.body.style.background = "#000000";
</script>

This code sets the background color of the document's body to black (#000000). Reload the page to see the change.

Now let's understand how hex values for colors are formed. Hex codes are three-byte hexadecimal values used in HTML and CSS. They are represented by six digits (numbers 0-9 or letters A-F) preceded by a hashtag (#). We need to ensure that our hex values contain exactly six digits and use valid characters.

To generate random hex values, we'll use JavaScript's Math.random() function. Check the console to see how this function works.

console.log(Math.random());

To convert the random number to a hex value, we'll use the toString() function with a base of 16:

console.log(Math.random().toString(16));

This code gives us a random hex value every time we refresh the page. However, we need to extract the first six characters to ensure a valid hex value.

let randomHex = Math.random().toString(16);
let color = "#" + randomHex.substring(2, 8);
console.log(color);

Now, every time we refresh the page, we get a new random hex value.

Adding a Button

To make the color change more interactive, let's add a button that triggers the generation of a new color. We'll use Bootstrap buttons for this.

Find a suitable button style from the Bootstrap documentation and add the button code to your HTML:

<button class="btn btn-primary" id="getColor">Get Color</button>

Now let's hook up the button to our getNewColor function. Add the following JavaScript code:

document.getElementById("getColor").addEventListener("click", getNewColor);

This code listens for a click event on the button with the id "getColor" and calls the getNewColor function when clicked.

Conclusion

And that's it! You've successfully built a color picker website that changes the background color every time the page is loaded, and also allows the user to force a new color with the click of a button.

Feel free to experiment with different color palettes and button styles from Bootstrap to customize your website further.

If you have any questions or need further assistance, please leave a comment below.

Thank you for reading!

Are you spending too much time on makeup and daily care?

Saas Video Reviews: 1M+
Makeup: 5M+
Personal care: 800K+

WHY YOU SHOULD CHOOSE SaasVideoReviews

SaasVideoReviews has the world's largest selection of Saas Video Reviews to choose from, and each Saas Video Reviews has a large number of Saas Video Reviews, so you can choose Saas Video Reviews for Saas Video Reviews!

Browse More Content

Convert

Maker

Editor

Analyzer

Calculator

sample

Checker

Detector

Scrape

Summarize

Optimizer