assembler-institute · Gaerste · May 12, 2022 · May 12, 2022 · May 12, 2022 · May 12, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+package-lock.json
diff --git a/README.md b/README.md
@@ -1,60 +1,42 @@
-`#html` `#css` `#js` `#dom` `#JSON` `#HTTP` `#API` `#Bootstrap` `#master-in-software-development`
+# News Blog with API 
+Our blog adopts a design inspired by well-known newspapers and news websites, such as The Guardian, The Washington  Post, The New York Times. Our goal for the design focused on simplicity and functionality for the user.
 
-# Blog with API <!-- omit in toc -->
+It was important for us to be able to access different endpoints for the {JSON}Placeholder API. Although we did not incorporate POST and DELETE functions for the blog posts, the code is scalable and this implementation is planned for future versions.
 
-<p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
-</p>
+![img of our blog header](./assets/header_img.png)
 
-> In this pill you will put into practice the knowledge learned about making HTTP requests to create a blog consuming the information from a third-party API. You will also learn how to use Bootstrap Framework for the layout.
 
-## Index <!-- omit in toc -->
+## Planning
 
-- [Requirements](#requirements)
-- [Repository](#repository)
-- [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
-- [Resources](#resources)
+We began the project by outlining the project, using tools like Trello for workflow, as well as Figma and Miró for basic design plans.
 
-## Requirements
-
-- You must use semantic HTML5 elements for all the contents of the application
-- You must use JSON server library to create your own local repository
-- You must use fecth to do the requests
-- You have to use Bootstrap Framework for the Layout and the styles
-
-
-## Repository
+Day 1 of the project was dedicated toward planning the functionality and design of the app. 
 
-First of all you must fork this project into your GitHub account.
+Day 2 began by setting up a local JSON server for testing, then moving on to basic HTML structure and Javascript functionality.
 
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
+On Day 3, we focused on accessing the JSON data and displaying successfully on the main page, testing several methods, finally settling on *fetch*, using a mix of standard and async functions.
 
-<img src="https://docs.github.com/assets/images/help/repository/fork_button.jpg" alt="Fork on GitHub" width='450'>
+On Day 4, the design and visual aspect was improved by further integrating Bootstrap 5 classes into the HTML and Javascript. Then time was spent refactoring main functions.
 
-## Technologies used
 
-\* HTML
+![img of planned functions with miro number 1](./assets/miro_img01.png)
 
-\* CSS
+![img of planned functions with miro number 2](./assets/miro_img02.png)
 
-\* JS
+![img of planned functions with miro number 3](./assets/miro_img03.png)
 
-\* Bootstrap
-
-\* HTTP Requests
-
-\* JSON
-
-\* API
+## Requirements
 
-## Project delivery
+-Use {JSON}Placeholder API with endpoints for users, comments, and posts. 
+-Use fetch method for HTTP requests.
+-Use Bootstrap to add style to the website.
 
-To deliver this project you must follow the steps indicated in the document:
+## Attribution
 
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+Illustration on main page from Undraw (https://undraw.co/illustrations)
+Icon on header by Icons8 (https://icons8.com)
 
-## Resources
+## The Team
 
-- [JSON server](https://github.com/typicode/json-server)
-- [Official Bootstrap](https://getbootstrap.com/)
+Alejandro Gaerste Steger (https://github.com/Gaerste/)
+Blake Johnson (https://github.com/blakejohns5) 
diff --git a/assets/header_img.png b/assets/header_img.png
diff --git a/assets/icons8-bugle-50.png b/assets/icons8-bugle-50.png
diff --git a/assets/miro_img01.png b/assets/miro_img01.png
diff --git a/assets/miro_img02.png b/assets/miro_img02.png
diff --git a/assets/miro_img03.png b/assets/miro_img03.png
diff --git a/assets/undraw_news_re_6uub_tall_fit.svg b/assets/undraw_news_re_6uub_tall_fit.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,70 @@
+<!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.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="./src/css/style.css">
+    <script src="./src/js/main.js" type="module"></script>
+    <title>The Dispatch</title>
+  </head>
+  <body>
+    <!-- main  -->
+    <nav id="blogHeader" class="blog__header navbar sticky-top container-fluid p-5 d-flex align-items-center justify-content-center">
+      <div class="blog__logo d-flex">
+        <a href="index.html" class="blog__header--title navbar-brand text-dark"><h1 class="blog__header--title">The Post Dispatch<img src="./assets/icons8-bugle-50.png" class="navbar__logo-img" alt="bugle icon"></h1></a>
+      </div>
+      <div class="header__form">
+        <form class="form-inline d-flex gap-3">
+          <input id="headerSearch" class="src__header form-control " type="search" placeholder="Search" aria-label="Search">
+          <button id="headerSearchBtn" class="btn btn-outline-success my-2 my-sm-0" type="button">Search</button>
+        </form>
+      </div>
+    </nav>
+    <!-- main content -->
+    <main id="mainContent" class="main__content  d-flex align-items-center pt-5">
+      <article id="postDisplay" class="d-flex container pt-5 flex-md-wrap justify-content-center overflow-auto gap-3 offset-lg-4">
+        <!-- post content -->
+      </article>
+      <!-- modal -->
+      <dialog id="modal" class="modal__dialog modal fade">
+        <!-- modal content -->
+        <article id="modalContent" class="modal-dialog modal-dialog-centered">
+          <div class="modal-content">
+            <header id="modalHeader" class="modal-header">
+              <!-- title of the modal -->
+              <h3 id="modalTitle" class="modal-title">Title</h3>
+              <!-- btn to close the modal -->
+              <button class="btn-close" data-bs-dismiss="modal" type="button"></button>
+            </header>
+            <section id="modalBody" class="modal-body">
+              <h5>Username</h5>
+              <p id="modalUsername" class="modal__username">username</p>
+              <h5>Email</h5>
+              <p id="modalEmail" class="modal__email">email</p>
+              <p id="modalText">
+              </p>
+            </section>
+            <section id="modalComments" class="modal-footer">
+              <button type="button" id="btnComments" class="btn btn-secondary" data-bs-dismiss="modal">
+                Close
+              </button>
+              <button
+                type="button"
+                id="commentsContentBtn"
+                class="btn btn-primary"
+              >
+                Loads Comments
+              </button>
+            </section>
+            <section id="commentsContentBody" class="comments__content container-fluid overflow-auto">              
+            </section>
+          </div>
+        </article>
+      </dialog>
+    </main>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "blog-with-api",
+  "version": "1.0.0",
+  "description": "`#html` `#css` `#js` `#dom` `#JSON` `#HTTP` `#API` `#Bootstrap` `#master-in-software-development`",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "server": "json-server --watch ./src/data/db.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Gaerste/blog-with-api.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Gaerste/blog-with-api/issues"
+  },
+  "homepage": "https://github.com/Gaerste/blog-with-api#readme",
+  "dependencies": {
+    "json-server": "^0.17.0"
+  }
+}
diff --git a/src/css/style.css b/src/css/style.css
@@ -0,0 +1,72 @@
+@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;0,6..72,800;1,6..72,300;1,6..72,400;1,6..72,500;1,6..72,600;1,6..72,700;1,6..72,800&display=swap');
+/* fonts */
+@font-face {
+    font-family: "old london";
+    src: url("/src/fonts/old_london/OldLondon.ttf");
+}
+/* header src */
+.src__header{
+        transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+		content: '';
+		width: 50%;
+		height: 100%;
+		background: black;
+        height: 4vh;
+}
+/* btn src */
+.btn{
+        transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+		content: '';
+		width: 50%;
+		height: 100%;
+		background: black;
+        height: 4vh;
+        width: 6vw;
+        text-align: center;
+}
+/* main title */
+.blog__header--title{
+    text-decoration: none;
+    margin: 0 2rem;
+    font-family: 'old london';
+    font-size: 3.5rem;
+}
+/* main background-image */
+.main__content{
+    background-image: url("/assets/undraw_news_re_6uub_tall_fit.svg");
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: 53vh;
+    background-position: left;
+    overflow: hidden;
+    background-color: var(--bg-custom);
+}
+.blog__header{
+    background-color: var(--bg-header-custom);
+}
+/* color of the website */
+:root {
+    --bg-custom: #f2ddc3;
+    --bg-header-custom: #ebba7e;
+}
+
+/* nav logo */
+.navbar__logo-img {
+    transform: rotate(-45deg);
+    margin: 0 2rem;
+}
+
+/* post style  */
+.post__container {
+    border-bottom: solid .5rem var(--bg-header-custom);
+    border-radius: 1rem 1rem 0 0;
+    font-family: 'Newsreader', serif;
+}
+/* modal font */
+.modal {
+    font-family: 'Newsreader', serif;
+}
+/* color modal */
+.modal__dialog {
+    background-color: hsla(0, 0%, 100%, .25);
+}
diff --git a/data/comments.json → src/data/comments.json b/data/comments.json → src/data/comments.json
diff --git a/data/db.json → src/data/db.json b/data/db.json → src/data/db.json
diff --git a/data/posts.json → src/data/posts.json b/data/posts.json → src/data/posts.json
diff --git a/data/users.json → src/data/users.json b/data/users.json → src/data/users.json
diff --git a/src/fonts/old_london/OldLondon.ttf b/src/fonts/old_london/OldLondon.ttf
diff --git a/src/fonts/old_london/OldLondonAlternate.ttf b/src/fonts/old_london/OldLondonAlternate.ttf
diff --git a/src/fonts/old_london/Olondon_.otf b/src/fonts/old_london/Olondon_.otf
diff --git a/src/fonts/old_london/Olondona.otf b/src/fonts/old_london/Olondona.otf
diff --git a/src/js/info-modal.js b/src/js/info-modal.js
@@ -0,0 +1,96 @@
+import { getComments } from "./main.js";
+
+//modal display in the main content
+function openPost() {
+  const modalOpen = new bootstrap.Modal(document.getElementById("modal"));
+  const commentsBtn = document.getElementById("commentsContentBtn");
+  modalOpen.show();
+  removeComments();
+  commentsBtn.addEventListener("click", loadComments);
+}
+
+//show the content of body and title
+function showTitleBody(event) {
+  const postId = event.target.getAttribute("data-post-id");
+  const modalTitle = document.getElementById("modalTitle");
+  const modalBody = document.getElementById("modalText");
+  const postData = fetch("https://jsonplaceholder.typicode.com/posts/");
+  try {
+    postData
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+        let obj = data.find((item) => item.id == postId); // whe could make typeof!!
+        modalTitle.textContent = obj.title;
+        modalBody.textContent = obj.body;
+      });
+  } catch (error) {
+    alert("Error Data");
+  }
+  setCommentsId(postId);
+}
+
+// Show the email and user in post modal
+function showUserEmail(event) {
+  const userId = event.target.getAttribute("data-user-id");
+  const modalUser = document.getElementById("modalUsername");
+  const modalEmail = document.getElementById("modalEmail");
+  const userData = fetch("https://jsonplaceholder.typicode.com/users");
+  try {
+    userData
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+        let obj = data.find((item) => item.id == userId); // whe could make typeof!!
+        modalUser.textContent = obj.username;
+        modalEmail.textContent = obj.email;
+      });
+  } catch (error) {
+    alert("Error Data");
+  }
+}
+// Gives comments section a data attribute, to match with the id from the comments json data.
+function setCommentsId(postId) {
+  const commentsContent = document.getElementById("commentsContentBody");
+  commentsContent.setAttribute("data-post-id", `${postId}`);
+}
+
+// Removes comments before displaying more comments
+function removeComments() {
+  const commentsBody = document.getElementById("commentsContentBody");
+  while (commentsBody.firstElementChild) {
+    commentsBody.removeChild(commentsBody.lastElementChild);
+  }
+}
+
+// Loads comments into the bottom of the modal, adds comments formatting
+async function loadComments() {
+  const commentsContent = document.getElementById("commentsContentBody");
+  const commentsTitle = document.createElement("h4");
+  commentsTitle.textContent = "Comments:";
+  commentsTitle.classList.add("fw-bold");
+
+  const modalPostId = parseInt(commentsContent.getAttribute("data-post-id")); // read the attribute for which comments
+  const commentsData = await getComments();
+  const commentsSet = commentsData.filter((comment) => {
+    return comment.postId == modalPostId;
+  });
+  commentsContent.append(commentsTitle);
+  commentsSet.map((comment) => {
+    const commentName = document.createElement("h5");
+    const email = document.createElement("p");
+    const body = document.createElement("p");
+    commentName.textContent = comment.name;
+
+    email.textContent = comment.email;
+    body.textContent = comment.body;
+    body.classList.add("border-bottom", "pb-3");
+
+    commentsContent.append(commentName, email, body);
+  });
+}
+
+//EXPORT
+export { openPost, showTitleBody, showUserEmail };