diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..25c8fdba
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+package-lock.json
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6f3a2913
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 95e87fdf..43c8f781 100644
--- a/README.md
+++ b/README.md
@@ -48,13 +48,15 @@ To create a fork on GitHub is as easy as clicking the “fork” button on the r
\* API
-## Project delivery
-To deliver this project you must follow the steps indicated in the document:
+## Preview
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+
+
+
-## Resources
+## Team Members
-- [JSON server](https://github.com/typicode/json-server)
-- [Official Bootstrap](https://getbootstrap.com/)
\ No newline at end of file
+\* [Jesús Herrera](https://github.com/Jesusjha/).
+
+\* [Sofía Romera](https://github.com/Sofianct/).
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..5b3d6476
--- /dev/null
+++ b/index.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+ Blog
+
+
+
+
+
+
+
+
+
+
+
+
+
STAR
+
+
BLOG
+
+
+
+
+
+
+
+
+
+
Modal title
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..8aa5ddfb
--- /dev/null
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+ "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/Sofianct/blog-with-api.git"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "ISC",
+ "bugs": {
+ "url": "https://github.com/Sofianct/blog-with-api/issues"
+ },
+ "homepage": "https://github.com/Sofianct/blog-with-api#readme",
+ "dependencies": {
+ "bootstrap-icons": "^1.8.2",
+ "json": "^11.0.0",
+ "json-server": "^0.17.0"
+ }
+}
diff --git a/src/css/cards.css b/src/css/cards.css
new file mode 100644
index 00000000..fb57aecd
--- /dev/null
+++ b/src/css/cards.css
@@ -0,0 +1,28 @@
+.body__card--post {
+ display: flex;
+ flex-direction: column;
+ width: 50rem;
+ height: auto;
+}
+
+.container__card--post {
+ height: 6.7rem;
+ border: none;
+ border-radius: 0.6rem;
+ margin-bottom: 0.7rem;
+ -webkit-box-shadow: 6px 6px 16px -5px rgba(41, 13, 121, 0.2);
+ -moz-box-shadow: 6px 6px 16px -5px rgba(41, 13, 121, 0.2);
+ box-shadow: 6px 6px 16px -5px rgba(41, 13, 121, 0.2);
+}
+
+.card__title--post {
+
+ font-family: var(--space-font);
+ font-weight: 600;
+ color: var(--secondary-color);
+ text-decoration: none;
+}
+
+.card__title--post:hover {
+ color: var(--tertiary-color);
+}
\ No newline at end of file
diff --git a/src/css/modal.css b/src/css/modal.css
new file mode 100644
index 00000000..84b16170
--- /dev/null
+++ b/src/css/modal.css
@@ -0,0 +1,75 @@
+.modal-content {
+ width: 40rem;
+ height: auto;
+ background: #141E30; /* fallback for old browsers */
+ background: -webkit-linear-gradient(to left, #243B55, #141E30); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to left, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+}
+
+.space__modal--hero--content{
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -5rem;
+}
+
+.space__modal--hero {
+ height: 20rem;
+ padding: 0 3rem 2rem 0;
+}
+
+.modal-body {
+ color: #fff;
+ font-family: var(--body-font);
+ font-weight: 300;
+ font-size: 1.2rem;
+}
+
+.modal-title {
+ font-family: var(--space-font);
+ font-size: 1.5rem;
+ color: #fff;
+}
+
+.user__name--post {
+ font-weight: 700;
+ font-size: 1.3rem;
+ margin-bottom: -0.2rem;
+}
+
+.user__email--post {
+ font-weight: 200;
+ font-size: 1.1rem;
+}
+
+.btn__comments--users {
+ width: 12rem;
+ margin: 0 auto;
+ background-color: #c5367d;
+ border: none;
+ animation: boom 1s infinite;
+ color: rgb(255, 255, 255);
+}
+
+@keyframes boom {
+ 0% {
+ box-shadow: #c5367d 0 0 0 0;
+ }
+ 85% {
+ box-shadow: transparent 0 0 0 0.5rem;
+ }
+}
+
+.btn__comments--users:hover {
+ width: 12rem;
+ margin: 0 auto;
+ background-color: #c5367d;
+ border: none;
+}
+
+.btn__comments--users:focus {
+ width: 12rem;
+ margin: 0 auto;
+ background-color: #c5367d;
+ border: none;
+}
\ No newline at end of file
diff --git a/src/css/normalize.css b/src/css/normalize.css
new file mode 100644
index 00000000..08bc0c84
--- /dev/null
+++ b/src/css/normalize.css
@@ -0,0 +1,349 @@
+/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/src/css/style.css b/src/css/style.css
new file mode 100644
index 00000000..e93d7149
--- /dev/null
+++ b/src/css/style.css
@@ -0,0 +1,76 @@
+@import url('https://fonts.googleapis.com/css2?family=Kodchasan:ital,wght@0,300;0,400;0,500;0,600;0,700;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300;400;500;600;700;800&display=swap');
+@import url(./normalize.css);
+@import url(./modal.css);
+@import url(./cards.css);
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ /* border: 1px solid yellow; */
+}
+
+:root {
+ --primary-color:#2D2B79;
+ --secondary-color: #582E73;
+ --tertiary-color: #FDBB20;
+ --space-font: 'Kodchasan', sans-serif;
+ --body-font: 'Dosis', sans-serif;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ background-image: linear-gradient(66.75deg, #2D2B79 20%, #582E73 94%);
+}
+
+main {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 75rem;
+ height: 45rem;
+ border-radius: 1.3rem;
+ background-color: #fff;
+ overflow-y: scroll;
+}
+
+::-webkit-scrollbar {
+ background-color: transparent;
+}
+
+.header__logo--star {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding-right: 3rem;
+ font-family: var(--space-font);
+ font-weight: 600;
+ font-size: 5.3rem;
+ font-style: italic;
+ color: #fff;
+}
+
+.header__logo--icon {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 7.8rem;
+ width: 9.5rem;
+}
+
+.header__logo--blog {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ padding-left: 3rem;
+ font-family: var(--space-font);
+ font-weight: 600;
+ font-size: 5.3rem;
+ font-style: italic;
+ color: #fff;
+}
\ No newline at end of file
diff --git a/data/comments.json b/src/data/comments.json
similarity index 100%
rename from data/comments.json
rename to src/data/comments.json
diff --git a/data/db.json b/src/data/db.json
similarity index 100%
rename from data/db.json
rename to src/data/db.json
diff --git a/data/posts.json b/src/data/posts.json
similarity index 100%
rename from data/posts.json
rename to src/data/posts.json
diff --git a/data/users.json b/src/data/users.json
similarity index 100%
rename from data/users.json
rename to src/data/users.json
diff --git a/src/img/Space_Ghost.svg b/src/img/Space_Ghost.svg
new file mode 100644
index 00000000..1e03bcfb
--- /dev/null
+++ b/src/img/Space_Ghost.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/img/blogMain.png b/src/img/blogMain.png
new file mode 100644
index 00000000..acd46fe8
Binary files /dev/null and b/src/img/blogMain.png differ
diff --git a/src/img/blogPost.png b/src/img/blogPost.png
new file mode 100644
index 00000000..55009d24
Binary files /dev/null and b/src/img/blogPost.png differ
diff --git a/src/img/blogPostComment.png b/src/img/blogPostComment.png
new file mode 100644
index 00000000..bfc20f93
Binary files /dev/null and b/src/img/blogPostComment.png differ
diff --git a/src/img/planet-logo.png b/src/img/planet-logo.png
new file mode 100644
index 00000000..a5df9b76
Binary files /dev/null and b/src/img/planet-logo.png differ
diff --git a/src/js/main.js b/src/js/main.js
new file mode 100644
index 00000000..4b8ddfc0
--- /dev/null
+++ b/src/js/main.js
@@ -0,0 +1,109 @@
+
+const postsURL = fetch("https://jsonplaceholder.typicode.com/posts/");
+const contentBody = document.getElementById('modal__body-content');
+const contentTitle = document.getElementById('modal__title-content');
+
+const userBodyPost = document.getElementById('user__body--post');
+const userNamePost = document.getElementById('user__name--post');
+const userEmailPost = document.getElementById('user__email--post');
+
+const commentBox = document.getElementById('boxForComments');
+
+function loadPosts(){
+ postsURL
+ .then(response => response.json())
+ .then(data => {
+ data.forEach(post => {
+ const mainContainer = document.getElementById('cards-container');
+ const cardContainer = document.createElement('div');
+ cardContainer.classList.add('card', 'container__card--post');
+ const cardBody = document.createElement('div');
+ cardBody.classList.add('card-body');
+ const cardTitle = document.createElement('h5');
+ cardTitle.classList.add('card-title');
+ const titleLink = document.createElement('a');
+ titleLink.classList.add('card__title--post')
+ titleLink.setAttribute('href','javaScript:void(0)')
+ titleLink.setAttribute('data-bs-toggle', 'modal')
+ titleLink.setAttribute('data-bs-target', '#exampleModal')
+ titleLink.textContent = post.title.charAt(0).toUpperCase() + post.title.slice(1);
+ const delIcon = document.createElement('i');
+ const cardText = document.createElement('p');
+ const addIcon = document.createElement('i');
+ cardText.classList.add('card-text');
+ cardText.textContent = (post.body.charAt(0).toUpperCase() + post.body.slice(1)).slice(0, 80) + '...';
+
+ titleLink.setAttribute('id', post.userId);
+ addIcon.classList.add('bi', 'bi-pen');
+ delIcon.classList.add('bi', 'bi-trash3-fill');
+
+ cardTitle.addEventListener('click', () =>{
+ userBodyPost.textContent = (post.body.charAt(0).toUpperCase() + post.body.slice(1));
+ contentTitle.textContent = (post.title.charAt(0).toUpperCase() + post.title.slice(1));
+ let titleLinkId = titleLink.getAttribute('id')
+
+ contentBody.append(userBodyPost, userNamePost, userEmailPost);
+
+ getUser(titleLinkId);
+ getComment(titleLinkId)
+ .then(data => {
+ data.forEach(comment => {
+ const boxUserComment = document.createElement('div');
+ boxUserComment.classList.add('card', 'card-body', 'toggle__comment--box');
+
+ const paraTitle = document.createElement('p');
+ const paraBody = document.createElement('p');
+ const paraEmail = document.createElement('p');
+ paraTitle.classList.add('toggle__comment--para');
+ paraBody.classList.add('toggle__comment--para');
+ paraEmail.classList.add('toggle__comment--para');
+
+ paraTitle.textContent = comment.name.charAt(0).toUpperCase() + comment.name.slice(1);
+ paraBody.textContent = comment.body.charAt(0).toUpperCase() + comment.body.slice(1);
+ paraEmail.textContent = comment.email;
+ boxUserComment.append(paraTitle, paraBody, paraEmail);
+ commentBox.appendChild(boxUserComment);
+ });
+ })
+ updateDisplay();
+ });
+
+ cardTitle.append(titleLink)
+ mainContainer.append(cardContainer);
+ cardContainer.append(cardBody);
+ cardBody.append(cardTitle, cardText);
+ });
+ })
+ .catch(error => {
+ console.log(error);
+ });
+}
+
+function getUser(idUser){
+ fetch(`https://jsonplaceholder.typicode.com/users?id=${idUser}`)
+ .then(response => response.json())
+ .then(data => {
+ data.forEach(user => {
+ userNamePost.textContent = '— ' + user.name;
+ userEmailPost.textContent = user.email;
+ });
+ })
+ .catch(error => {
+ console.log(error);
+ });
+};
+
+async function getComment(idPost) {
+ return await fetch(`https://jsonplaceholder.typicode.com/posts/${idPost}/comments`)
+ .then(response => response.json())
+ .then(data => data)
+ .catch(error => console.log(error))
+}
+
+function updateDisplay(){
+ while (commentBox.firstChild) {
+ commentBox.removeChild(commentBox.lastChild);
+ }
+}
+
+loadPosts();
\ No newline at end of file
+ 
+