introduction
Hi
we'll build some simple and friendly beginners projects using Js and we'll learn more about the DOM and some Js basics.
those projects will be like a series of projects, in every post I'll talk about the project and a way of how we will get to our needed output.
random background
let's start with the easiest one, in this project we want to generate a random background color of our html body
element, we need to add a button
that changes the background color whenever we click on it.
html and css
this is optional, you can use the styles you want, you only need to remember the classes or
ids so you can select your elements with Js
if you want to follow me here is my body code
<main>
<p>
The Color Used Is <br><span class="color">rgb(255, 255, 255)</span>
</p>
<button class="change">
Generate
</button>
</main>
inside the span add the initial color of the body to make it appear when we opened the beowser
the actual idea is that whenever the user click on the button it will change the background and will show it's value inside the span
the css part
main{
text-align: center;
font-family: sans-serif;
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
p{
border: 3px solid Black;
margin-bottom: 2rem;
padding: 1rem;
}
.change{
padding: .7em 1em;
font: bold 1.2rem sans-serif;
border: 3px solid #000;
cursor: pointer;
}
.color{
font-weight: bold;
text-decoration: underline;
}
this will create everything in the center of our web page
next we have add some functionality to our idea, take a moment and thing of a way to get random colors and and add them to the body whenever we click on the button.
Javascript
here we back ...
this is my code
you may think or write a different code ... it doesn't matter ... it only have to make the job done
//select the span
const colorName = document.querySelector(".color");
//select the button
const changeBtn = document.querySelector(".change")
//create the function
function changeColor() {
//creating three random numbers
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
//create a template literal string rgb color based on the previous numbers and store it on a color variable
let color = `rgb(${r}, ${g}, ${b})`
//change the body's background color to the new generated color and also show it the span text content
document.body.style.backgroundColor = color;
colorName.textContent = color
}
//we call the changeColor function every time we click on the button
changeBtn.addEventListener("click", changeColor)
we used the rgb
css function to create color, we know that this function accept 3 parameters as numbers between 0 and 255
so we created the 3 variables with different values using
-
Math.random() * 256 : since
Math.random()
returns number between 0 and 1 but without including 1 thenMath.random() * 256
will return a number between 0 and 256 without including 256 but it will be a decimal number here it comes the - Math.floor() : this function returns the largest integer less than or equal to a given number. we have the three numbers so we will create a random rgb() color and apply it to the body
external resources
good luck
Top comments (0)