diff --git a/assets/img/DoubleR-LOGO.jpg b/assets/img/DoubleR-LOGO.jpg
new file mode 100644
index 00000000..d3e209ad
Binary files /dev/null and b/assets/img/DoubleR-LOGO.jpg differ
diff --git a/assets/img/close.png b/assets/img/close.png
new file mode 100644
index 00000000..f4390b5b
Binary files /dev/null and b/assets/img/close.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..f4c6d8e9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Blog with Api
+
+
+
+
+
\ No newline at end of file
diff --git a/js/Modal/modal.js b/js/Modal/modal.js
new file mode 100644
index 00000000..09cd3988
--- /dev/null
+++ b/js/Modal/modal.js
@@ -0,0 +1,109 @@
+class Modal{
+
+ constructor(title, body, edit, posts){
+ $("").addClass("modal fade show").attr("tabindex", "-1").attr("style", "display: block;").css("background-color", "rgba(0,0,0,0.3)")
+ .append($("").addClass("modal-dialog modal-dialog-centered mw-100")
+ .append($("").addClass("modal-content")
+ .append($("").addClass("modal-body d-flex flex-column")
+ .append($("").addClass("modal-title").text(title))
+ .append($("![]()
").addClass("img-close rounded-circle").attr("src", "./assets/img/close.png"))
+ .append($("").text(body))
+ .append($("").addClass("modal-title").text("User"))
+ )
+ .append($("").addClass("modal-footer d-flex align-items-start flex-column")
+ .append($("").addClass("modal-title").text("Comments"))
+ .append($("").addClass("btn btn-dark").text("Load Comments"))
+ )
+ )
+ )
+ .appendTo("body");
+
+ posts.then(function(post){
+
+ fetch("https://jsonplaceholder.typicode.com/users/" + post.userId,
+ {
+ method: "GET",
+ })
+ .then(function(res) {
+ return res.json();
+ })
+ .then(function (user) {
+ $("").text(user.name).appendTo(".modal-body");
+ $("").text(user.email).appendTo(".modal-body");
+ })
+
+ fetch("https://jsonplaceholder.typicode.com/posts/" + post.id + "/comments",
+ {
+ method: "GET",
+ })
+ .then(function(res) {
+ return res.json();
+ })
+ .then(function (comments) {
+ comments.forEach(comment => {
+ //Load comments
+ $(".btn-dark").on("click", function(){
+ if($(".modal-footer").children().first().children().length <= 1){
+ posts.then(function(){
+ $(".modal-footer").children().first().append($("").text(comment.name));
+ $(".modal-footer").children().first().append($("").text(comment.body));
+ });
+ $(".btn-dark").remove();
+ }
+ });
+ });
+ })
+ });
+
+ //Close button
+ $("img").on("click", function(){ $(".modal").remove(); });
+ $(".modal").on("click", function(e){ if(e.target.classList.contains("fade")) $(".modal").remove(); });
+
+ //Only when is edit modal
+ if(edit){
+ $(".modal-body").find("h3").remove();
+ $(".modal-body").find("pre").remove();
+ $(".modal-footer").children().remove();
+ $("").append($("").addClass("form-control").attr("placeholder", title)).addClass("form-group col-sm-8").prependTo(".modal-body");
+ $("").append($("").addClass("form-control").attr("placeholder", body)).addClass("form-group col-sm-10").insertAfter(".img-close");
+ $(".modal-footer").append($("").addClass("btn btn-primary save-button").text("Save"));
+
+ //Save event
+ $(".save-button").on("click", function(){
+ const title = $("input").val();
+ const body = $("textarea").val();
+ if(String(title).trim() != " " && String(title).trim() != "" && String(body).trim() != " " && String(body).trim() != ""){
+ posts.then(function(post){
+ //Edit post
+ fetch("https://jsonplaceholder.typicode.com/posts/" + post.id,
+ {
+ method: "PATCH",
+ headers: {
+ "Content-type": "application/json; charset=UTF-8",
+ },
+ body: JSON.stringify({
+ title: title,
+ body: $("textarea").val(),
+ }),
+ })
+ .then(function (response) {
+ return response.json();
+ })
+ .then(function (json) {
+ //Refresh data
+ const row = $("tbody").find("scope").prevObject[(post.id - 1)];
+ $(row).find("#postTitle")[0].textContent = json.title;
+ $(row).find("#postBody")[0].textContent = json.body;
+ $(".modal").remove();
+ });
+
+ });
+ }
+ });
+ }
+
+ }
+
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/js/apps.js b/js/apps.js
new file mode 100644
index 00000000..f8377709
--- /dev/null
+++ b/js/apps.js
@@ -0,0 +1,122 @@
+import Modal from "./Modal/modal.js";
+
+// Getting the API
+fetch("https://jsonplaceholder.typicode.com/posts",
+{
+ method: "GET",
+})
+.then(function(res) {
+ return res.json();
+})
+.then(function (json) {
+ let postTitle = document.querySelectorAll("#postTitle")
+ let postBody = document.querySelectorAll("#postBody")
+ for (let i = 0; i < postTitle.length; i++) {
+ const titleApi = json[i];
+ postTitle[i].textContent = titleApi["title"]
+ postBody[i].textContent = titleApi["body"]
+ }
+})
+
+//Generate main page
+var bodyVar = document.body
+var divBlogs = document.createElement("div")
+divBlogs.className = "container"
+var theadHtml = document.createElement("thead")
+theadHtml.innerHTML = " | Blog Name | Blog body |
|---|
"
+var tableHtml = document.createElement("table")
+tableHtml.className = "table table-hover"
+divBlogs.appendChild(tableHtml)
+tableHtml.appendChild(theadHtml)
+for (let i = 1; i<7; i++) {
+var tbodyHtml = document.createElement("tbody")
+tbodyHtml.innerHTML = "| "+ i +" | | | | |
|---|
"
+tableHtml.appendChild(tbodyHtml)
+}
+bodyVar.appendChild(divBlogs)
+
+
+//Add Event Listeners
+function openModal(e) {
+ e.stopPropagation();
+
+ if(e.target instanceof SVGElement){
+ //Edit
+ if(e.target.classList.contains("edit")){
+ if(e.target instanceof SVGPathElement) {
+ new Modal(e.target.parentNode.parentNode.parentNode.children[1].textContent, e.target.parentNode.parentNode.parentNode.children[2].textContent, true,
+ fetchPosts(e.target.parentNode.parentNode.parentNode.children[0].textContent));
+ }
+ else new Modal(e.target.parentNode.parentNode.children[1].textContent, e.target.parentNode.parentNode.children[2].textContent, true,
+ fetchPosts(e.target.parentNode.parentNode.children[0].textContent));
+ }
+ //Delete
+ if(e.target.classList.contains("delete")){
+ if(e.target instanceof SVGPathElement) {
+ fetch("https://jsonplaceholder.typicode.com/posts/" + e.target.parentNode.parentNode.parentNode.children[0].textContent,{
+ method: "DELETE",
+ })
+ $(e.target.parentNode.parentNode.parentNode).remove();
+ }
+ else {
+ fetch("https://jsonplaceholder.typicode.com/posts/" + e.target.parentNode.parentNode.children[0].textContent,{
+ method: "DELETE",
+ })
+ $(e.target.parentNode.parentNode).remove();
+ }
+ }
+
+ //View Modal
+ } else {
+ new Modal(e.target.parentNode.children[1].textContent, e.target.parentNode.children[2].textContent, false,
+ fetchPosts(e.target.parentNode.children[0].textContent));
+ }
+}
+
+async function fetchPosts(id){
+ const res = await fetch("https://jsonplaceholder.typicode.com/posts/" + id,
+ {
+ method: "GET",
+ });
+ const json = await res.json();
+ return json;
+}
+
+var mainRow = document.getElementsByClassName("mainRow")
+for (let i = 0; i < mainRow.length; i++) {
+ mainRow[i].addEventListener("click", openModal)
+}
+
+$(window).on("scroll", function() {
+ if(Math.trunc($(window).scrollTop() + 2) >= $(document).height() - $(window).height()) {
+ fetch("https://jsonplaceholder.typicode.com/posts",
+ {
+ method: "GET",
+ })
+ .then(function(res) {
+ return res.json();
+ })
+ .then(function (json) {
+ let postTitle = document.querySelectorAll("#postTitle")
+ let postBody = document.querySelectorAll("#postBody")
+ for (let i = 0; i < postTitle.length; i++) {
+ const titleApi = json[i];
+ postTitle[i].textContent = titleApi["title"]
+ postBody[i].textContent = titleApi["body"]
+ }
+ })
+ const limit = 100;
+ var number = document.querySelectorAll("#number")
+ if(number.length < limit) {
+ for (let i = number.length; i < number.length + 5; i++) {
+ var newNumb = i + 1;
+ if(newNumb <= limit){
+ var tbodyHtml = document.createElement("tbody");
+ tbodyHtml.innerHTML = "| "+ newNumb +" | | | | |
|---|
"
+ tableHtml.appendChild(tbodyHtml);
+ mainRow[i].addEventListener("click", openModal);
+ }
+ }
+ }
+ }
+});
\ No newline at end of file
diff --git a/node_modules/jquery/AUTHORS.txt b/node_modules/jquery/AUTHORS.txt
new file mode 100644
index 00000000..0d44990f
--- /dev/null
+++ b/node_modules/jquery/AUTHORS.txt
@@ -0,0 +1,331 @@
+John Resig
+Gilles van den Hoven
+Michael Geary
+Stefan Petre
+Yehuda Katz
+Corey Jewett
+Klaus Hartl
+Franck Marcia
+Jörn Zaefferer
+Paul Bakaus
+Brandon Aaron
+Mike Alsup
+Dave Methvin
+Ed Engelhardt
+Sean Catchpole
+Paul Mclanahan
+David Serduke
+Richard D. Worth
+Scott González
+Ariel Flesler
+Jon Evans
+TJ Holowaychuk
+Michael Bensoussan
+Robert Katić
+Louis-Rémi Babé
+Earle Castledine
+Damian Janowski
+Rich Dougherty
+Kim Dalsgaard
+Andrea Giammarchi
+Mark Gibson
+Karl Swedberg
+Justin Meyer
+Ben Alman
+James Padolsey
+David Petersen
+Batiste Bieler
+Alexander Farkas
+Rick Waldron
+Filipe Fortes
+Neeraj Singh
+Paul Irish
+Iraê Carvalho
+Matt Curry
+Michael Monteleone
+Noah Sloan
+Tom Viner
+Douglas Neiner
+Adam J. Sontag
+Dave Reed
+Ralph Whitbeck
+Carl Fürstenberg
+Jacob Wright
+J. Ryan Stinnett
+unknown
+temp01
+Heungsub Lee
+Colin Snover
+Ryan W Tenney
+Pinhook
+Ron Otten
+Jephte Clain
+Anton Matzneller
+Alex Sexton
+Dan Heberden
+Henri Wiechers
+Russell Holbrook
+Julian Aubourg
+Gianni Alessandro Chiappetta
+Scott Jehl
+James Burke
+Jonas Pfenniger
+Xavi Ramirez
+Jared Grippe
+Sylvester Keil
+Brandon Sterne
+Mathias Bynens
+Timmy Willison <4timmywil@gmail.com>
+Corey Frang
+Digitalxero
+Anton Kovalyov
+David Murdoch
+Josh Varner
+Charles McNulty
+Jordan Boesch
+Jess Thrysoee
+Michael Murray
+Lee Carpenter
+Alexis Abril
+Rob Morgan
+John Firebaugh
+Sam Bisbee
+Gilmore Davidson
+Brian Brennan
+Xavier Montillet
+Daniel Pihlstrom
+Sahab Yazdani
+avaly
+Scott Hughes
+Mike Sherov
+Greg Hazel
+Schalk Neethling
+Denis Knauf
+Timo Tijhof
+Steen Nielsen
+Anton Ryzhov
+Shi Chuan
+Berker Peksag
+Toby Brain
+Matt Mueller
+Justin
+Daniel Herman
+Oleg Gaidarenko
+Richard Gibson
+Rafaël Blais Masson
+cmc3cn <59194618@qq.com>
+Joe Presbrey
+Sindre Sorhus
+Arne de Bree
+Vladislav Zarakovsky
+Andrew E Monat
+Oskari
+Joao Henrique de Andrade Bruni
+tsinha
+Matt Farmer
+Trey Hunner
+Jason Moon
+Jeffery To
+Kris Borchers
+Vladimir Zhuravlev
+Jacob Thornton
+Chad Killingsworth
+Nowres Rafid
+David Benjamin
+Uri Gilad
+Chris Faulkner
+Elijah Manor
+Daniel Chatfield
+Nikita Govorov
+Wesley Walser
+Mike Pennisi
+Markus Staab
+Dave Riddle
+Callum Macrae
+Benjamin Truyman
+James Huston
+Erick Ruiz de Chávez
+David Bonner
+Akintayo Akinwunmi
+MORGAN
+Ismail Khair
+Carl Danley
+Mike Petrovich
+Greg Lavallee
+Daniel Gálvez
+Sai Lung Wong
+Tom H Fuertes
+Roland Eckl
+Jay Merrifield
+Allen J Schmidt Jr
+Jonathan Sampson
+Marcel Greter
+Matthias Jäggli
+David Fox
+Yiming He
+Devin Cooper
+Paul Ramos
+Rod Vagg
+Bennett Sorbo
+Sebastian Burkhard
+Zachary Adam Kaplan
+nanto_vi
+nanto
+Danil Somsikov
+Ryunosuke SATO
+Jean Boussier
+Adam Coulombe
+Andrew Plummer
+Mark Raddatz
+Isaac Z. Schlueter
+Karl Sieburg
+Pascal Borreli
+Nguyen Phuc Lam
+Dmitry Gusev
+Michał Gołębiowski-Owczarek
+Li Xudong
+Steven Benner
+Tom H Fuertes
+Renato Oliveira dos Santos
+ros3cin
+Jason Bedard
+Kyle Robinson Young
+Chris Talkington
+Eddie Monge
+Terry Jones
+Jason Merino
+Jeremy Dunck
+Chris Price
+Guy Bedford
+Amey Sakhadeo
+Mike Sidorov
+Anthony Ryan
+Dominik D. Geyer
+George Kats
+Lihan Li
+Ronny Springer
+Chris Antaki
+Marian Sollmann
+njhamann
+Ilya Kantor
+David Hong
+John Paul
+Jakob Stoeck
+Christopher Jones
+Forbes Lindesay
+S. Andrew Sheppard
+Leonardo Balter
+Roman Reiß
+Benjy Cui
+Rodrigo Rosenfeld Rosas
+John Hoven
+Philip Jägenstedt
+Christian Kosmowski
+Liang Peng
+TJ VanToll
+Senya Pugach
+Aurelio De Rosa
+Nazar Mokrynskyi
+Amit Merchant
+Jason Bedard
+Arthur Verschaeve
+Dan Hart
+Bin Xin
+David Corbacho
+Veaceslav Grimalschi
+Daniel Husar
+Frederic Hemberger
+Ben Toews
+Aditya Raghavan
+Victor Homyakov
+Shivaji Varma
+Nicolas HENRY
+Anne-Gaelle Colom
+George Mauer
+Leonardo Braga
+Stephen Edgar
+Thomas Tortorini
+Winston Howes
+Jon Hester
+Alexander O'Mara
+Bastian Buchholz
+Arthur Stolyar
+Calvin Metcalf
+Mu Haibao
+Richard McDaniel
+Chris Rebert