creating random colors from 4 colors

 //js


const red = "#" + "ff0000";

const blue = "#" + "0000ff";

const green = "#" + "6FFF00";

const yellow = "#" + "ffff00";

const pink = "#" + "ffc0cb";


//generate random number

const randomColorGenerated=()=>{

  var random = Math.floor(Math.random() * 4) + 1;

  //*4 means four numbers not multiplication.

  console.log(random);

   

  var newResult = pink;//initiallizing newResult


  if (random == 1) {

    console.log("first color");

    return newResult=yellow;

  } 

  if(random == 2){

    console.log("second color");

    return newResult=blue;

  }

  if(random == 3){

    console.log("third color");

    return newResult=red;

  }

  else {

    console.log("fourth color");

    return newResult=green;

  }

};

const getVal = randomColorGenerated();

console.log("getval is "+ getVal);


const element = document.getElementById("msg"); 

element.style.background = getVal;

setInterval(randomColorGenerated, 1000);



//html

<div id="msg">


  <p id="heading">

    Hi, How's you doin?


  </p>


</div>


//css

#msg {

  border: 4px solid black;

  height: 110px;

  width: 10%;

  font-size: 20px;

  margin: auto;

  padding: 50px;

  color: white;

  font-family: verdana;

  border-radius: 10px;

}


#heading {

  text-align: center;

  /*   vertical-align: middle; */

}

Comments

Popular posts from this blog

Generative AI Model for text summarization

maintext/ react

Resume description for AI/ ML Developer