From 6dddd4b45306e4af9987a868e1cfb2df5ca55c9c Mon Sep 17 00:00:00 2001 From: gonzalogarahuetes Date: Tue, 10 Aug 2021 14:03:03 +0200 Subject: [PATCH 01/14] Getting started --- main.html | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 main.html diff --git a/main.html b/main.html new file mode 100644 index 00000000..f6dda8c0 --- /dev/null +++ b/main.html @@ -0,0 +1,21 @@ + + + + + + + Blog with API + + + + + From 949d491471144145de7d91f8880575efc8889644 Mon Sep 17 00:00:00 2001 From: gonzalogarahuetes Date: Tue, 10 Aug 2021 16:06:15 +0200 Subject: [PATCH 02/14] NavBar --- main.html | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/main.html b/main.html index f6dda8c0..d21638ab 100644 --- a/main.html +++ b/main.html @@ -12,6 +12,86 @@ Blog with API + + + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..179e9c25 --- /dev/null +++ b/main.js @@ -0,0 +1,52 @@ +let btnMore = document.getElementById("button--more"); +let divCont = document.getElementById("container--grid"); + +//---------------------------------------------------CARUSEL PICTURES + +document.getElementById("carousel-1").src = + "https://picsum.photos/id/30/1000/400"; +document.getElementById("carousel-2").src = + "https://picsum.photos/id/45/1000/400"; +document.getElementById("carousel-3").src = + "https://picsum.photos/id/55/1000/400"; + +//---------------------------------------------------LOAD MORE POSTS + +// btnMore.addEventListener("click", function loadPosts() { +// let row1 = document.createElement("div"); +// row1.className = "row gap-2"; +// row1.textContent(); +// let row2 = document.createElement("div"); +// row2.className = "row gap-2"; +// divCont.appendChild(row1); +// divCont.appendChild(row2); +// }); + +//---------------------------------------------------ADDING IDS TO CARDS + +let cards = document.querySelectorAll(".card"); + +function ids() { + for (let index = 0; index < cards.length; index++) { + cards[index].id = `id-${index}`; + let btnModal = cards[index].querySelector("a"); + btnModal.id = `btn-${index}`; + btnModal.dataset.bsToggle = "modal"; + btnModal.dataset.bsTarget = "#modal--main"; + fetch(`https://jsonplaceholder.typicode.com/posts/${index + 1}`) + .then((response) => { + return response.json(); + }) + .then((response) => { + cards[index].querySelector(".card-title").textContent = response.title; + cards[index].querySelector(".card-text").textContent = + response.body.substring(0, 30) + "..."; + }); + + cards[index].querySelector("img").src = `https://picsum.photos/id/${ + index + 10 + index + }/200`; + } +} + +ids(); From 6369134ce1abf08b48d6fb2a07f54b679e080aec Mon Sep 17 00:00:00 2001 From: gonzalogarahuetes Date: Wed, 11 Aug 2021 12:47:04 +0200 Subject: [PATCH 05/14] Function Commented --- main.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/main.js b/main.js index 179e9c25..29b14956 100644 --- a/main.js +++ b/main.js @@ -22,17 +22,25 @@ document.getElementById("carousel-3").src = // divCont.appendChild(row2); // }); -//---------------------------------------------------ADDING IDS TO CARDS +//---------------------------------------------------ADDING IDS TO CARDS AND MORE let cards = document.querySelectorAll(".card"); function ids() { for (let index = 0; index < cards.length; index++) { + //We are adding ids to the cards and buttons + cards[index].id = `id-${index}`; let btnModal = cards[index].querySelector("a"); btnModal.id = `btn-${index}`; + + //Now we set the data-bs-toggle and data-bs-target which Bootstrap requires + btnModal.dataset.bsToggle = "modal"; btnModal.dataset.bsTarget = "#modal--main"; + + //We get the information of each post and fill the cards with it + fetch(`https://jsonplaceholder.typicode.com/posts/${index + 1}`) .then((response) => { return response.json(); @@ -43,6 +51,8 @@ function ids() { response.body.substring(0, 30) + "..."; }); + //We get a new picture for each card + cards[index].querySelector("img").src = `https://picsum.photos/id/${ index + 10 + index }/200`; From c7393b162c0a534b053ee9e3bf439d530e20a03f Mon Sep 17 00:00:00 2001 From: MarcelDurgante Date: Wed, 11 Aug 2021 15:56:20 +0200 Subject: [PATCH 06/14] Create load more --- loadMore.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 loadMore.js diff --git a/loadMore.js b/loadMore.js new file mode 100644 index 00000000..e69de29b From 60f19a0c088352754a753fbe3c1ddca54aecb70a Mon Sep 17 00:00:00 2001 From: gonzalogarahuetes Date: Wed, 11 Aug 2021 17:45:25 +0200 Subject: [PATCH 07/14] Posts and Comments Started --- main.html | 109 ++++++++++++++++++++++++++++-------------------------- main.js | 93 +++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 147 insertions(+), 55 deletions(-) diff --git a/main.html b/main.html index d10adc21..6833d158 100644 --- a/main.html +++ b/main.html @@ -9,7 +9,7 @@ integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous" /> - + Blog with API @@ -99,28 +99,14 @@
Menu
data-bs-ride="carousel" >
-
- ... +
+ ...
-
- ... +
+ ...
-
- ... +
+ ...
- -
-
- ... -
-
Post Name
-

Previous Info

- See Post + +
+
+ ... +
+
Post Name
+

Previous Info

+ See Post +
-
-
- ... -
-
Post Name
-

Previous Info

- See Post +
+ ... +
+
Post Name
+

Previous Info

+ See Post +
-
-
- ... -
-
Post Name
-

Previous Info

- See Post +
+ ... +
+
Post Name
+

Previous Info

+ See Post +
- - + -