From 00629d2aef87e969eebc28b632f3b5a1c36bae1d Mon Sep 17 00:00:00 2001
From: Rup Chitrak <rchitrak10@gmail.com>
Date: Mon, 11 Jun 2018 15:45:38 +0530
Subject: [PATCH] 2X2 grid

---
 index.js  | 23 ++++++++++++++++++++++-
 style.css | 29 +++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 32f98ec..ec9aa56 100644
--- a/index.js
+++ b/index.js
@@ -1 +1,22 @@
-document.body.innerHTML = "Hello world!";
\ No newline at end of file
+// 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);
+    }
+}
diff --git a/style.css b/style.css
index e69de29..6cfe894 100644
--- a/style.css
+++ b/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;
+}
\ No newline at end of file