diff --git a/cardStyle.css b/cardStyle.css
index 4e024c3..2fd3dfd 100644
--- a/cardStyle.css
+++ b/cardStyle.css
@@ -88,12 +88,13 @@ nav ul a {
 	margin: 15px 0;
 }
 
-#image{
+#image {
 	margin-top: 30px;
 }
+
 .body-div2 {
 	display: flex;
-	flex-direction: row ;
+	flex-direction: row;
 	/* justify-content: space-between; */
 	float: left;
 }
@@ -159,14 +160,15 @@ h2 {
 	font-weight: normal;
 	font-size: 24px;
 	line-height: 33px;
-	z-index: 9; display : flex;
+	z-index: 9;
+	display: flex;
 	align-items: center;
 	color: #000000;
 	display: flex;
 }
 
 input[type="text"] {
-	
+
 	padding: 0px 0px 0px 21px;
 	width: 884px;
 	height: 49px;
@@ -179,7 +181,7 @@ input[type="text"] {
 }
 
 textarea {
-	margin:14px 0px 0px 0px;
+	margin: 14px 0px 0px 0px;
 	padding: 12px 0px 0px 20px;
 	width: 884px;
 	height: 232px;
@@ -201,18 +203,18 @@ textarea {
 	color: #828282;
 }
 
-#post{
-font-family: Nunito;
-font-style: normal;
-font-weight: 600;
-font-size: 18px;
-line-height: 25px;
-width: 100px;
-height: 39px;
-margin: 71px 64px 103px 784px;
-align-items: center;
-text-align: center;
-background: #6C63FF;
-border-radius: 4px;
-color: #FFFFFF;
+#post {
+	font-family: Nunito;
+	font-style: normal;
+	font-weight: 600;
+	font-size: 18px;
+	line-height: 25px;
+	width: 100px;
+	height: 39px;
+	margin: 71px 64px 103px 784px;
+	align-items: center;
+	text-align: center;
+	background: #6C63FF;
+	border-radius: 4px;
+	color: #FFFFFF;
 }
\ No newline at end of file
diff --git a/displayCard.html b/displayCard.html
index a8ee226..85986a9 100644
--- a/displayCard.html
+++ b/displayCard.html
@@ -1,33 +1,35 @@
 <!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="cardStyle.css">
     <title>Document</title>
 </head>
+
 <body>
     <nav>
         <img src="/assets/logo.svg" alt="logo" />
         <ul>
             <li> <a href="/displayCard.html">My Blogs</a></li>
             <li> <a href="/displayCard.html">Login</a></li>
-            <li> <a href="/displayCard.html">Sign Up</a></li> 
+            <li> <a href="/displayCard.html">Sign Up</a></li>
         </ul>
     </nav>
     <div class="body-div1">
         <div>Your Blog Posts</div>
-        <a ><button class="button" id="addBlog" ><i class="fas fa-plus-circle"></i>Add New Post</button></a>  
+        <a><button class="button" id="addBlog"><i class="fas fa-plus-circle"></i>Add New Post</button></a>
     </div>
     <div class="body-div2">
         <div class="article-card" id="flashcard">
             <!-- <img src="./assets/java card image.svg" alt=""> -->
-                <div class="card-text" id="card-text">
-                    <!-- <h1 id="blog-title">sda</h1> -->
-                    <!-- <p id="blog-description">da</p> -->
-                    <!-- <p>Posted on</p> -->
-                </div>
-                  <!-- <div class="card-buttons">
+            <div class="card-text" id="card-text">
+                <!-- <h1 id="blog-title">sda</h1> -->
+                <!-- <p id="blog-description">da</p> -->
+                <!-- <p>Posted on</p> -->
+            </div>
+            <!-- <div class="card-buttons">
                     <a><button type="button" id="edit">EDIT</button></a> <span>|</span><a ><button id="delete">DELETE</button></a>
                 </div> -->
         </div>
@@ -36,13 +38,14 @@
         <button id="close"> <img id="close" src="./assets/close-button.svg"></button>
         <img id="rect" src=./assets/rect.svg>
         <h2>Your Post</h2>
-        <div id="card" >
-            <input type="hidden" name="blogId" value="" /> 
-            <input id="title" name="title" value="" placeholder="Title" type="text"/>
+        <div id="card">
+            <input type="hidden" name="blogId" value="" />
+            <input id="title" name="title" value="" placeholder="Title" type="text" />
             <textarea id="detail" name="message" placeholder="Description" value=""></textarea>
-            <button id="post" type="submit" >POST</button>
+            <button id="post" type="submit">POST</button>
         </div>
     </div>
 </body>
 <script src="/script.js"></script>
+
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index e60691b..0267343 100644
--- a/script.js
+++ b/script.js
@@ -1 +1,45 @@
 /* Fill your code*/
+class Blog {
+    constuctor(title, detail) {
+        this.title = title;
+        this.detail = detail;
+    }
+    addTitle = () => {
+        var title_card = document.createElement('h1');
+        title_card.setAttribute("id", "blog-title");
+        document.getElementById('card-text').appendChild(title_card);
+        title_card.innerHTML += this.title;
+    }
+    addDescription = () => {
+        var detail_card = document.createElement('p');
+        detail_card.setAttribute("id", "blog-detail");
+        document.getElementById('card-text').appendChild(detail_card);
+        detail_card.innerHTML += this.detail;
+    }
+
+}
+
+const addPost = () => {
+    console.log("was here")
+    const unhide = document.getElementById("popupContact")
+    unhide.style.display = "flex"
+}
+const close = () => {
+    const unhide = document.getElementById("popupContact")
+    unhide.style.display = "none"
+}
+const addBlog = () => {
+    const obj = new Blog
+    obj.title = document.getElementById("title").value
+    obj.detail = document.getElementById("detail").value
+    if ((obj.title != "") && (obj.detail != "")) {
+        obj.addTitle()
+        obj.addDescription()
+    }
+    else alert("TITLE OR DESCRIPTION CANNOT BE EMPTY")
+}
+
+document.getElementById("addBlog").addEventListener("click", addPost)
+document.getElementById("close").addEventListener("click", close)
+document.getElementById("post").addEventListener("click", addBlog)
+
