This commit is contained in:
j 2023-07-16 11:26:14 +05:30
commit 4b157ed1d1
15 changed files with 305 additions and 133 deletions

View file

@ -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 = ''
})
})