diff --git a/Blog With API Luis & Cori.pdf b/Blog With API Luis & Cori.pdf new file mode 100644 index 00000000..d6369b29 Binary files /dev/null and b/Blog With API Luis & Cori.pdf differ diff --git a/assets/img/exclamation-circle-solid.svg b/assets/img/exclamation-circle-solid.svg new file mode 100644 index 00000000..27647c3b --- /dev/null +++ b/assets/img/exclamation-circle-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/logo.jpg b/assets/img/logo.jpg new file mode 100644 index 00000000..566a62ea Binary files /dev/null and b/assets/img/logo.jpg differ diff --git a/assets/img/nexpost.jpg b/assets/img/nexpost.jpg new file mode 100644 index 00000000..a1f7d7bf Binary files /dev/null and b/assets/img/nexpost.jpg differ diff --git a/assets/img/photopost/0.jpg b/assets/img/photopost/0.jpg new file mode 100644 index 00000000..4d201398 Binary files /dev/null and b/assets/img/photopost/0.jpg differ diff --git a/assets/img/photopost/1.jpg b/assets/img/photopost/1.jpg new file mode 100644 index 00000000..476c5214 Binary files /dev/null and b/assets/img/photopost/1.jpg differ diff --git a/assets/img/photopost/10.jpg b/assets/img/photopost/10.jpg new file mode 100644 index 00000000..cad61d08 Binary files /dev/null and b/assets/img/photopost/10.jpg differ diff --git a/assets/img/photopost/11.jpg b/assets/img/photopost/11.jpg new file mode 100644 index 00000000..98a959b2 Binary files /dev/null and b/assets/img/photopost/11.jpg differ diff --git a/assets/img/photopost/12.jpg b/assets/img/photopost/12.jpg new file mode 100644 index 00000000..98460b68 Binary files /dev/null and b/assets/img/photopost/12.jpg differ diff --git a/assets/img/photopost/13.jpg b/assets/img/photopost/13.jpg new file mode 100644 index 00000000..b1eeb5f2 Binary files /dev/null and b/assets/img/photopost/13.jpg differ diff --git a/assets/img/photopost/14.jpg b/assets/img/photopost/14.jpg new file mode 100644 index 00000000..12f034db Binary files /dev/null and b/assets/img/photopost/14.jpg differ diff --git a/assets/img/photopost/15.jpg b/assets/img/photopost/15.jpg new file mode 100644 index 00000000..74738058 Binary files /dev/null and b/assets/img/photopost/15.jpg differ diff --git a/assets/img/photopost/16.jpg b/assets/img/photopost/16.jpg new file mode 100644 index 00000000..e766cccd Binary files /dev/null and b/assets/img/photopost/16.jpg differ diff --git a/assets/img/photopost/2.jpg b/assets/img/photopost/2.jpg new file mode 100644 index 00000000..97d1ae34 Binary files /dev/null and b/assets/img/photopost/2.jpg differ diff --git a/assets/img/photopost/3.jpg b/assets/img/photopost/3.jpg new file mode 100644 index 00000000..e066a25c Binary files /dev/null and b/assets/img/photopost/3.jpg differ diff --git a/assets/img/photopost/4.jpg b/assets/img/photopost/4.jpg new file mode 100644 index 00000000..bf88f2ac Binary files /dev/null and b/assets/img/photopost/4.jpg differ diff --git a/assets/img/photopost/5.jpg b/assets/img/photopost/5.jpg new file mode 100644 index 00000000..e3cfcc3d Binary files /dev/null and b/assets/img/photopost/5.jpg differ diff --git a/assets/img/photopost/6.jpg b/assets/img/photopost/6.jpg new file mode 100644 index 00000000..901128d2 Binary files /dev/null and b/assets/img/photopost/6.jpg differ diff --git a/assets/img/photopost/7.jpg b/assets/img/photopost/7.jpg new file mode 100644 index 00000000..64981cd5 Binary files /dev/null and b/assets/img/photopost/7.jpg differ diff --git a/assets/img/photopost/8.jpg b/assets/img/photopost/8.jpg new file mode 100644 index 00000000..dd237369 Binary files /dev/null and b/assets/img/photopost/8.jpg differ diff --git a/assets/img/photopost/9.jpg b/assets/img/photopost/9.jpg new file mode 100644 index 00000000..9129c54e Binary files /dev/null and b/assets/img/photopost/9.jpg differ diff --git a/assets/img/post-photo1.jpg b/assets/img/post-photo1.jpg new file mode 100644 index 00000000..65645e89 Binary files /dev/null and b/assets/img/post-photo1.jpg differ diff --git a/assets/img/prevpost.jpg b/assets/img/prevpost.jpg new file mode 100644 index 00000000..27aee3ea Binary files /dev/null and b/assets/img/prevpost.jpg differ diff --git a/assets/img/warning-128.png b/assets/img/warning-128.png new file mode 100644 index 00000000..2b816813 Binary files /dev/null and b/assets/img/warning-128.png differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..9199712d --- /dev/null +++ b/css/style.css @@ -0,0 +1,258 @@ +/* Font family */ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); + +:root{ + --bg-color: #FFFFFF; + --secondary-color: #E89119; + --primary-color: #2EC4B6; + --details-blue: #BEEEE9; + --details-orange: #FFBF69; + --warning:#AE2012; + --disabled:#C4C4C4; +} + +/* if delete method commes error or success */ +body{ + position:relative; + font-family: 'Roboto', sans-serif; +} +#statusMessage{ + position:absolute; + top:100px; + right:20px; +} +.alert-success p{ + margin:0; +} + +/*NavBar*/ +.welcome{ + display: flex; + height: 40px; + line-height: 40px; + overflow: hidden; + justify-content: center; + margin: 2vh; +} +picture{ + display: flex; + align-items: center; + +} + +#logoImg{ + width: 45px; + border-radius: 50px; + margin: 15px; +} +#logoP{ + color: var(--bg-color); + font-weight: bold; + font-size: 2em; + margin-top: 1.5vh; +} +.menuBlue{ + background-color: var(--primary-color); + height: 7vh; +} + +.nav-link{ + margin-top: 2.7vh; + color: var(--bg-color); +} + +.nav-link:hover{ + color: var(--details-orange); +} + +.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{ + background-color: var(--details-blue); + border-color: var(--details-blue); + color: var(--primary-color); + font-weight: bold; +} + +.welcome ul{ + list-style: none; + margin: 0; + animation: change 6s infinite; +} + +.welcome ul, h1{ + color: var(--secondary-color); + font-size: 30px; + margin:0; + font-weight: bold; + align-items: center; +} + +@keyframes change{ + 0%{ margin-top: 0;} + 20%{ margin-top: 0;} + + 25%{ margin-top: -40px;} + 50%{ margin-top: -40px;} + + 55%{ margin-top: -80px;} + 80%{ margin-top: -80px;} + + 85%{ margin-top: -40px;} + 95%{ margin-top: -40px;} + + 100%{margin-top: 0;} +} + +/*Container body posts main*/ +/* @media only screen and (max-width: 600px) { + + .sectionMain > .row { + background-color: var(--secondary-color); + } +} */ + +/* MODAL POST */ +#post-header{ + background-color:var(--primary-color); +} +.modalPost{ + max-width:920px; +} +.head-icons{ + width:20px; + cursor:pointer; + transition:0.5s; + color:var(--bg-color) +} +.head-icons:nth-child(2n){ + margin-left:10px; +} +#trash{ + margin-left:20px; + width:16px; +} +.photoPostContainer{ + max-width:450px; + max-height: 300px; + overflow: hidden; + +} +#photoTitle{ + object-fit: fill; +} +.fa-user,.fa-envelope,.fa-comments{ + margin-right:5px; + padding:8px; +} +#infoUser{ + color:var(--secondary-color); +} + +.fa-arrow-right, .fa-arrow-left{ + cursor:pointer; +} + +#description{ + margin-top: 20px; + font-size: 20px; +} +/* COMMENTS */ +#commentSection{ + color:var(--secondary-color); + margin-bottom: 10px; +} +.loadComments{ + background-color:var(--secondary-color); + color:white; + border:none; + border-radius: 10px; + padding: 10px; + +} +.bodyComment{ + color:black; + border-left:2px solid black; +} +/* DELETE MODAL */ +.modalDelte{ + max-width:500px; +} +#exampleModalToggle3 h1{ + color:black; +} +.fa-exclamation-triangle::before { + color:var(--warning); + display:block; + width:106px !important; +} +#deleteButton{ + color:var(--bg-color); + background-color:var(--warning); +} +#cancelButton{ + background-color: var(--disabled); + color:var(--bg-color); +} +#cancelButton,#deleteButton{ + border-radius:30px; + border:none; + width:80px; + height: 40px; +} + + +.row{ + height: 50%; +} + +.sectionMain>.row{ + height: 38vh; +} + +.divPost{ + display: flex; + align-items: flex-end; + justify-content: flex-end; + background-size: cover; + background-repeat: no-repeat; + margin: 5px; +} + + +.divPostDetail{ + background-color: var(--bg-color); + width:auto; + height: auto; + padding: 5%; + cursor: pointer; + opacity: 0.8; +} + +.titlePost{ + font-size: 1em; +} + +/*Comments style*/ +.commentsContainer{ + text-align: justify; + margin-top: 2vh; +} +.titleComment{ + font-weight: bold; + text-transform: capitalize; + margin-bottom: 1vh; +} +.comment{ + color: var(--secondary-color); +} +.photoComment{ + width:60px; + height:60px; + border-radius:50px; + object-fit: cover; +} + +/*Modal Edit*/ +#aceptEditBtn{ + background-color: var(--secondary-color); + border: none; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..88c97ebb --- /dev/null +++ b/index.html @@ -0,0 +1,276 @@ + + + + + + + + Blog with API + + + + + + + + + + + + + + +
+ +
+

Hi!

+ +
+ + + +
+
+ +
+
+
+ +

+

+ +
+
+
+
+ +

+

+ +
+
+ +

+

+ +
+
+ +
+
+ +

+

+ +
+
+
+
+ +

+

+ +
+
+
+ +
+
+
+ +

+

+ +
+
+
+
+ +

+

+ +
+
+ +

+

+ +
+
+
+
+ +

+

+ +
+
+
+
+ +

+

+ +
+
+
+ + + + + + + +
+ + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..00a80e7e --- /dev/null +++ b/js/main.js @@ -0,0 +1,188 @@ + +var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) +var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl) +}) +var arrayPosts=[] +var numId=1 +var target,postSelected; +window.onload= function(){ + getPosts() + makePagination() + printImage() + //delete modal + $('#exampleModalToggle3').on('shown.bs.modal', function () { + $("#deleteButton").one("click",deletePost) + }) + //post modal + $('#exampleModalToggle').on('shown.bs.modal', function () { + $(".fa-arrow-right,.fa-arrow-left").on("click",previousPost) + $("#deleteButton").off("click",deletePost) + }) + //when post modal exit, reset all information + $('#exampleModalToggle').on('hide.bs.modal', function () { + resetModal() + }) + //EDIT MODAL + $('#exampleModalToggle2').on('shown.bs.modal', function () { + $(".fa-arrow-right,.fa-arrow-left").on("click",previousPost) + $("#openEditModal").on("click",editPost) + }) + $('#exampleModalToggle2').on('hide.bs.modal', function () { + $("#openEditModal").off("click",editPost) + }) +} + +function getPosts(){ + fetch("http://localhost:3000/posts?userId="+numId) + .then(response => response.json()) + .then(data => { + data.forEach(function (element,i){ + arrayPosts.push(element) + $(".titlePost").eq(i).text(element.title); + }) + $(".titlePost").on("click",infoModal); + $(".titlePost").attr("data-bs-toggle", "modal") + $(".titlePost").attr("href", "#exampleModalToggle") + + }) +} + +async function deletePost(){ + //spawn card to display error or success + $("body").append(`
`) +//fetch with delete method + await fetch("https://jsonplaceholder.typicode.com/posts/"+target.id,{ + method:"DELETE", + }) + .then(response=>response.json()) + //error msg + .catch(error=>{ + $("#statusMessage").append(` + + `) + }) + //success msg + .then(data=>{ + $("#statusMessage").append(` + +`) + //delete post selected + + return $(postSelected).parent().parent().hide(); + }) + //hide the message with animation + setTimeout(function(){ + $("#statusMessage").fadeOut() + $("#statusMessage").remove() + },3000) +} + +async function infoModal(e,nextPrev){ + + var user,postImg,comments; + if(e!=undefined){ + postSelected=e.target + postImg=$(e.target).parent().parent().css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'); + target=e.target.textContent + }else{ + postSelected=nextPrev + target=nextPrev.textContent + postImg=$(nextPrev).parent().parent().css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'); + } + + //GET POST + target=arrayPosts.find(element=>element.title==target) + //GET USER + await fetch("http://localhost:3000/users?id="+target.userId) + .then(response=>response.json()) + .then(data=>{ + return user=data[0] + }) + + //DISPLAY INFO + $(".loadComments").eq(0).one("click", loadComments) + $("#photoTitle").attr("src",postImg) + $("#modalPost-title").text(target.title); + $("#username").text(user.username); + $("#email").text(user.email); + $("#description").text(target.body); +} + +function previousPost(){ + var numRandom=Math.floor(Math.random()*10); + var randomPost=($(".divPostDetail").eq(numRandom).children(".titlePost")[0]) + $(".commentsContainer").remove(); + $(".loadComments").off("click", loadComments); + infoModal(undefined,randomPost) +} + +async function loadComments(){ + await fetch("http://localhost:3000/comments?postId="+target.id) + .then(response=>response.json()) + .then(data=>{ + + data.forEach(function(element,idx){ + + $("#commentSection").append(` +
+
+
${element.name}
+
${element.email}
+
+
+ +
+
${element.body}
+
+
+ `); + + }) + }) +} + +function resetModal(){ + $(".commentsContainer").remove(); + //TURN OFF LOAD COMMENTS + $(".loadComments").off("click", loadComments); + //TURN OFF PREVIOUS AND NEXT POST + $(".fa-arrow-right,.fa-arrow-left").off("click",previousPost); +} + + + +//function to edit the post +function editPost(){ + $("#titleEditPost").val(target.title ); //input title + $("#bodyEditPost").val(target.body) //input body + + $("#aceptEditBtn").on("click", aceptEdit) +} + +async function aceptEdit(){ + console.log("acept") + + await fetch("http://localhost:3000/posts/"+target.id, + { + method: "PATCH", + body: JSON.stringify({ + title: $("#titleEditPost").val(), + body:$("#bodyEditPost").val() + }), + headers:{ + "Accept":"*/*", + "Access-Control-Allow-Origin":"*", + 'Content-type': 'application/json; charset=UTF-8' + } + }) + .then(response => response.json()) + .then(data =>{ + $("#modalPost-title").text(data.title) + $("#description").text(data.body) + }) +} diff --git a/js/pagination.js b/js/pagination.js new file mode 100644 index 00000000..ec8e681c --- /dev/null +++ b/js/pagination.js @@ -0,0 +1,94 @@ +const arrUsers=[] +var cont=0; +async function makePagination(){ + await fetch("http://localhost:3000/posts/") + .then(response=>response.json()) + .then(data=>{ + data.forEach(function(element,idx){ + cont++; + if(cont==10){ + arrUsers.push(element) + cont=0 + } + + }) + }) + createPage() + Activatepagination() +} + +function createPage(){ + for(let i=0;i${i+1} + `) + } + $(".pagination").eq(0).append(` +
  • Next + `) +} +//listeners to pagination +function Activatepagination(){ + $(".page-item").eq(1).addClass("active") + $(".page-item").on("click",changePage) + //if buttons are disabled, turn of event listener + $(".page-item").on("disabled",function(){ + $(".page-item").off("click",changePage) + }) + } + //when press pagination buttons, activate this function +function changePage(e){ + const item=$(".page-item"); + const button=e.target.textContent; + + //sum or rest the numId while press paginate buttons + // && Check if numId is higher or lower than 10-1, comeback to 1 + if(numId==button){ + return; + } + if(button>=1 && button<=10){ + item.eq(0).css("cursor","pointer"); + numId=button; + getPosts(); + printImage() + } + + //if press previous, or next, check if can change of page + if(button=="Previous" && numId>1){ + numId--; + item.eq(11).removeClass("disabled") + getPosts() + printImage() + }else if(button=="Next" && numId<10){ + numId++; + item.eq(0).removeClass("disabled") + getPosts(); + printImage() + + } + //put disabled buttons + if(numId==1){ + item.eq(0).addClass("disabled") + + }else if(numId==10){ + item.eq(11).addClass("disabled") + } + //remove the disabled for prev and next button + if(numId<10 && numId>1){ + item.eq(11).removeClass("disabled") + item.eq(0).removeClass("disabled"); + } + + //active page + item.removeClass("active"); + item.eq(numId).addClass("active"); + //check if any post is deleted and toggle visible + $(".divPost").each(function(idx,element){ + if($(element).css("display")=="none"){ + $(element).show() + }else{ + return; + } + }) +} + diff --git a/js/photos.js b/js/photos.js new file mode 100644 index 00000000..f9606e37 --- /dev/null +++ b/js/photos.js @@ -0,0 +1,9 @@ + + +function printImage(){ + $('.divPost').each(function(idx,element){ + let randomNumber=Math.floor(Math.random()*300) + $(element).css('background-image', `url(https://picsum.photos/500/?${randomNumber})`) + }) +} + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..48e341a0 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +}