main.js

let name = document.getElementById("name");
let city = document.getElementById("city");
let email = document.getElementById("email");
let age = document.getElementById("age");
let country = document.getElementById("country");
let total = document.getElementById("total");
let addButton = document.getElementById("addButton");
let searchInput = document.getElementById("searchInput");
let searchButton = document.getElementById("searchButton");

displayUsers();
function getTotalUsers() {
    let users = JSON.parse(localStorage.getItem("users")) || [];
    total.textContent = `Total users : ${users.length}`;
}

getTotalUsers()

function clearInputs() {
    name.value = "";
    city.value = "";
    email.value = "";
    age.value = "";
    country.value = "";
}

function addData() {
    let users = JSON.parse(localStorage.getItem("users")) || [];
    let user = {
        name: name.value,
        email: email.value,
        city: city.value,
        age: age.value,
        country: country.value
    };

    if (!user.name || !user.city || !user.email || !user.country) {
        alert("Please fill in all fields.");
        return;
    }

    if (user.age <= 0 || user.age == "") {
        alert("Please enter a valid age.");
        return;
    }

    if (!validateEmail(user.email)) {
        alert("Please enter a valid email address.");
        return;
    }

    users.push(user);
    localStorage.setItem("users", JSON.stringify(users));
    clearInputs();
    getTotalUsers();
}

function displayUsers() {
    const users = JSON.parse(localStorage.getItem("users")) || [];
    const tbody = document.getElementById("userTableBody");
    tbody.innerHTML = "";
    users.forEach((user, index) => {
        const row = document.createElement("tr");
        row.innerHTML = `
            <td>${user.name}</td>
            <td>${user.email}</td>
            <td>${user.age}</td>
            <td>${user.city}</td>
            <td>${user.country}</td>
            <td>
                <button onclick="deleteUser(${index})">Delete</button>
                <button onclick="editUser(${index})">Edit</button>
            </td>
        `;
        tbody.appendChild(row);

    });
}


function deleteUser(index) {
    let users = JSON.parse(localStorage.getItem("users")) || [];
    users.splice(index, 1);
    localStorage.setItem("users", JSON.stringify(users));
    displayUsers();
    getTotalUsers();
}

function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

function editUser(index) {
    let users = JSON.parse(localStorage.getItem("users")) || [];
    let user = users[index];
    name.value = user.name;
    email.value = user.email;
    city.value = user.city;
    age.value = user.age;
    country.value = user.country;
    deleteUser(index);
};

searchButton.onclick = function () {
    const query = searchInput.value.toLowerCase();
    const users = JSON.parse(localStorage.getItem("users")) || [];
    const filteredUsers = users.filter(user =>
        user.name.toLowerCase().includes(query) ||
        user.email.toLowerCase().includes(query) ||
        user.city.toLowerCase().includes(query) ||
        user.country.toLowerCase().includes(query)
    );
    const tbody = document.getElementById("userTableBody");
    tbody.innerHTML = "";
    filteredUsers.forEach((user, index) => {
        const row = document.createElement("tr");
        row.innerHTML = `
            <td>${user.name}</td>
            <td>${user.email}</td>
            <td>${user.age}</td>
            <td>${user.city}</td>
            <td>${user.country}</td>
            <td>
                <button onclick="deleteUser(${index})">Delete</button>
                <button onclick="editUser(${index})">Edit</button>
            </td>
        `;
        tbody.appendChild(row);
    });
};