Math.floor & Math.random - Creating Color Hex

Thank you for visiting 😘😘😘

ummmm. sorry, 😌😌 this's actually my first article

i'll be creating color Hex using Function, Math.floor and Math.random

umm, your HTML Code should look like this

```<div class="container"> <div class="row max-height align-items-center"> <div class="col-10 col-md-6 mx-auto text-center"> <h1 class=text-uppercase>hex color :<span id="hex-value"></span></h1> <a href="#" id="btn" class="btn btn-secondary text-uppercase my-2">click me</a> </div> </div> </div>


then to the main script code... please try and include query to your HTML 🙏
now to the code

we've to create variables that will store:
a. our button, the one with the of "btn"
b. the body of our homepage.. yes body like "body{}"... we'll use it to change the background color of our homepage
c. store Hex values
d. variable that will display our hex values


```(function() {
    const button = document.querySelector('#btn')
    const body = document.querySelector('body')
    const hexValues = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']
    const value = document.querySelector('#hex-value')
} )()

Now it's time to add event listener to our button

```(function() { const button = document.querySelector('#btn') const body = document.querySelector('body') const hexValues = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'] const value = document.querySelector('#hex-value')

button.addEventListener('click', changeHex)

} )()


now we've to create for loop that will increase out hex to 6 codes and random select them

```(function() {
    const button = document.querySelector('#btn')
    const body = document.querySelector('body')
    const hexValues = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']
    const value = document.querySelector('#hex-value')

    button.addEventListener('click', changeHex)

    function changeHex(){
        let hex = '#';

        for (let i = 0; i < 6; i++){
            const index = Math.floor(Math.random()*hexValues.length)
            hex += hexValues[index]
        }

    }
} )()

now we've to display the value of our Hex color codes and implement the background color change

button.addEventListener('click', changeHex)

function changeHex(){
    let hex = '#';

    for (let i = 0; i < 6; i++){
        const index = Math.floor(Math.random()*hexValues.length)
        hex += hexValues[index]
    }
    value.textContent = hex
    body.style.backgroundColor = hex

}

} )() ```

devjoseph🔥

devjoseph🔥

Math.floor & Math.random - Creating Color Hex