ProGrad VITFED024

cardStyle.css

@@ -47,14 +47,14 @@ nav ul a {
 	cursor: pointer;
 }
 
-/* .fa-plus-circle {
+ .fa-plus-circle {
 	margin-right: 0.8em;
-} */
+} 
 
-/* .body-div1, .body-div2 {
+ .body-div1, .body-div2 {
 	margin-left: 150px;
 	margin-right: 150px;
-} */
+} 
 
 .body-div1 {
 	margin-top: 25px;
@@ -68,7 +68,7 @@ nav ul a {
 
 .article-card {
 	width: 320px;
-	margin: 30rem 0;
+	margin: 0rem 0;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
@@ -140,13 +140,13 @@ div#popupContact {
 	display: flex;
 	justify-content: flex-center;
 	align-items: center;
-	/* width: 920px; height : 572px; */
+	width: 920px; height : 572px;
 	padding: 108px 0px 0px 18px;
 	flex-direction: column;
 	border: 2px solid gray;
 	font-family: raleway;
 	background-color: #fff;
-	/* height: 572px; */
+	height: 572px;
 }
 
 h2 {

displayCard.html

@@ -40,7 +40,7 @@ <h2>Your Post</h2>
             <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.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");
+        console.log(title_card);
+        document.getElementById('card-text').appendChild(title_card);
+        title_card.innerHTML += this.title;
+    }  
+    addDescription(){
+        var detail_card = document.createElement('p');
+        detail_card.setAttribute("id","blog-description");
+        console.log(detail_card);
+        document.getElementById('card-text').appendChild(detail_card);
+        detail_card.innerHTML += this.detail;
+    }
+}
+
+
+document.getElementById("addBlog").addEventListener("click", addPost)
+document.getElementById("close").addEventListener("click", close)
+document.getElementById("post").addEventListener("click", addBlog)
+
+function addPost(){
+    var unhide = document.getElementById("popupContact")
+    unhide.style.display = "flex"
+}
+function close(){
+    var unhide = document.getElementById("popupContact")
+    unhide.style.display = "none"
+}
+function 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")
+}