How to Create a Simple Color Flipper using JavaScript HTML and CSS

E-CODEC August 29, 2021
Color Flipper


Hello friends, today in this blog tutorial we learn how to create a simple color flipper using JavaScript HTML and CSS. In previous blog tutorial we learn how to make a contact us page in HTML and CSS.

So here is the code and my work. I hope you are love this simple color flipper using vanilla JavaScript and share with your friends too. So let's start learning a color flipper using JavaScript from scratch,  So let's start...

In this tutorial you will learn to create a simple color flipper using JavaScript coding, subscribe E-CODEC channel to watch more like videos on website designing tutorials for beginners.

I hope you enjoyed this video tutorial. If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below and subscribe my channel. Thank you..

Video Tutorial


STEP 1: Open any code editor

STEP 2: Create a index.html file with html extension

Create a new file index.html, Here is the code

 <!DOCTYPE html>  
 <html>  
 <head>  
      <meta charset="utf-8">  
      <title>Simple JavaScript Project for Beginners - Color Flipper (HTML, CSS & JS)</title>  
      <link rel="stylesheet" type="text/css" href="style.css">  
 </head>  
 <body>  
 <div class="container">  
      <h1>Background Color : <span class="color"></span></h1>  
      <button id="btn">Click Me</button>  
 </div>  
 <script type="text/javascript" src="main.js"></script>  
 </body>  
 </html>

STEP 3: Create a style.css file with CSS extension

Create a new file style.css, Here is the code

 *{  
                padding: 0;  
                margin: 0;  
                box-sizing: border-box;  
           }  
           body{  
                width: 100%;  
                min-height: 100vh;  
                display: flex;  
                align-items: center;  
                flex-direction: column;  
                justify-content: center;  
           }  
           .container{  
                text-align: center;  
           }  
           h1{  
                background: dimgray;  
                padding: 10px 30px;  
                color: #fff;  
                border-radius: 10px;  
           }  
           #btn{  
                padding: 15px 30px;  
                color: #fff;  
                outline: none;  
                border: 0;  
                cursor: pointer;  
                background: dimgray;  
                margin-top: 20px;  
                font-size: 1.5em;  
                letter-spacing: 3px;  
           }

STEP 4: Create a main.js file with js extension

Create a new filemain.js, Here is the code

 const colorsArray = ["red","green","yellow","pink","purple"];  
      const btn = document.getElementById('btn');  
      const color = document.querySelector('.color');  
      btn.addEventListener("click",function(){  
           const randomNumber = getRandomNumber();  
           document.body.style.backgroundColor = colorsArray[randomNumber];  
           color.textContent = colorsArray[randomNumber];  
           //innerHTML  
      });  
      function getRandomNumber(){  
           return Math.floor(Math.random()*colorsArray.length);  
      }

I hope you enjoyed this video tutorial. If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below and subscribe my channel on YouTube. Thank you..

Post a Comment

0 Comments