From 1e2438090908bfb9051dffc06872d621cf9905ee Mon Sep 17 00:00:00 2001 From: Sidharth PJ Date: Sat, 30 Apr 2022 23:33:34 +0530 Subject: [PATCH] VITFED47 --- cardStyle.css | 40 +++++++++++++++++++++------------------- displayCard.html | 27 +++++++++++++++------------ script.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 80 insertions(+), 31 deletions(-) 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 @@ + Document +
Your Blog Posts
- +
-
- - - -
- + + +
+
@@ -36,13 +38,14 @@

Your Post

-
- - +
+ + - +
+ \ 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) +