assembler-institute · jose-cuevas · 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/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#412808",
+        "titleBar.activeBackground": "#5A380C",
+        "titleBar.activeForeground": "#FEFAF4"
+    }
+}
diff --git a/README.md b/README.md
@@ -3,58 +3,57 @@
 # Blog with API <!-- omit in toc -->
 
 <p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
+  <img alt="Version" src="https://img.shields.io/badge/version-2.0-blue.svg?cacheSeconds=2592000" />
 </p>
 
-> 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.
+> In this project we put into practice the knowledge acquired on how to make HTTP requests to create a blog that consumes information from a third-party API. You'll also learn how to use the Bootstrap Framework for design.
 
 ## Index <!-- omit in toc -->
 
-- [Requirements](#requirements)
-- [Repository](#repository)
+- [Install](#install)
+- [Getting Started](#starting)
 - [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
-- [Resources](#resources)
+- [MockUps](#mock-ups)
 
-## Requirements
+## Install
 
-- 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
+- Download repository
+```javascript
+  git clone git@github.com:alejandroaperez1994g/blog-with-api.git
+  cd blog-with-api
+```
 
+- Install json-server
+```javascript
+  npm install
+```
 
-## Repository
+- Execute json-server
 
-First of all you must fork this project into your GitHub account.
+```javascript
+  npm run server
+```
 
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
+## Starting
 
-<img src="https://docs.github.com/assets/images/help/repository/fork_button.jpg" alt="Fork on GitHub" width='450'>
+This is a project that simulates the display of posts brought from an API, being able to delete them and modify the content.
 
 ## Technologies used
 
-\* HTML
+- HTML
+- CSS
+- JS
+- Bootstrap
+- HTTP Requests
+- JSON
+- API
 
-\* CSS
+## MockUps
 
-\* JS
 
-\* Bootstrap
+![1_API_mockup](https://user-images.githubusercontent.com/90200166/168695103-23418c47-2a2b-4248-8a60-9929c2dcf07e.png)
+![2_API_mockup](https://user-images.githubusercontent.com/90200166/168695279-5a409d1c-9a25-4047-9822-383c4ff3d02e.png)
+![3_API_mockup](https://user-images.githubusercontent.com/90200166/168695309-da34fcba-6ff1-47f3-a423-347d8fc80cf4.png)
+![4_API_mockup](https://user-images.githubusercontent.com/90200166/168695337-324efcec-2d23-415f-b68e-7c23ba92c0a6.png)
 
-\* HTTP Requests
 
-\* JSON
-
-\* API
-
-## Project delivery
-
-To deliver this project you must follow the steps indicated in the document:
-
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
-
-## Resources
-
-- [JSON server](https://github.com/typicode/json-server)
-- [Official Bootstrap](https://getbootstrap.com/)
diff --git a/index.html b/index.html
@@ -0,0 +1,66 @@
+<!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" />
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+      </style>
+      <style>
+        @import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap');
+        </style>
+    <link rel="stylesheet" href="./src/css/style.css">
+    <script src="./src/js/main.js" defer></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <title>Blog with API</title>
+  </head>
+  <body>
+    <script
+      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>
+    <!-- Main Container -->
+    <header>
+      <nav>
+        <h1 id="title" class="container p-5 bg-primary text-white text-center">
+          Assembler's Blog
+        </h1>
+      </nav>
+    </header>
+    <section
+      id="mainContainer"
+      class="container p-5 bg-primary text-white border border-warning"
+    >
+      <!-- Dinamically with JS -->
+      <!-- <article id="postMain"> -->
+      <!-- Insert dinamically the posts using ul, li -->
+      <!-- </article> -->
+    </section>
+
+    <!-- Modal Posts -->
+    <dialog id="modalPosts" class="dialog__modal container p-5 bg-primary text-white dialog__btn">
+      <button id="closeBtn" class="btn-close" aria-label="Close"></button>
+      <section>
+        <article id="postModal" class="modal-body">
+        </article>
+        <article id="userModal" class="modal-body">
+          <h6>User</h6>
+        </article>
+      </section>
+      <section id="commentsModalPosts" class="modal-footer">
+        <br/>
+
+        <!-- POsts comments  -->
+        <section class="show_comments" id="commentsContainer"></section>
+        <button id="commentsBtn" type="button" class="btn btn-secondary">Show Comments</button>
+      </section>
+    </dialog>
+  </body>
+</html>
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
diff --git a/node_modules/.bin/nanoid.cmd b/node_modules/.bin/nanoid.cmd
diff --git a/node_modules/.bin/nanoid.ps1 b/node_modules/.bin/nanoid.ps1
diff --git a/node_modules/.bin/rc b/node_modules/.bin/rc
diff --git a/node_modules/.bin/rc.cmd b/node_modules/.bin/rc.cmd