DOM Manipulation: Create a page with a square box of size 300x300 on the page which will be red initially, upon clicking the red box it should change the color to yellow and the size should be doubled<!DOCTYPE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Box</title>
</head>
<body>
    <div class="box" ondbclick></div>
    <script src="index.js"></script>
</body>
</html>

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.target{
    height: 600px;
    width: 600px;
    background-color: yellow;
}
.box{
    height: 300px;
    width: 300px;
     background-color: red;
  }

const box = document.querySelector(".box");
box.addEventListener('click', function(){

        if(box.classList=="target"){
            box.classList.remove("target");
            box.classList.add("box");
        }
       else{
        box.classList.add("target");
        box.classList.remove("box");
       }
});

after click change color yellow and size double

Again click it to change the previous color and size.

//In the project click the box to change color and size';

DOM Manipulation project

Subscribe to my newsletter

Afroj Mansoori

Afroj Mansoori