Project Blog With API by Sergi and Haroon

assets/deleteBlog.js

@@ -0,0 +1,42 @@
+function deleteBlog() {
+    let postNumber = parseInt(event.target.parentNode.parentNode.dataset.id);
+
+    fetch(`https://jsonplaceholder.typicode.com/posts/${postNumber}`, {
+        method: "DELETE",
+    });
+
+    document.getElementById(postNumber).remove();
+    let newPost = parseInt(blogGrid.lastChild.id);
+
+    let numberArray = [];
+
+    fetch(`https://jsonplaceholder.typicode.com/posts/`)
+        .then((response) => response.json())
+        .then((data) => {
+            for (p = 0; p < data.length; p++) {
+                if (data[p].id > newPost) {
+                    numberArray.push(data[p].id);
+                }
+            }
+
+            let newPostId = numberArray[0];
+            data.forEach((post) => {
+                if (post.id === newPostId) {
+                    blogGrid.innerHTML += `<div class="card" id="${post.id}" data-id = "${
+            post.userId
+          }">
+    <img src="./assets/images/img-0${Math.floor(
+      Math.random() * 8
+    )}.jfif" class="card-img-top" alt="..." />
+    <div class="card-body">
+        <h5 class="card-title" id="blog-title-${post.id}">${post.title}</h5>
+        <p class="card-text" id="blog-body-${post.id}">
+           ${post.body}
+        </p>
+        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" id = "read-blog">Read Blog</button>
+    </div>
+    </div>`;
+                }
+            });
+        });
+}

assets/editBlog.js

@@ -0,0 +1,24 @@
+function editBlog() {
+    let title = document.getElementById("modal__title").textContent;
+    let body = document.getElementById("modal__body");
+    let header = document.getElementById("modal__header");
+    let footer = document.getElementById("modal__footer");
+    let authorDetails = document.getElementById("author__details");
+    let comments = document.getElementById("comment__section");
+
+    header.innerHTML = `<h5>Title:</h5>
+
+<textarea cols="60"   id="edit__title">${title}
+</textarea>
+<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">`;
+
+    body.innerHTML = `<h5>Blog:</h5> <textarea rows="10" cols="60" id="edit__body">${body.textContent}</textarea > `;
+    footer.innerHTML = `<div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button><button type="button" data-bs-dismiss="modal" class="btn btn-warning" id="delete-blog">Delete</button>
+    <button type="button" class="btn btn-primary" id="save-blog">Save Changes</button>`;
+
+    authorDetails.remove();
+
+    if (comments !== null) {
+        comments.remove();
+    }
+}

assets/hideComments.js

@@ -0,0 +1,10 @@
+function hideComments() {
+    let readButton = `<button type="button" class="btn btn-secondary" id="open__comments">Read Comments</button>`;
+    document.getElementById("comment__section").remove();
+
+    document.getElementById("hide__comments").remove();
+
+    document
+        .getElementById("edit-blog")
+        .insertAdjacentHTML("beforebegin", readButton);
+}

assets/homeButton.js

@@ -0,0 +1,14 @@
+//-------------------HOME BUTTON---------------------//
+
+document.getElementById("page-home").addEventListener("click", () => {
+    blogGrid.innerHTML = "";
+
+    createBlogs();
+    removeNewTiles();
+
+    document.getElementById("page-1").parentNode.classList.add("new-tile");
+    document.getElementById("page-2").parentNode.classList.remove("new-tile");
+    document.getElementById("page-3").parentNode.classList.remove("new-tile");
+});
+
+//-------------------END HOME BUTTON---------------------//

assets/loadComments.js

@@ -0,0 +1,32 @@
+function loadComments() {
+    let commentSection = `<div class="container-sm" id = "comment__section"></div>`;
+    let hideComments = `<button class="btn btn-secondary" id="hide__comments">Hide Comments</button>`;
+
+    modalContent.insertAdjacentHTML("beforeend", commentSection);
+    fetch(
+            `https://jsonplaceholder.typicode.com/posts/${event.target.parentNode.getAttribute(
+      "data-id"
+    )}/comments`
+        )
+        .then((response) => response.json())
+        .then((data) =>
+            data.forEach((comment) => {
+                let everyComment = `<div class="comment">
+                <p> <span class= "bold-it">Name:</span> <span>${comment.name}</span></p>
+
+                <p><span class= "bold-it">Email:</span> ${comment.email}</span></p>
+
+                <p><span class= "bold-it">Comment:</span>  <span>${comment.body}</span></p>
+                </div>`;
+
+                document
+                    .getElementById("comment__section")
+                    .insertAdjacentHTML("afterbegin", everyComment);
+            })
+        );
+
+    document.getElementById("open__comments").remove();
+    document
+        .getElementById("edit-blog")
+        .insertAdjacentHTML("beforebegin", hideComments);
+}