Program 5

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #list{
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
       
        #list div{
            background-color: aquamarine;
            border-radius: 10px;
            border: solid;
            height: 200px;
            width: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
       
    </style>

</head>
<body>
   
    <div id="list">
       
    </div>
    <br/>
    <button onclick="Add();">Add</button>
</body>
<script>

    let list=document.getElementById('list');

    function Add(){
       
        for(let i=1;i<=10;i++){
            let div=`<div>
            ${i}
        </div>`;
           list.innerHTML=list.innerHTML+div;
        }
       
        }
</script>
</html>

Comments

Post a Comment