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
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");
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|