assembler-institute · Dejahar · May 11, 2022 · May 11, 2022 · May 11, 2022 · May 11, 2022
diff --git a/index.html b/index.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
+  </script>
+  <script type="module" src="./main.js"></script>
+  <script src="https://kit.fontawesome.com/1c78a02b22.js" crossorigin="anonymous"></script>
+  <title>Document</title>
+</head>
+
+<body>
+  <header>
+    <nav class="navbar navbar-light bg-light d-flex">
+      <div class="container-fluid justify-content-center navbar fixed-top navbar-light bg-light">
+        <span class="navbar-brand mb-0 h1">Blog-erino</span>
+      </div>
+    </nav>
+  </header>
+  <article>
+    <div class="container mt-md-5" id="blog-container">
+      <div class="row border border-primary " id="posts-container">
+        <div class="row d-flex justify-content-center" id='card-container'>
+
+          <!-- posts main view -->
+          <div class="card mb-3 " style="max-width: 540px;" id="cardTemplate" hidden>
+            <div class="row g-0">
+              <div class="col-md-4">
+                <img src="" class="img-fluid rounded-start" alt="..." id="cardIMG">
+              </div>
+              <div class="col-md-8">
+                <div class="card-body" id="cardBody">
+                  <h5 class="card-title" id="cardTitle"></h5>
+                  <p class="card-text" id="cardText"></p>
+                  <p class="card-text"><small class="text-muted" id="cardComments"></small></p>
+                  <button type="button" id="modalButton" class="btn btn-primary position-absolute bottom-0 end-1 m-1"
+                    data-bs-postID="" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
+                    Check Post
+                  </button>
+                  <div class="position-absolute bottom-0 end-0 p-1">
+                    <button type="button" id="deleteBtn" class="btn btn-danger" data-bs-toggle="modal"
+                      data-bs-target="#deleteModal" data-bs-postID="">
+                      <img src="./src/assets/icons/icons8-delete-100.png" width="20" />
+                    </button>
+                    <button type="button" id="editBtn" class="btn btn-primary" data-bs-toggle="modal"
+                      data-bs-target="#editModal" data-bs-postID="">
+                      <img src="./src/assets/icons/icons8-edit-50.png" width="20" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </article>
+
+  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+    aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl">
+      <div class="modal-content">
+        <div class="modal-header p-3 mb-2 bg-primary text-white ">
+          <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body" id="modal-body">
+          ...
+        </div>
+        <div class="container px-3 py-3">
+          <div class="row gx-0">
+            <div class="col">
+              <img id="userImg" class="rounded-circle p-2" src="" alt="...">
+            </div>
+            <div class="col px-0 py-5">
+              <h6 class="modal-user" id="modal-user-name">user name</h6>
+              <h6 class="modal-user" id="modal-user-email">user mail</h6>
+            </div>
+            <div class="col">
+            </div>
+            <div class="col py-5">
+              <h6 class="modal-user" id="">
+                <i class="fa-brands fa-facebook"></i>
+                <i class="fa-brands fa-github"></i>
+                <i class="fa-brands fa-linkedin"></i></h6>
+            </div>
+          </div>
+        </div>
+        <div class="container mb-2">
+          <button class="btn btn-primary mb-2" id="commentsBtn" type="button" data-bs-toggle="collapse"
+            data-bs-target="#comments-wrapper" aria-expanded="false" aria-controls="collapseExample">
+            Comments
+          </button>
+          <div class="collapse" id="comments-wrapper">
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- deleting modal -->
+  <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+    aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl">
+      <div class="modal-content">
+        <div class="modal-header p-3 mb-2 bg-primary text-white ">
+          <h5 class="modal-title" id="staticBackdropLabel">Post Delete</h5>
+          <!-- <div id="deletePostID" hidden></div> -->
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          Are you sure you want to delete this post?
+        </div>
+        <div class="modal-footer">
+          <button type="submit" id="submitDelete" class="btn btn-secondary" data-dismiss="modal">Yes</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- edit post -->
+  <div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+    aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl">
+      <div class="modal-content">
+        <div class="modal-header p-3 mb-2 bg-primary text-white ">
+          <h5 class="modal-title" id="staticBackdropLabel">Post Edit</h5>
+          <div id="editPostID" hidden></div>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <form class="row d-flex" id="editForm">
+          <label for="editTitle"> Title </label>
+          <input type="text" name="editTitle" id="editTitle">
+
+          <label for="editBody"> Main text </label>
+          <input type="text" name="editBody" id="editBody">
+        </form>
+        <div class="modal-footer">
+          <button type="submit" id="submitEdit" class="btn btn-secondary" data-bs-dismiss="modal">Edit</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</body>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,79 @@
+import {
+  createPost,
+  handleModal,
+  handleComments,
+  handleEdit,
+  handleSubmit,
+  handleDelete
+} from "./src/js/utility.js";
+
+const urlPosts = "http://localhost:3000/posts";//limit of posts
+const urlUsers = "http://localhost:3000/users";
+const urlComments = "http://localhost:3000/comments";
+
+document.getElementById("blog-container").scrollIntoView();
+
+const onLoad = () => {
+  allPosts.map(post => {
+    if (post.title)
+      createPost(post, allUsers);
+  });
+}
+
+const getPosts = async () => {
+  const response = await fetch(urlPosts)
+  const posts = await response.json()
+  return posts
+}
+
+const getUsers = async () => {
+  const response = await fetch(urlUsers)
+  const users = await response.json()
+  return users
+}
+
+const getComments = async () => {
+  const response = await fetch(urlComments)
+  const comments = await response.json()
+  return comments
+}
+
+const allUsers = await getUsers();
+const allPosts = await getPosts();
+const allComments = await getComments()
+
+const modalTemplate = document.getElementById('staticBackdrop');
+modalTemplate.addEventListener('show.bs.modal', e => {
+  let button = e.relatedTarget;
+  let postId = button.getAttribute('data-bs-postID');
+
+  handleModal(allPosts, postId, allUsers);
+  handleComments(postId, allComments);
+})
+
+modalTemplate.addEventListener('hidden.bs.modal', function () {
+  document.getElementById("comments-wrapper").setAttribute("class", "collapse");
+})
+
+const editModal = document.getElementById("editModal");
+editModal.addEventListener('show.bs.modal', e => {
+  let button = e.relatedTarget;
+  let postId = button.getAttribute('data-bs-postID');
+
+  handleEdit(postId, allPosts);
+})
+
+const submitEdit = document.getElementById("submitEdit");
+submitEdit.addEventListener("click", () => {
+  handleSubmit();
+})
+
+const deleteModal = document.getElementById("deleteModal");
+deleteModal.addEventListener('show.bs.modal', e => {
+  let button = e.relatedTarget;
+  let postId = button.getAttribute('data-bs-postID');
+
+  handleDelete(postId, allPosts);
+})
+
+window.onload = onLoad();
diff --git a/node_modules/.bin/is-ci b/node_modules/.bin/is-ci
diff --git a/node_modules/.bin/is-ci.cmd b/node_modules/.bin/is-ci.cmd
diff --git a/node_modules/.bin/is-ci.ps1 b/node_modules/.bin/is-ci.ps1
diff --git a/node_modules/.bin/json-server b/node_modules/.bin/json-server
diff --git a/node_modules/.bin/json-server.cmd b/node_modules/.bin/json-server.cmd
diff --git a/node_modules/.bin/json-server.ps1 b/node_modules/.bin/json-server.ps1
diff --git a/node_modules/.bin/mime b/node_modules/.bin/mime
diff --git a/node_modules/.bin/mime.cmd b/node_modules/.bin/mime.cmd
diff --git a/node_modules/.bin/mime.ps1 b/node_modules/.bin/mime.ps1
diff --git a/node_modules/.bin/nanoid b/node_modules/.bin/nanoid