You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

160 lines
3.6 KiB
JavaScript

console.log('hello world');
// const clicker = document.getElementbyId('clicker');
// console.log(clicker);
// let counter= 0;
// clicker.eventListener('click', function()){
// counter++;
// alert('the button has been clicked' + counter + "times")
// console.log('the button has been clicked!');
// }
fetch( 'https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
// console.log(data);
showPosts(data)
});
const showPosts = (posts) => {
let postEntries = '';
posts.forEach((post) =>{
postEntries += `
<div id="post-${post.id}">
<h3 id="post-title-${post.id}">${post.title}</h3>
<p id="post-body-${post.id}">${post.body}</p>
<button onclick="edit-Post">(${post.id}')'Delete'</button>
<button onclick="deletePost">(${post.id}')'Delete'</button>
</div>
`;
});
document.querySelector('#div-post-entries').innerHTML = postEntries;
}
document.querySelector('#for-add-post').addEventListener('submit',(event) => {
event.preventDefault();
let titleInput = document.querySelector('#txt-title');
let bodyInput = document.querySelector('#txt-body');
console.log(titleInput.value);
console.log(bodyInput.value);
// edit
fetch('https://jsonplaceholder.typicode.com/posts',{
method: 'POST',
body: JSON.stringify({
title:titleInput.value,
body:bodyInput.value,
userId:1
}),
headers:{'Content-Type': 'application/json'
}
} )
.then(response => response.json())
.then((data) => {
console.log(data)
alert('successfully added.');
titleInput.value = null;
bodyInput.value = null;
});
console.log('Hello for has been submitted');
});
const editPost = (id) =>{
let title = document.querySelector(`post-title${id} `).innerHTML;
let body = document.querySelector(`post-body${id} `).innerHTML;
document.querySelector('#txt-edit-id').value = id;
document.querySelector('#txt-edit-title-id').value = title;
document.querySelector('#txt-edit-body').value = body;
document.querySelector('#btn-submit-update').removeAttribute(disabled);
};
document.querySelector('#for-add-post').addEventListener('submit',(e) => {
e.preventDefault();
fetch('https://jsonplaceholder.typicode.com/posts/1',{
method: 'PUT',
body: JSON.stringify({
id: document.querySelector('#txt-edit-id').value,
title: document.querySelector('#txt-edit-title').value,
body: document.querySelector('#txt-edit-body').value,
userId: 1
}),
headers:{'Content-Type': 'application/json'
}
} )
.then(response => response.json())
.then((data) => {
console.log(data)
alert('successfully added.');
document.querySelector('#txt-edit-id').value = null;
document.querySelector('#txt-edit-title-id').value = null;
document.querySelector('#txt-edit-body').value = null;
document.querySelector('#btn-submit-update').removeAttribute(disabled, true);
});
});
// DELETE BUTTON
const deletePost = (id) => {
const postDiv = document.querySelector(`#post-${id}`);
fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: "DELETE",
headers: {"Content-type": "application/json"}
})
.then(response => {
console.log("Deleted Successfully");
alert("Deleted Successfully");
postDiv.remove();
});
};
document.querySelector("#delete-all").addEventListener('click', () => {
document.querySelector("#div-post-entries").innerHTML = "";
alert("All Post Deleted");
});