diff --git a/css/dashboard.css b/css/dashboard.css index a77b981..9c9809b 100644 --- a/css/dashboard.css +++ b/css/dashboard.css @@ -45,20 +45,19 @@ body { display: flex; font-weight: bolder; } -.messagestitle{ +.messagestitle { color: hwb(0 13% 87%); font-size: 15px; - + margin-top: 10px; - + border-radius: 10px; height: 10px; max-width: fit-content; justify-content: center; align-items: center; - + font-weight: bolder; - } .blogbtn { display: flex; @@ -368,13 +367,12 @@ button:hover { height: 60%; border-radius: 20px; margin-top: 0; - } -.adminImgLikes{ +.adminImgLikes { width: 100%; height: 35%; border-radius: 20px; - margin-top: 0; + margin-top: 0; } /* .blog-wrapper img { @@ -433,14 +431,15 @@ button:hover { margin-left: -3%; } .queries1 { - background-color: rgba(207, 205, 204, 0.868); + background-color: rgba(236, 146, 101, 0.868); width: 100%; display: flex; position: relative; justify-content: center; align-items: center; - margin-top: 20px; - padding: 10px 10px; + margin-top: 10px; + margin-bottom: 10px; + padding: 20px 100px; border-radius: 10px; margin-left: -3%; } diff --git a/js/add.js b/js/add.js index 7eb9e9c..57d951e 100644 --- a/js/add.js +++ b/js/add.js @@ -129,6 +129,7 @@ async function createBlog() { body: formData, }); if (!response.ok) { + window.location.href = "log-in.html"; throw new Error(response.statusText); } const data = await response.json(); diff --git a/js/blogedit.js b/js/blogedit.js index 4df1cdf..2a45217 100644 --- a/js/blogedit.js +++ b/js/blogedit.js @@ -11,7 +11,9 @@ fetch(url + "/api/blogs") let result = addThreeDotsAfterLength(string, length); function addThreeDotsAfterLength(string, length) { - return string.length > length ? string.slice(0, length) + "..." : string; + return string.length > length + ? string.slice(0, length) + "..." + : string; } blogshtml += ` @@ -23,64 +25,76 @@ fetch(url + "/api/blogs")
${blog.likes}
- - + + `; }); container.innerHTML = blogshtml; - const blogger = document.querySelectorAll(".blog-container"); + const blogger = document.querySelectorAll(".delete-btn"); blogger.forEach((blg) => { blg.addEventListener("click", (e) => { - const clickedContainer = e.target.closest(".blog-container"); + const clickedContainer = e.target.closest(".delete-btn"); if (clickedContainer) { const id = clickedContainer.getAttribute("key"); deleteBlog(id); // Use the id as needed } else { - console.error("No blog container found in the clicked element chain."); + console.error( + "No blog container found in the clicked element chain." + ); } }); - - - const deleteButtons = document.querySelectorAll('.delete-btn'); - deleteButtons.forEach(button => { - button.addEventListener('click', (e) => { - const blogId = button.getAttribute('key'); - - + + const deleteButtons = document.querySelectorAll(".delete-btn"); + deleteButtons.forEach((button) => { + button.addEventListener("click", (e) => { + const blogId = button.getAttribute("key"); + }); }); }); - }); -const token=localStorage.getItem("token"); + const token = localStorage.getItem("token"); -const deleteBlog = (blogId) => { - const url = "https://rwemaremy-my-brand-back-end.onrender.com"; - fetch(url + `/api/blogs/${blogId}`, { - method: "DELETE", - headers: { - Authorization: `Bearer ${localStorage.getItem(token)}`, - }, - }).then(response => { - if (response.ok) { - console.log("Blog deleted successfully"); - } else { - console.error("Error deleting blog:", response.statusText); - } - }).catch(error => { - console.error("Error:", error); - }); -}; + const deleteBlog = (blogId) => { + const url = "https://rwemaremy-my-brand-back-end.onrender.com"; + fetch(url + `/api/blogs/${blogId}`, { + method: "DELETE", + headers: { + Authorization: `Bearer ${localStorage.getItem(token)}`, + }, + }) + .then((response) => { + if (response.ok) { + console.log("Blog deleted successfully"); + location.reload(); + } else { + console.error("Error deleting blog:", response.statusText); + } + }) + .catch((error) => { + console.error("Error:", error); + }); + }; + + const editblog = document.querySelectorAll(".update-blog"); + editblog.forEach((editbutton) => { + editbutton.addEventListener("click", (e) => { + const update = e.target.closest(".update-blog"); + if (update) { + const id = update.getAttribute("key"); + updateblog(id); + // Use the id as needed + }else{ + console.error( + "No blog container found in the clicked element chain." + ); + } + } + + // Redirect to update page with id + ); + }); -const editblog = document.querySelectorAll(".update-blog"); -editblog.forEach((editbutton) => { - editbutton.addEventListener("click", (e) => { - const id = e.target.getAttribute("key"); - console.log(id); - // Redirect to update page with id - window.location.href = `./update.html?id=${id}`; }); -}); -}); \ No newline at end of file diff --git a/js/blogs.js b/js/blogs.js index 56e2f20..2a9df9d 100644 --- a/js/blogs.js +++ b/js/blogs.js @@ -33,7 +33,7 @@ blogger.forEach((blg) => { window.location.href = `./single-blog.html?id=${id}`; }); }); - console.log(blog); + // console.log(blog); }); }); diff --git a/js/queries.js b/js/queries.js index 1458e1a..7971047 100644 --- a/js/queries.js +++ b/js/queries.js @@ -2,23 +2,32 @@ const currentUrl = new URL(window.location.href); const searchParams = new URLSearchParams(currentUrl.search); const blogId = searchParams.get("id"); -const allblog = "https://rwemaremy-my-brand-back-end.onrender.com"; +const url = "https://rwemaremy-my-brand-back-end.onrender.com"; + -const theblog = document.querySelector(".queries1"); // Fetch blog details -fetch(allblog + `/api/queries`) +fetch(url + `/api/queries`) .then((res) => res.json()) .then((query) => { - theblog.innerHTML = ` -
-
-

${query.author}

-

${query.email}

-

${query.content}

-

${query.date}

-
+ console.log(query); + const theblog = document.querySelector(".card--wrapper"); + query.forEach(element => { + const queryElement= document.createElement("div"); + queryElement.innerHTML = ` +
+
+

${element.content}


+ +

${element.author} / ${element.email}

- `; + +
+ + `; + theblog.appendChild(queryElement); + }); + // console.log(theblog); + }) .catch((error) => console.error("Error fetching blog details:", error)); diff --git a/js/script.js b/js/script.js index 25b35ab..718f903 100644 --- a/js/script.js +++ b/js/script.js @@ -1,161 +1,179 @@ -const openMenu=document.querySelector('.openmenu'); -const menu=document.querySelector('.menu'); -const Fname=document.querySelector('#Fname'); -const contact=document.querySelector('.contact'); -const Email=document.querySelector('.Email'); -const textarea=document.querySelector('#textarea'); -const blogs=document.querySelector('.blogs'); -const nameError=document.querySelector('#nameError'); -const messageError=document.querySelector('#messageError'); -const contactus=document.querySelector('#contactus'); -const login=document.querySelector('#login'); -const logName=document.querySelector("#logName"); -const logNameErrors=document.querySelector("#logNameErrors"); -const logpassword=document.querySelector("#logpassword"); -const logpasswordErrors=document.querySelector("#logpasswordErrors"); -const blogcontainer=document.querySelector('.blog-container'); - - - - -openMenu.addEventListener('click',()=>{ - menu.classList.toggle('show') -}) - - -contactus.addEventListener('submit',(e)=>{ - e.preventDefault(); - if(Fname.value.trim()===""){ - - nameError.innerHTML='please enter the name!'; - } - - else if(Fname.value.length<3){ - - nameError.innerHTML="name should have 3 character and over"; - } - else{ - nameError.innerHTML=""; - } - - if(textarea.value.trim()===""){ - messageError.innerHTML='please enter the message!'; - }else if (textarea.value.length < 10) { - messageError.innerHTML = "your message should be atleast 10 characters"; - } else { - messageError.innerHTML = ""; - alert("sent") - window.location.href = "./index.html"; - } - - - +const openMenu = document.querySelector(".openmenu"); +const menu = document.querySelector(".menu"); +const Fname = document.querySelector("#Fname"); +const contact = document.querySelector(".contact"); +const Email = document.querySelector(".Email"); +const textarea = document.querySelector("#textarea"); +const blogs = document.querySelector(".blogs"); +const nameError = document.querySelector("#nameError"); +const messageError = document.querySelector("#messageError"); +const contactus = document.querySelector("#contactus"); +const login = document.querySelector("#login"); +const logName = document.querySelector("#logName"); +const logNameErrors = document.querySelector("#logNameErrors"); +const logpassword = document.querySelector("#logpassword"); +const logpasswordErrors = document.querySelector("#logpasswordErrors"); +const blogcontainer = document.querySelector(".blog-container"); + +openMenu.addEventListener("click", () => { + menu.classList.toggle("show"); }); -Fname.value===''; -textarea.value===''; +contactus.addEventListener("submit", (e) => { + e.preventDefault(); + + var Qname = Fname.value.trim(); + var Qtext = textarea.value.trim(); + var Qemail = Email.value.trim(); + + if (Qname === "") { + nameError.innerHTML = "please enter the name!"; + } else if (Fname.value.length < 3) { + nameError.innerHTML = "name should have 3 character and over"; + } else { + nameError.innerHTML = ""; + } + if (Qemail === "") { + messageError.innerHTML = "please enter the name!"; + } else { + messageError.innerHTML = ""; + } + + if (Qtext === "") { + messageError.innerHTML = "please enter the message!"; + } else if (textarea.value.length < 10) { + messageError.innerHTML = "your message should be atleast 10 characters"; + } else { + messageError.innerHTML = ""; + alert("sent"); + window.location.href = "./index.html"; + } + + var Qname = Fname.value.trim(); + var Qtext = textarea.value.trim(); + var Qemail = Email.value.trim(); + + const data = { + author: Qname, + email: Qemail, + content: Qtext, + }; + console.log(data); + function createQueries(data) { + // const link = "https://rwemaremy-my-brand-back-end.onrender.com"; + fetch(`https://rwemaremy-my-brand-back-end.onrender.com/api/queries`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + }) + .then((response) => { + if (response.ok) { + console.log("Query created successfully"); + } else { + console.error("creating a query failed"); + } + }) + .catch((error) => { + console.error("Error:", error); + }); + } + createQueries(data); -function validate(){ -if(Fname.value===""){ -nameError.innerHTML='please enter the name!'; -} -if (textarea.value ==="") { - - return false; -} -else{ - alert("your message is sent!!!") - true; -} -} +}); -function emailvalid(){ - var form=document.getElementById("form"); - var email=document.getElementById("emails").value; - var text=document.getElementById("errors"); - -var pattern=/^[^ ]+@[^ ]+\.[a-z]{1,3}$/; -if(email.match(pattern)) -{ -form.classList.add("valid"); -form.classList.remove("invalid"); -text.innerHTML=""; -text.style.color="#00ff00"; +Fname.value === ""; +textarea.value === ""; + +function validate() { + if (Fname.value === "") { + nameError.innerHTML = "please enter the name!"; + } + if (textarea.value === "") { + return false; + } else { + alert("your message is sent!!!"); + true; + } } -else{ - form.classList.remove("valid"); - form.classList.add("invalid"); - text.innerHTML="Please enter a valid email"; -text.style.color="#ff0000"; -} +function emailvalid() { + var form = document.getElementById("form"); + var email = document.getElementById("emails").value; + var text = document.getElementById("errors"); + + var pattern = /^[^ ]+@[^ ]+\.[a-z]{1,3}$/; + if (email.match(pattern)) { + form.classList.add("valid"); + form.classList.remove("invalid"); + text.innerHTML = ""; + text.style.color = "#00ff00"; + } else { + form.classList.remove("valid"); + form.classList.add("invalid"); + text.innerHTML = "Please enter a valid email"; + text.style.color = "#ff0000"; + } } -function fnamevalid(){ - var form=document.getElementById("form"); - var email=document.getElementById("Fname").value; - var text=document.getElementById("nameError"); - -var pattern = /^[a-z]{3,}$/; -if(email.match(pattern)) -{ -form.classList.add("valid"); -form.classList.remove("invalid"); -text.innerHTML=""; -text.style.color="#00ff00"; +function fnamevalid() { + var form = document.getElementById("form"); + var email = document.getElementById("Fname").value; + var text = document.getElementById("nameError"); + + var pattern = /^[a-z]{3,}$/; + if (email.match(pattern)) { + form.classList.add("valid"); + form.classList.remove("invalid"); + text.innerHTML = ""; + text.style.color = "#00ff00"; + } else { + form.classList.remove("valid"); + form.classList.add("invalid"); + text.innerHTML = "ooops fix your name"; + text.style.color = "#ff0000"; + } } -else{ - form.classList.remove("valid"); - form.classList.add("invalid"); - text.innerHTML="ooops fix your name"; -text.style.color="#ff0000"; +function messagevalid() { + var form = document.getElementById("form"); + var email = document.getElementById("textarea").value; + var text = document.getElementById("messageError"); + + var pattern = /^[a-zA-Z\s\S]{10,}$/; + if (email.match(pattern)) { + form.classList.add("valid"); + form.classList.remove("invalid"); + text.innerHTML = ""; + text.style.color = "#00ff00"; + } else { + form.classList.remove("valid"); + form.classList.add("invalid"); + text.innerHTML = "your text it has to be over 10 chacters"; + text.style.color = "#ff0000"; + } } -} - - -function messagevalid(){ - var form=document.getElementById("form"); - var email=document.getElementById("textarea").value; - var text=document.getElementById("messageError"); + //slider------------------------------------------ + var hoovered = false; -var pattern = /^[a-zA-Z\s\S]{10,}$/; -if(email.match(pattern)) -{ -form.classList.add("valid"); -form.classList.remove("invalid"); -text.innerHTML=""; -text.style.color="#00ff00"; -} -else{ - - form.classList.remove("valid"); - form.classList.add("invalid"); - text.innerHTML="your text it has to be over 10 chacters"; -text.style.color="#ff0000"; -} -} -//slider------------------------------------------ -var hoovered=false; - -const scroll=()=>{ - if (blogs.scrollLeft + blogs.clientWidth >= blogs.scrollWidth) { + const scroll = () => { + if (blogs.scrollLeft + blogs.clientWidth >= blogs.scrollWidth) { blogs.scrollLeft = 0; } -if(!hoovered){ - blogs.scrollLeft+=100; -}else{ - blogs.scrollLeft-=100; -} -} -setInterval(scroll,70); + if (!hoovered) { + blogs.scrollLeft += 100; + } else { + blogs.scrollLeft -= 100; + } + }; + setInterval(scroll, 70); // blogcontainer.addEventListener("mouseenter", ()=>{ - + // hoovered=true; // }); // blogcontainer.addEventListener("mouseenter", ()=>{ // hoovered=false; // }); - diff --git a/js/single-blog.js b/js/single-blog.js index 3434e9f..4cf235b 100644 --- a/js/single-blog.js +++ b/js/single-blog.js @@ -1,7 +1,10 @@ const currentUrl = new URL(window.location.href); +const Names = document.querySelector(".name"); +const email = document.querySelector(".email"); +const content = document.querySelector(".message"); const searchParams = new URLSearchParams(currentUrl.search); const blogId = searchParams.get("id"); -console.log(blogId); + const allblog = "https://rwemaremy-my-brand-back-end.onrender.com"; const theblog = document.querySelector(".wrapper"); @@ -15,23 +18,53 @@ fetch(allblog + `/api/blogs/${blogId}`)

${give.content}

- + - + \ No newline at end of file