Js beginners projects  
Tags: javascript, projects, beginners
Published: 2021-07-05 00:35:54

#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
```html
<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**
```css
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
```javascript
//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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
* [Mdn math.floor()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)

***good luck***