Random Color Generator

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1>generate a random color</h1>
<button>Click me</button>
<div>This is your new color</div>
  <script src="index.js"></script>
</body>

</html>

body{
    text-align: center;
}

div{
    height: 100px;
    width: 1000px;
    border: 1px solid black;
    margin: auto;
}




let btn = document.querySelector("button");

btn.addEventListener("click", function(){
    let h3 = document.querySelector("h1");
    let randomColor = getRandomColor();
    h3.innerText = randomColor;

    let div = document.querySelector("div")
    div.style.backgroundColor = randomColor;

    console.log("color updated");
})

function getRandomColor(){
    let red = Math.floor(Math.random()*255)
    let Green = Math.floor(Math.random()*255)
    let Blue = Math.floor(Math.random()*255)
    let color = `rgb(${red}, ${Green}, ${Blue})`;
    return color
}




Comments

Post a Comment

Popular posts from this blog

form event second

<! DOCTYPE html > < html > < head >   < meta charset = "utf-8" >   < meta name = "viewport" content = "width=device-width" >   < title > replit </ title >   < link href = "style.css" rel = "stylesheet" type = "text/css" /> </ head > < body > < form action = "/action" >   < input placeholder = "User name" type = "text" id = "user" >   < input placeholder = "Password"   type = "password" id = "passw" >   < button > Register </ button > </ form >   < script src = "index.js" ></ script > </ body > </ html >   let form = document . querySelector ( "form" ) form . addEventListener ( "submit" , function (){ event . preventDefault () }) let user = document . querySelector ( "#user" ) us...
Read more

dom basic practice

<! DOCTYPE html > < html > < head >   < meta charset = "utf-8" >   < meta name = "viewport" content = "width=device-width" >   < title > replit </ title >   < link href = "style.css" rel = "stylesheet" type = "text/css" /> </ head > < body > < h1 > This is heading </ h1 > < div class = "box" ></ div >   < script src = "index.js" ></ script > </ body > </ html > body {     text-align : center ; } div {     height : 100px ;     width : 1000px ;     border : 1px solid black ;     margin : auto ; } let h1 = document . querySelector ( "h1" ) h1 . addEventListener ( "click" , function (){     console . log ( "h1 was clicked" ); }) let box = document . querySelector ( ".box" ) box . addEventListener ( "mouseenter" , function (){     console ...
Read more

string practice test

 how to find the length of string let a = "navjotsingh" let b = a.length console.log(`the length of ${a} is ${b}`) =========================================================================== let a = "navjotsingh" let b = a.length console.log(a[2]) ========================================================================= string method
Read more