-
Notifications
You must be signed in to change notification settings - Fork 1
/
script.js
90 lines (78 loc) · 3.43 KB
/
script.js
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
function openNav() {
document.getElementById("myNav").style.width = "100%";
document.getElementsByClassName('overlay-content')[0].style.display = 'block'
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementsByClassName('overlay-content')[0].style.display = 'none';
}
const baseUrl = window.location.protocol + "//" + window.location.host;
let newcomment = document.getElementById('new-comment');
if(newcomment != undefined){
newcomment.addEventListener('keypress', (e)=>{
let key = e.which || e.keyCode;
if (key === 13) {
let inputComment = document.getElementById('new-comment').value;
axios.post(`${baseUrl}/comment`, {comment: inputComment}).then(data=>{
newComment(data);
});
inputComment.value = '';
}
});}
//this renders each new comment
const newComment = (data) => {
let container = document.getElementsByClassName('comment-container')[0];
let articleComment = document.createElement("div");
articleComment.classList = 'article-comment';
let imgUser = document.createElement('img');
imgUser.setAttribute('height','100px');
imgUser.setAttribute('src', data.data.user[0].profileImg)
articleComment.appendChild(imgUser);
let commentContent = document.createElement("div");
commentContent.classList = 'article-comment-content';
let h3Name = document.createElement('h3');
h3Name.innerHTML = data.data.user[0].username;
let descriptionUser = document.createElement('p');
descriptionUser.innerHTML = data.data.data.content;
let ratingUser = document.createElement('p');
ratingUser.classList = data.data.user[0].username;
ratingUser.innerHTML = `<em>Rating: </em>${data.data.data.rating || 0}`;
let likeButton = document.createElement('button');
likeButton.innerHTML = 'Like';
likeButton.classList = 'like-button';
likeButton.value = data.data.data._id;
commentContent.appendChild(h3Name);
commentContent.appendChild(descriptionUser);
commentContent.appendChild(ratingUser);
commentContent.appendChild(likeButton);
articleComment.appendChild(commentContent);
container.appendChild(articleComment);
}
let likeButton = document.getElementById('like-button');
if(likeButton != undefined){
likeButton.addEventListener('click', (e) => {
axios.patch(`${baseUrl}/article`).then(data => {
document.getElementById('ratingA').innerHTML = `<em>Source reputation: </em>${data.data.rating}`;
if(data.data.liked)likeButton.innerHTML="Unlike";
else{likeButton.innerHTML="Like"}
})
})
}
let commentBox = document.getElementsByClassName('comment-container')[0];
if(commentBox != undefined){
commentBox.addEventListener('click', (e)=>{
if(e.target.className == 'like-button'){
let username = e.target.parentNode.getElementsByTagName('h3')[0].innerHTML;
let ratingElement = e.target.parentNode.getElementsByTagName('p')[1];
let commentId = e.target.value;
axios.patch(`${baseUrl}/comment`, {data: username, commentId: commentId}).then(data => {
// document.getElementsByClassName('username').forEach(element => {
// element.innerHTML = `<em>Rating: </em>${data.data.rating}`;
// });
ratingElement.innerHTML = `<em>Rating: </em>${data.data.rating}`;
if(data.data.liked)e.target.innerHTML="Unlike";
else{e.target.innerHTML="Like"}
})
}
});
}