🛠️ JavaScript CRUD App (Create, Read, Update, Delete)

This project demonstrates a basic CRUD interface using only JavaScript and HTML. All data is stored locally using localStorage.

📄 HTML Structure

<input type="text" id="name-input" placeholder="Enter name" class="border p-2 rounded w-full mb-2">
<button id="add-btn" class="bg-green-500 text-white px-4 py-2 rounded">Add</button>

<ul id="user-list" class="mt-4 space-y-2"></ul>

⚙️ JavaScript Logic

const input = document.getElementById("name-input");
const addBtn = document.getElementById("add-btn");
const userList = document.getElementById("user-list");

let users = JSON.parse(localStorage.getItem("users")) || [];
let editIndex = -1;

function saveUsers() {
  localStorage.setItem("users", JSON.stringify(users));
}

function renderUsers() {
  userList.innerHTML = "";
  users.forEach((user, index) => {
    const li = document.createElement("li");
    li.className = "flex justify-between items-center bg-gray-100 p-2 rounded";

    const span = document.createElement("span");
    span.textContent = user;

    const buttons = document.createElement("div");

    const editBtn = document.createElement("button");
    editBtn.textContent = "Edit";
    editBtn.className = "text-blue-600 mr-2";
    editBtn.onclick = () => {
      input.value = user;
      editIndex = index;
      addBtn.textContent = "Update";
      addBtn.classList.replace("bg-green-500", "bg-yellow-500");
    };

    const delBtn = document.createElement("button");
    delBtn.textContent = "Delete";
    delBtn.className = "text-red-600";
    delBtn.onclick = () => {
      users.splice(index, 1);
      saveUsers();
      renderUsers();
    };

    buttons.appendChild(editBtn);
    buttons.appendChild(delBtn);

    li.appendChild(span);
    li.appendChild(buttons);
    userList.appendChild(li);
  });
}

addBtn.onclick = () => {
  const name = input.value.trim();
  if (name) {
    if (editIndex > -1) {
      users[editIndex] = name;
      editIndex = -1;
      addBtn.textContent = "Add";
      addBtn.classList.replace("bg-yellow-500", "bg-green-500");
    } else {
      users.push(name);
    }
    input.value = "";
    saveUsers();
    renderUsers();
  }
};

renderUsers();

🚀 Features to Add Later

• Search functionality
• Sorting by name
• Pagination for large lists
• Separate fields like name, email, etc.
• Export/import JSON data