diff --git a/cardStyle.css b/cardStyle.css index 4e024c3..08f2639 100644 --- a/cardStyle.css +++ b/cardStyle.css @@ -1,15 +1,9 @@ @import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800&display=swap'); - * { margin: 0; padding: 0; box-sizing: border-box; } - -body { - font-family: 'Nunito Sans'; -} - nav { display: flex; justify-content: space-between; @@ -17,7 +11,6 @@ nav { background-color: white; box-shadow: 0px 6px 9px rgba(0, 0, 0, 0.08); } - nav ul { display: flex; flex-flow: row; @@ -31,7 +24,6 @@ nav ul a { text-decoration: none; color: black; } - .button { display: flex; justify-content: center; @@ -46,16 +38,6 @@ nav ul a { color: white; cursor: pointer; } - -/* .fa-plus-circle { - margin-right: 0.8em; -} */ - -/* .body-div1, .body-div2 { - margin-left: 150px; - margin-right: 150px; -} */ - .body-div1 { margin-top: 25px; font-size: 24px; @@ -66,14 +48,14 @@ nav ul a { margin-bottom: 60px; } + .article-card { width: 320px; - margin: 30rem 0; + margin: 5%; display: flex; flex-wrap: wrap; justify-content: space-between; } - .article-card h1 { margin-top: 20px; font-weight: 600; @@ -87,7 +69,6 @@ nav ul a { line-height: 22px; margin: 15px 0; } - #image{ margin-top: 30px; } @@ -97,7 +78,6 @@ nav ul a { /* justify-content: space-between; */ float: left; } - #popup { width: 100%; height: 100%; @@ -108,7 +88,6 @@ nav ul a { background-color: #313131; overflow: auto; } - img#close { position: absolute; right: -910px; @@ -134,7 +113,6 @@ div#popupContact { top: 17%; margin-left: -400px; } - #card { position: absolute; display: flex; diff --git a/displayCard.html b/displayCard.html index a8ee226..32aaa08 100644 --- a/displayCard.html +++ b/displayCard.html @@ -4,15 +4,16 @@ - Document + + JS BLOG
@@ -34,7 +35,7 @@
- +

Your Post

@@ -44,5 +45,5 @@

Your Post

- + \ No newline at end of file diff --git a/script.js b/script.js index e60691b..c61c4b8 100644 --- a/script.js +++ b/script.js @@ -1 +1,38 @@ -/* Fill your code*/ +document.getElementById('addBlog').addEventListener('click', function () { + document.getElementById('popupContact').style.display = "block"; +}) +class Blog { + constructor(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 discription_card = document.createElement('p'); + discription_card.setAttribute("id", "blog-description"); + console.log(discription_card); + document.getElementById('card-text').appendChild(discription_card); + discription_card.innerHTML += this.detail; + } +} + +var post = document.getElementById('post'); +post.addEventListener('click', function () { + var title = document.getElementById('title').value; + var detail = document.getElementById('detail').value; + var add_blog = new Blog(title, detail); + add_blog.addTitle(); + add_blog.addDescription(); + var image = document.createElement('img'); + image.src = './assets/javascript.png'; + var newchild = document.getElementById('flashcard') + newchild.insertBefore(image, newchild.childNodes[0]); + document.getElementById('popupContact').style.display = "none"; +}) \ No newline at end of file