SOLUTION: Ivan Escribano and Alicia Cembranos

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

README.md

@@ -1,60 +1,151 @@
-`#html` `#css` `#js` `#dom` `#JSON` `#HTTP` `#API` `#Bootstrap` `#master-in-software-development`
+`#html` `#css` `#js` `#dom` `#JSON-server` `#JSON`
+<p>&nbsp;</p>
 
-# Blog with API <!-- omit in toc -->
+<img src="./src/assets/images/logo (2).png" alt="Blog chain logo" width="200" height="100" />
 
-<p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
+<p>&nbsp;</p>
+
+# Blog CHAIN 
+
+A fast, simple, elegant & powerful blog powered by HTML, CSS and JS Vanilla.
+
+According to a recent survey, blogs have ranked as the third most trustworthy source of information, following only friends and family. That's right — bloggers are trusted more than celebrities, journalists, brands, and politicians.
+
+With this blog we will get people to fall in love with it. Well, just as your website homepage is like the front door to your business, our blog's design is the front door of ourselves.
+
+With an elegant design, and an organized structure, we have created this fashionable blog to read about any topics you want.
+
+<p>&nbsp;</p>
+
+# Preview 
+
+![image](./src/assets/images/preview.png)
+
+<p>&nbsp;</p>
+
+<h2 align="center">Gold sponsors 🥇❤️</h2>
+
+<p>&nbsp;</p>
+
+
+<p align="center">
+  <a href="https://assemblerinstitute.com/" target="_blank">
+    <img src="./src/assets/images/assembler-logo.png" height="70px">
+  </a>
 </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.
