html/lab5/task4/script.js - master - Coderdev/web-static-labs

html/lab5/task4/script.js
60 строк2 KB
Coderdev
12 май 2026, 12:37
12 май 2026, 12:37d8ecd0f
document.addEventListener('DOMContentLoaded', () => {
    const contactBody = document.getElementById('contactBody');
    const addContactBtn = document.getElementById('addContactBtn');
    const applyFilterBtn = document.getElementById('applyFilterBtn');

    let contacts = [];

    function renderTable(dataToRender) {
        contactBody.innerHTML = '';
        
        dataToRender.forEach(contact => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${contact.lastName}</td>
                <td>${contact.firstName}</td>
                <td>${contact.age}</td>
                <td>${contact.phone}</td>
            `;
            contactBody.appendChild(row);
        });
    }

    addContactBtn.addEventListener('click', () => {
        const lastName = document.getElementById('lastName').value.trim();
        const firstName = document.getElementById('firstName').value.trim();
        const age = document.getElementById('age').value.trim();
        const phone = document.getElementById('phone').value.trim();

        if (!lastName || !firstName || !age || !phone) {
            alert("Заполните все поля!");
            return;
        }

        const newContact = { lastName, firstName, age, phone };
        contacts.push(newContact);

        renderTable(contacts);

        document.getElementById('lastName').value = '';
        document.getElementById('firstName').value = '';
        document.getElementById('age').value = '';
        document.getElementById('phone').value = '';
    });

    applyFilterBtn.addEventListener('click', () => {
        const fLast = document.getElementById('filterLastName').value.toLowerCase();
        const fFirst = document.getElementById('filterFirstName').value.toLowerCase();
        const fAge = document.getElementById('filterAge').value.toLowerCase();
        const fPhone = document.getElementById('filterPhone').value.toLowerCase();

        const filtered = contacts.filter(contact => {
            return contact.lastName.toLowerCase().includes(fLast) &&
                   contact.firstName.toLowerCase().includes(fFirst) &&
                   contact.age.toString().toLowerCase().includes(fAge) &&
                   contact.phone.toLowerCase().includes(fPhone);
        });

        renderTable(filtered);
    });
});