I worked on a CRUD app for my learning and I wanna know what are the best practices to write the code

20 hours ago 1
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.

Read Entire Article