ARTICLE AD BOX
let fetchURL = "https://jsonplaceholder.typicode.com/posts/";
const form = document.getElementById("post-form");
const title_input = document.getElementById("title-input");
const body_input = document.getElementById("body-input");
const posts_container = document.getElementById("posts-container");
const saveBtn = document.getElementById("save-btn");
const removeSaveBtn = document.getElementById("remove-save-btn");
let editId = null;
let globalIdx = null;
let globalData = [];
function getSaveData() {
let savedData = JSON.parse(localStorage.getItem("saveData"));
if (savedData) {
globalData = savedData;
renderData(globalData);
return true;
} else {
return false;
}
}
getSaveData();
if (getSaveData() == false) {
console.log("No saved data found, Fetching new data");
fetchData();
}
function renderData(data) {
posts_container.innerHTML = "";
data.forEach((element, idx) => {
posts_container.innerHTML += `
<div class="post-card">
<div class="post-title">${element.title}</div>
<div class="post-body">${element.body}</div>
<div class="post-actions">
<button class="edit-btn" onclick=editItem(${idx});>Edit</button>
<button class="delete-btn" onclick=deleteItem(${idx});>Delete</button>
</div>
</div>
`;
});
}
async function fetchData() {
try {
let response = await fetch(fetchURL);
globalData = await response.json();
if (response.ok) {
console.log(globalData);
renderData(globalData);
}
} catch (error) {
console.log("something went wrong");
}
}
form.addEventListener("submit", async (e) => {
e.preventDefault();
const title = title_input.value.trim();
const body = body_input.value.trim();
let data_object = {
title: title,
body: body,
userId: 1,
};
if (editId) {
globalData[globalIdx].title = title_input.value;
globalData[globalIdx].body = body_input.value;
globalData[globalIdx].id = editId;
globalData[globalIdx].userId = 1;
renderData(globalData);
globalIdx = null;
editId = null;
} else {
globalData.push(data_object);
renderData(globalData);
}
form.reset();
});
function editItem(index) {
title_input.value = globalData[index].title;
body_input.value = globalData[index].body;
editId = globalData[index].id;
globalIdx = index;
}
function deleteItem(index) {
globalData.splice(index, 1);
renderData(globalData);
}
saveBtn.addEventListener("click", () => {
console.log("Data is successfully saved.");
localStorage.setItem("saveData", JSON.stringify(globalData));
});
removeSaveBtn.addEventListener("click", () => {
console.log("save data is being removed");
localStorage.removeItem("saveData");
});
I have created a CRUD app for my learning, currently I am just a begginer, and don't know what are best practices, this is js code, I used ai to get the optimized code but I thought that I should also take some advise on stackoverflow. I wanna know everything which can be improved in this code. Also how much coding in a day is good for begginers. Every advise will be admired.
