This content originally appeared on DEV Community and was authored by Alfred Nwanokwai
Generating random colors with JavaScript can be a bit intimidating, especially to new developers. in this post, I will walk you through how you can generate random colors with JavaScript.
- create an index.html file
create an index.html file, and copy and paste the code snippet below into the index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate random color</title>
<style ="text/css">
body {
display: grid;
place-items: center;
height: 100vh;
}
#button {
height: 50px;
width: 100px;
}
</style>
</head>
<body>
<button id=" button">Click me</button>
<script>
const button = document.getElementById("button");
button.addEventListener("click", () => {
const generateRandomColor = `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
document.body.style = `background-color: ${generateRandomColor}`;
})
</script>
</body>
</html>
Code ExplanationCode Explanation
- the HTML code below will create a button element on the HTML document.
<button id="button">Click me</button>
- I added a little styling to it to place the button element in the center of the HTML document
body {
display: grid;
place-items: center;
height: 100vh;
}
#button {
height: 50px;
width: 100px;
}
Here is the
JavaScript code that does the magic.
firstly, I search through the Dom tree to retrieve a button element with an id of "button", then I stored it in a variable called button.
then, I added an event listener to the button, and I listen to a click event.
then the code generates a random color each time the button is clicked.
then I assigned the color to the background.
const button = document.getElementById("button");
button.addEventListener("click", () => {
const generateRandomColor = `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
document.body.style = `background-color: ${generateRandomColor}`;
})
thank you for reading. please leave a comment below and share the post with your friends who are also learning JavaScript. don't forget to follow me for more useful content.
This content originally appeared on DEV Community and was authored by Alfred Nwanokwai
Alfred Nwanokwai | Sciencx (2023-05-20T07:35:04+00:00) Learn How to Generate Random Colors with JavaScript Like an Expert. Retrieved from https://www.scien.cx/2023/05/20/learn-how-to-generate-random-colors-with-javascript-like-an-expert/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.