comments
This commit is contained in:
parent
100fe79b1d
commit
4b157ed1d1
15 changed files with 305 additions and 133 deletions
|
|
@ -1,26 +1,41 @@
|
|||
function renderComments(data) {
|
||||
var cdiv = div.querySelector('.comments')
|
||||
function renderComments(cdiv, data) {
|
||||
cdiv.innerHTML = `
|
||||
<h3>
|
||||
<span class="icon">${icon.down}</span>
|
||||
Comments
|
||||
</h3>
|
||||
<div class="block">
|
||||
<div class="comments-content">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
const content = cdiv.querySelector('.comments-content')
|
||||
comments.forEach(comment => {
|
||||
var c = document.createElement('div')
|
||||
c.className = 'comment'
|
||||
c.innerHTML = `
|
||||
<div class="comment">
|
||||
<div class="name">${comment.name}</div>
|
||||
<div class="date">${comment.date}</div>
|
||||
<div class="text">${comment.text}</div>
|
||||
<div class="text">${comment.text}</div>
|
||||
<div class="meta">
|
||||
by <span class="name">${comment.name}</span>
|
||||
on
|
||||
<span class="date">${comment.date}</span>
|
||||
</div>
|
||||
`
|
||||
cdiv.append(c)
|
||||
content.append(c)
|
||||
})
|
||||
var add = document.querySelector('.add-comment')
|
||||
add.style.display = 'block'
|
||||
cdiv.append(add)
|
||||
cdiv.querySelector('.block').append(add)
|
||||
cdiv.querySelector('h3').addEventListener("click", event => {
|
||||
var img = cdiv.querySelector('h3 .icon')
|
||||
if (cdiv.classList.contains("collapsed")) {
|
||||
cdiv.classList.remove("collapsed")
|
||||
img.innerHTML = icon.down
|
||||
} else {
|
||||
cdiv.classList.add("collapsed")
|
||||
img.innerHTML = icon.right
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
document.querySelector('button#add-comment').addEventListener('click', event => {
|
||||
|
|
@ -46,21 +61,20 @@ document.querySelector('button#add-comment').addEventListener('click', event =>
|
|||
}).then(response => {
|
||||
return response.json()
|
||||
}).then(response => {
|
||||
var comment= document.createElement('div')
|
||||
var comment = document.createElement('div')
|
||||
comment.classList.add('comment')
|
||||
var name = document.createElement('div')
|
||||
name.classList.add('name')
|
||||
name.innerText = response.name
|
||||
comment.append(name)
|
||||
var date = document.createElement('div')
|
||||
date.classList.add('date')
|
||||
date.innerText = response.date
|
||||
comment.append(date)
|
||||
var text = document.createElement('div')
|
||||
text.classList.add('name')
|
||||
text.innerText = response.text
|
||||
comment.append(text)
|
||||
document.querySelector('.comments').append(comment)
|
||||
comment.innerHTML = `
|
||||
<div class="text"></div>
|
||||
<div class="meta">
|
||||
by <span class="name"></span>
|
||||
on
|
||||
<span class="date"></span>
|
||||
</div>
|
||||
`
|
||||
comment.querySelector('.name').innerText = response.name
|
||||
comment.querySelector('.date').innerText = response.date
|
||||
comment.querySelector('.text').innerText = response.text
|
||||
document.querySelector('.comments .comments-content').append(comment)
|
||||
document.querySelector('.add-comment textarea').value = ''
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue