Sallu Codes

Color flipper using Javascript

Muhammad Salman Ali's photo
Muhammad Salman Ali
·

1 min read

<!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>Color Flipper</title>

</head>
<body>

    <nav>
     <div class = "nav-center">
         <h4> Color flipper </h4>
         <ul class = "nav-links">
         <li>
             <a href ="index.html">Simple</a>
         </li>
         <li>
            <a href ="index.html">Hex</a>
        </li>
        </ul>
     </div>
    </nav>
    <main>
     <div class = "container">
         <h2>background color : 
         <span class = "color">
            #f1f5f8    
         </span>

         </h2>
         <button class = "btn" id = "btn" >Click Me</button>
     </div>
      </main>  
    <script src="hex.js"></script>
</body>

</html>

<script>
const colors =["green" , "red" , "rgba(133, 122, 200)", "#f15025"];
const btn = document.getElementById("btn");
const color = document.querySelector(".color");


btn.addEventListener('click', () => 
{

    // get 
    const randomnumber = getRandomNumber();
    console.log(randomnumber);
    document.body.style.backgroundColor = colors[randomnumber];
    color.textContent = colors[randomnumber];

});

function getRandomNumber(){

    return Math.floor(Math.random()* colors.length);

}
</script>

The content inside the main element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

JavaScriptHTML5CSSWeb Development