+# Table of contents
+
+<!-- toc -->
+
+- [Getting started](#getting-started)
+- [What can you do in blog chain?](#What-can-you-do-in-blog-chain?)
+- [Roadmap](#Roadmap)
+- [Responsive](#responsive)
+- [Technologies](#Technologies)
+- [Team](#Team)
+- [Links](#links)
+  * [Video](#video)
+  * [Third-party tools](#third-party-tools)
+  * [Linkedin](#Linkedin)
+
+
+<!-- tocstop -->
+
+# Getting started
+
+First of all, you must launch the local API server created with JSON server to be able to fetch the data to the blog web page.
+
+```
+npm run server
+```
+
+Also when doing requests, it's good to know that:
+
+- If you make POST, PUT, PATCH or DELETE requests, changes will be automatically and safely saved to `db.json` using [lowdb](https://github.com/typicode/lowdb).
+- Your request body JSON should be object enclosed, just like the GET output. (for example `{"name": "Foobar"}`)
+- Id values are not mutable. Any `id` value in the body of your PUT or PATCH request will be ignored. Only a value set in a POST request will be respected, but only if not already taken.
+- A POST, PUT or PATCH request should include a `Content-Type: application/json` header to use the JSON in the request body. Otherwise it will return a 2XX status code, but without changes being made to the data. 
+
+<p>&nbsp;</p>
+
+# What can you do in blog chain?
+
+<p>&nbsp;</p>
+
+- Read articles about whatever topic you want.
+- Modify articles clicking in the edit button of the desired article card.
+- Remove articles clicking in the delete button of the desired article card.
+
+<p>&nbsp;</p>
+
+# Roadmap
+
+<p>&nbsp;</p>
+
+### Project Organization 
+
+<p>&nbsp;</p>
+
+We started designing the structure of the blog with its differents html tags and giving it classes and ids.
+
+<img src="./src/assets/images/blog_structure-BLOG-MAIN.drawio.png" alt="Main structure" width="700" height="600" />
+<img src="./src/assets/images/blog_structure-MODAL-INFO.drawio.png" alt="Info modal structure" width="700" height="600" />
+<img src="./src/assets/images/blog_structure-MODAL-INFO.drawio.png" alt="Edit modal structure" width="700" height="600" />
+
+<p>&nbsp;</p>
+
+# Responsive
+
+<p>&nbsp;</p>
+
+This blog web page is adapted for all type of devices.
 
-## Index <!-- omit in toc -->
+- Small devices (mobiles 360px and up)
+- Medium devices (landscape tablets, 768px and up) */
+- Large devices (laptops/desktops, 992px and up) */
+- Extra large devices (large laptops and desktops, 1200px and up) */
 
-- [Requirements](#requirements)
-- [Repository](#repository)
-- [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
-- [Resources](#resources)
 
-## Requirements
+![image](./src/assets/images/responsive-design.jpg)
 
-- 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
+<p>&nbsp;</p>
 
+# Technologies
 
-## Repository
+- HTML <img src="./src/assets/icons/html5.png" alt="HTML Icon"/>
+- CSS <img src="./src/assets/icons/css-3.png" alt="CSS Icon"/>
+- JAVASCRIPT VANILLA <img src="./src/assets/icons/js.png" alt="JS Icon"/>
+- JSON SERVER
+- BOOTSTRAP 5 <img src="./src/assets/icons/bootstrap.png" alt="BT Icon"/>
 
-First of all you must fork this project into your GitHub account.
+<p>&nbsp;</p>
 
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
+# Team
 
-<img src="https://docs.github.com/assets/images/help/repository/fork_button.jpg" alt="Fork on GitHub" width='450'>
+- 🕺 Ivan Escribano (https://github.com/ivan-escribano)
+- 💃 Alicia Cembranos (https://github.com/alicembranos)
 
-## Technologies used
+<p>&nbsp;</p>
 
-\* HTML
+# Links
 
-\* CSS
+## Video
 
-\* JS
+![Video Demo](./src/assets/images/blog.gif)
 
-\* Bootstrap
+<p>&nbsp;</p>
 
-\* HTTP Requests
+## Third-party tools
 
-\* JSON
+* [JSON Server](https://github.com/typicode/json-server/blob/master/README.md)
 
-\* API
+<p>&nbsp;</p>
 
-## Project delivery
+## Linkedin
 
-To deliver this project you must follow the steps indicated in the document:
+[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/ivan-escribano-382671217/) Ivan Escribano
 
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/aliciacembranos/) Alicia Cembranos
 
-## Resources
 
-- [JSON server](https://github.com/typicode/json-server)
-- [Official Bootstrap](https://getbootstrap.com/)

data/db.json

@@ -14,15 +14,15 @@
     },
     {
       "userId": 1,
-      "id": 3,
       "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
-      "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
+      "body": "et iusto sed quo iurevoluptatem occaecati omnis eligendi aut advoluptatem doloribus vel accusantium quis pariaturmolestiae porro eius odio et labore et velit aut",
+      "id": 3
     },
     {
       "userId": 1,
-      "id": 4,
       "title": "eum et est occaecati",
-      "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
+      "body": "ullam et saepe reiciendis voluptatem adipiscisit amet autem assumenda provident rerum culpaquis hic commodi nesciunt rem tenetur doloremque ipsam iurequis sunt voluptatem rerum illo velit",
+      "id": 4
     },
     {
       "userId": 1,
@@ -36,12 +36,6 @@
       "title": "dolorem eum magni eos aperiam quia",
       "body": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae"
     },
-    {
-      "userId": 1,
-      "id": 7,
-      "title": "magnam facilis autem",
-      "body": "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas"
-    },
     {
       "userId": 1,
       "id": 8,
@@ -1044,41 +1038,6 @@
       "email": "Lurline@marvin.biz",
       "body": "consequuntur quia voluptate assumenda et\nautem voluptatem reiciendis ipsum animi est provident\nearum aperiam sapiente ad vitae iste\naccusantium aperiam eius qui dolore voluptatem et"
     },
-    {
-      "postId": 7,
-      "id": 31,
-      "name": "ex velit ut cum eius odio ad placeat",
-      "email": "Buford@shaylee.biz",
-      "body": "quia incidunt ut\naliquid est ut rerum deleniti iure est\nipsum quia ea sint et\nvoluptatem quaerat eaque repudiandae eveniet aut"
-    },
-    {
-      "postId": 7,
-      "id": 32,
-      "name": "dolorem architecto ut pariatur quae qui suscipit",
-      "email": "Maria@laurel.name",
-      "body": "nihil ea itaque libero illo\nofficiis quo quo dicta inventore consequatur voluptas voluptatem\ncorporis sed necessitatibus velit tempore\nrerum velit et temporibus"
-    },
-    {
-      "postId": 7,
-      "id": 33,
-      "name": "voluptatum totam vel voluptate omnis",
-      "email": "Jaeden.Towne@arlene.tv",
-      "body": "fugit harum quae vero\nlibero unde tempore\nsoluta eaque culpa sequi quibusdam nulla id\net et necessitatibus"
-    },
-    {
-      "postId": 7,
-      "id": 34,
-      "name": "omnis nemo sunt ab autem",
-      "email": "Ethelyn.Schneider@emelia.co.uk",
-      "body": "omnis temporibus quasi ab omnis\nfacilis et omnis illum quae quasi aut\nminus iure ex rem ut reprehenderit\nin non fugit"
-    },
-    {
-      "postId": 7,
-      "id": 35,
-      "name": "repellendus sapiente omnis praesentium aliquam ipsum id molestiae omnis",
-      "email": "Georgianna@florence.io",
-      "body": "dolor mollitia quidem facere et\nvel est ut\nut repudiandae est quidem dolorem sed atque\nrem quia aut adipisci sunt"
-    },
     {
       "postId": 8,
       "id": 36,
@@ -4335,4 +4294,4 @@
       "body": "perspiciatis quis doloremque\nveniam nisi eos velit sed\nid totam inventore voluptatem laborum et eveniet\naut aut aut maxime quia temporibus ut omnis"
     }
   ]
-}
+}

index.html

@@ -0,0 +1,76 @@
+<!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" />
+  <title>BLOG</title>
+  <link href="./node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
+  <script src="./node_modules/bootstrap/dist/js/bootstrap.js" defer></script>
+  <link rel="stylesheet" href="src/css/main.css" />
+  <script src="src/js/main.js" type="module"></script>
+  <script src="https://kit.fontawesome.com/c866d00507.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+  <video autoplay muted loop class="video">
+    <source src="./src/assets/video/videoplayback.mp4" type="video/mp4" />
+  </video>
+  <!-- BLOG CONTENT -->
+  <section class="blog">
+    <header class="blog__header">
+      <div class="header__logo">
+        <img src="./src/assets/images/logo (2).png" alt="" />
+      </div>
+      <nav class="header__menu">
+        <ul>
+          <li><a href="" class="selected">Home</a></li>
+          <li><a href="">Nature</a></li>
+          <li><a href="">Sports</a></li>
+          <li><a href="">Fruits</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main class="blog__content">
+      <section class="blog__slider" id="blogSlider">
+        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
+          <div class="carousel-inner" id="carouselContent"></div>
+          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade"
+            data-bs-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Previous</span>
+          </button>
+          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade"
+            data-bs-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Next</span>
+          </button>
+        </div>
+      </section>
+      <section class="blog__posts scrollbar" id="blogPosts">
+      </section>
+    </main>
+  </section>
+
+  <!-- MODAL INFO -->
+  <div class="modal container--hide">
+    <section class="modal-info">
+      <div class="modal__img"></div>
+      <section class="modal__content" id="modalContent">
+      </section>
+    </section>
+    </section>
+  </div>
+
+  <!-- MODAL EDIT -->
+  <div class="modal container--hide">
+    <section class="modal-edit__content" id="modalContentEdit">
+    </section>
+  </div>
+
+  <!-- MODAL POPUP -->
+  <div class=" modal container--hide" id="popup"></div>
+</body>
+
+</html>

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 ./data/db.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ivan-escribano/blog-with-api.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ivan-escribano/blog-with-api/issues"
+  },
+  "homepage": "https://github.com/ivan-escribano/blog-with-api#readme",
+  "dependencies": {
+    "bootstrap": "^5.1.3",
+    "json-server": "^0.17.0"
+  }
+}