Js beginners projects

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 then Math.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

Mdn math.random()

Mdn math.floor()

good luck