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

   			});