2X2 grid

index.js

@@ -1 +1,22 @@
-document.body.innerHTML = "Hello world!";
+// document.body.innerHTML = "Hello world!";
+
+let main = document.createElement('div');
+main.className = 'divContainer';
+document.body.appendChild(main);
+
+for(let i=0;i<2;i++) {
+    const rowDiv=document.createElement('div');
+    rowDiv.className = 'rowDivContainer'+i
+    main.appendChild(rowDiv);
+
+    for(let j=0;j<2;j++) {
+        const div=document.createElement('div');
+        //div.innerHTML = 'red';
+        div.className='divElem';
+        div.addEventListener("click",(e)=>{
+            e.target.className='colorChange';
+            console.log('e------->',e.target.innerHTML);
+        });
+        rowDiv.appendChild(div);
+    }
+}

style.css

@@ -0,0 +1,29 @@
+.divContainer{
+    display: flex;
+    flex-direction: column;
+}
+.rowDivContainer0{
+    display: flex;
+    border: 1px solid green;
+    width: 50px;
+
+    justify-content: space-around;
+}
+.rowDivContainer1{
+    display: flex;
+    border: 1px solid green;
+    width: 50px;
+    justify-content: space-around;
+}
+
+.divElem{
+    height: 30px;
+    width: 30px;
+
+    /*border: solid green;*/
+}
+.colorChange{
+    background-color: red;
+    height: 30px;
+    width: 30px;
+}