-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathopenedBlog.html
341 lines (318 loc) · 14 KB
/
openedBlog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My_brand opened blog</title>
<link rel="stylesheet" href="./styles/main.css" />
<link rel="stylesheet" href="./styles/responsive.css" />
<link rel="stylesheet" href="./styles/loader.css">
</head>
<body>
<div class="container">
<nav>
<a href="./index.html">
<h1 class="logo">MY_<span>BRAND</span></h1>
</a>
<ul id="navbar" class="links">
<li><a href="./index.html">Home</a></li>
<li><a href="./contactus.html">Contact Us</a></li>
<li><a href="./aboutus.html">About Us</a></li>
<li><a href="./portfolio.html">Portfolio</a></li>
<li><a href="./blogs.html">Blogs</a></li>
<li><a href="./admin/signin.html">Sign In</a></li>
</ul>
<ul id="navbarphone" class="linksphone">
<li><a href="./">Home</a></li>
<li><a href="./contactus.html">Contact Us</a></li>
<li><a href="./aboutus.html">About Us</a></li>
<li><a href="./portfolio.html">Portfolio</a></li>
<li><a href="./blogs.html">Blogs</a></li>
<li><a href="./admin/signin.html">Sign in</a></li>
</ul>
<div id="toggle" class="toggle">
<svg
width="26"
height="24"
viewBox="0 0 26 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.52478 1H25M1.52478 12H25M1.52478 23H25"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</nav>
<div id="popup" class="popup"></div>
<div class="single-container">
<div class="img-content">
<h1 class="title"></h1>
<div class="image"></div>
<div class="content">
<div class="loading-wave" >
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<div class="wordClass"></div>
</div>
</div>
<div class="comment-content">
<div class="likes" style="position: relative">
<div
class="likeBtn"
style="
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
cursor: pointer;
"
>
<svg
width="32"
height="24"
viewBox="0 0 32 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 10.2342L4.99628 10.1696C4.95015 9.76944 4.49191 9.46758 3.95689 9.48489C3.42187 9.5022 3 9.83255 3 10.2342H4ZM26.9815 12.0574L26.0408 16.1371L28.0116 16.3928L28.9523 12.313L26.9815 12.0574ZM17.66 21.25H11.4618V22.75H17.66V21.25ZM10.2466 20.4125L9.16376 11.0198L7.1712 11.149L8.25408 20.5417L10.2466 20.4125ZM26.0408 16.1371C25.3651 19.0677 21.8417 21.25 17.66 21.25V22.75C22.7616 22.75 27.1611 20.081 28.0116 16.3928L26.0408 16.1371ZM17.6731 5.10014L16.7895 9.14471L18.7632 9.38724L19.6468 5.34268L17.6731 5.10014ZM9.58364 10.2456L11.502 9.00584L10.1964 7.86953L8.27807 9.10932L9.58364 10.2456ZM14.992 4.97205L15.6263 3.1382L13.6904 2.76156L13.0561 4.59541L14.992 4.97205ZM16.5843 2.7784L16.7776 2.82497L17.3893 1.39686L17.196 1.35029L16.5843 2.7784ZM14.0313 6.81598C14.4472 6.23197 14.7703 5.61338 14.992 4.97205L13.0561 4.59541C12.8743 5.12106 12.6093 5.62892 12.2672 6.10923L14.0313 6.81598ZM16.7776 2.82497C17.1861 2.92341 17.4763 3.16008 17.5716 3.43583L19.5076 3.0592C19.2336 2.26718 18.4253 1.64647 17.3893 1.39686L16.7776 2.82497ZM15.6263 3.1382C15.6731 3.00319 15.8031 2.87912 15.9997 2.80803L15.1315 1.45674C14.4221 1.71308 13.8893 2.18626 13.6904 2.76156L15.6263 3.1382ZM15.9997 2.80803C16.1793 2.7431 16.3908 2.7318 16.5843 2.7784L17.196 1.35029C16.5164 1.18654 15.7749 1.22419 15.1315 1.45674L15.9997 2.80803ZM18.8716 10.9842H25.7797V9.48419H18.8716V10.9842ZM6.29175 21.4061L4.99628 10.1696L3.00372 10.2988L4.29919 21.5353L6.29175 21.4061ZM5 21.5127V10.2342H3V21.5127H5ZM4.29919 21.5353C4.2816 21.3828 4.44195 21.25 4.64895 21.25V22.75C5.61691 22.75 6.37496 22.1279 6.29175 21.4061L4.29919 21.5353ZM19.6468 5.34268C19.8128 4.58255 19.7655 3.80477 19.5076 3.0592L17.5716 3.43583C17.7596 3.97922 17.7941 4.54611 17.6731 5.10014L19.6468 5.34268ZM11.4618 21.25C10.8299 21.25 10.3013 20.887 10.2466 20.4125L8.25408 20.5417C8.39803 21.7902 9.79027 22.75 11.4618 22.75V21.25ZM11.502 9.00584C12.4084 8.41999 13.3856 7.72266 14.0313 6.81598L12.2672 6.10923C11.8054 6.75766 11.07 7.30492 10.1964 7.86953L11.502 9.00584ZM28.9523 12.313C29.2927 10.8365 27.7788 9.48419 25.7797 9.48419V10.9842C26.5352 10.9842 27.1109 11.4959 26.9815 12.0574L28.9523 12.313ZM4.64895 21.25C4.84389 21.25 5 21.3684 5 21.5127H3C3 22.1953 3.73719 22.75 4.64895 22.75V21.25ZM16.7895 9.14471C16.5792 10.1076 17.5688 10.9842 18.8716 10.9842V9.48419C18.8051 9.48419 18.7519 9.439 18.7632 9.38724L16.7895 9.14471ZM9.16376 11.0198C9.12987 10.7258 9.28633 10.4378 9.58364 10.2456L8.27807 9.10932C7.49363 9.6163 7.08199 10.3753 7.1712 11.149L9.16376 11.0198Z"
fill="#858484"
/>
</svg>
<span class="likesCount" style="font-size: 14px; color: lightgray"
>154</span
>
</div>
<div
style="
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
"
>
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_315_608)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16 26C14.832 26 13.704 25.864 12.62 25.633L7.912 28.463L7.97501 23.824C4.36601 21.654 2 18.066 2 14C2 7.373 8.268 2 16 2C23.732 2 30 7.373 30 14C30 20.628 23.732 26 16 26ZM16 0C7.164 0 0 6.269 0 14C0 18.419 2.345 22.354 6 24.919V32L13.009 27.747C13.979 27.907 14.977 28 16 28C24.836 28 32 21.732 32 14C32 6.269 24.836 0 16 0ZM23 11H9C8.448 11 8 11.448 8 12C8 12.553 8.448 13 9 13H23C23.552 13 24 12.553 24 12C24 11.448 23.552 11 23 11ZM21 17H11C10.448 17 10 17.447 10 18C10 18.553 10.448 19 11 19H21C21.552 19 22 18.553 22 18C22 17.447 21.552 17 21 17Z"
fill="#858484"
/>
</g>
<defs>
<clipPath id="clip0_315_608">
<rect width="32" height="32" fill="white" />
</clipPath>
</defs>
</svg>
<span
class="commentCount"
style="font-size: 14px; color: lightgray"
></span>
</div>
</div>
<h1>Comments</h1>
<div class="comment"></div>
<form id="commentForm" class="input-content">
<div style="display: flex; flex-direction: row; gap: 4px">
<input type="text" id="name" placeholder="Your Name" />
<input type="text" id="comment" placeholder="Comment Here" />
</div>
<button type="submit">
<span class="loader"></span>
<span class="btn-word">Comment</span>
</button>
</form>
</div>
</div>
</div>
<script>
const loaderWave = document.querySelector(".loading-wave")
const loader= document.querySelector(".loader")
const likeBtn = document.querySelector("likeBtn");
const url = new URL(window.location.href);
const id = url.searchParams.get("id");
const commentForm = document.querySelector("#commentForm");
let monthsArray = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
commentForm.addEventListener("submit", async (e) => {
loader.style.display="block"
document.querySelector(".btn-word").style.display="none"
e.preventDefault();
const name = document.querySelector("#name");
const comment = document.querySelector("#comment");
const commentData = {
name: name.value,
comment: comment.value,
blog: id,
};
await fetch(`https://mybrand-backend-1-8rxh.onrender.com/blog/addComment`, {
method: "POST",
headers: {
"Content-type": "application/json",
},
body: JSON.stringify(commentData),
})
.then((res) => {
if (!res.ok) {
console.log(error);
}
return res.json();
})
.then((data) => {
if (data.data) {
loader.style.display="none"
document.querySelector(".btn-word").style.display="block"
var popup = document.getElementById("popup");
popup.textContent = "Blog Add Successfully";
popup.classList.add("show");
window.location.reload();
} else {
alert(data.message);
}
})
.catch((error) => {
console.log(error);
});
});
const fetchSingleBlog = async () => {
await fetch(`https://mybrand-backend-1-8rxh.onrender.com/blog/singleBlog/${id}`)
.then((res) => {
if (!res.ok) {
console.log("------>error");
}
return res.json();
})
.then((data) => {
loaderWave.style.display="none"
displaySingleBlog(data.blog);
})
.catch((error) => {
console.log(error.message);
});
};
async function fetchComment(){
await fetch(`https://mybrand-backend-1-8rxh.onrender.com/blog/selectComment/${id}`).then((res)=>{
if(!res.ok){
console.log("---->error")
}
return res.json()
}).then((data)=>{
displayComment(data.comment)
}).catch((error)=>{
console.log(error)
})
}
async function displaySingleBlog(blogsData) {
const singleContainer = document.querySelector(".single-container");
const image = document.querySelector(".image");
const content = document.querySelector(".content");
const likesCount = document.querySelector(".likesCount");
document.querySelector(".title").innerText = blogsData.title;
document.querySelector(".title").style.color = "white";
document.querySelector(".title").style.padding = "20px 0px";
document.querySelector(".title").style.fontSize = "20px";
const span = document.createElement("span");
document.querySelector(".likeBtn").addEventListener('click', ()=> likeBlog(blogsData._id))
span.innerText = blogsData.content ? "" : blogsData.description;
likesCount.innerText = blogsData.likes;
image.innerHTML = `<img src='${blogsData.imageUrl}' />`;
document.querySelector('.wordClass').innerHTML = ` ${blogsData.content ? blogsData?.content : ""}`;
document.querySelector('.wordClass').style.color = "white"
content.appendChild(span);
}
function displayComment(commentData) {
const comment = document.querySelector(".comment");
const commentCount = document.querySelector(".commentCount");
let countComment = 0;
for (let i = commentData.length - 1; i >= 0; i--) {
const personComment = document.createElement("div");
personComment.classList.add("person-comment");
personComment.innerHTML = `
<div class="person-header">
<div class="profile-name">
<div class="profile"></div>
<span class="">${commentData[i].name}</span>
</div>
<div class="timeBlock">
<span>${new Date(commentData[i].createdAt).toLocaleDateString()}</span>
<span>${new Date(commentData[i].createdAt).toLocaleTimeString([], {hour:'2-digit', minute: '2-digit'})}</span>
</div>
</div>
<div class="person-content">
<span
>${commentData[i].comment}</span
>
</div>`;
comment.appendChild(personComment);
countComment++;
}
commentCount.innerHTML = countComment;
}
fetchComment()
fetchSingleBlog();
// like or unlike blog
async function likeBlog(id) {
let likedBlog = JSON.parse(localStorage.getItem("likedBlog")) || [];
let action = "";
if (!likedBlog.find((blog) => blog.id === id)) {
likedBlog.push({ id: id });
action = "like";
localStorage.setItem("likedBlog", JSON.stringify(likedBlog));
} else {
const index = likedBlog.findIndex((blog) => blog.id === id);
likedBlog.splice(index, 1);
action = "unlike";
localStorage.setItem("likedBlog", JSON.stringify(likedBlog));
}
await fetch(`https://mybrand-backend-1-8rxh.onrender.com/blog/addLike/${id}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ action: action }),
})
.then((res) => {
if (!res.ok) {
console.log("-------------->error here");
}
return res.json();
})
.then((data) => {
window.location.reload()
})
.catch((error) => {
console.log("------------------->", error.message);
});
}
</script>
<script src="./main.js"></script>
</body>
</html>