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

html/lab5/task4/script.js
62 строки2 KB
ChizhenkoM
lab8
17 апр 2026, 08:29
17 апр 2026, 08:2972323f6
'use strict';

let contacts = [
    { lastName: 'Иванов', firstName: 'Иван', age: 25, phone: '+7(999)123-45-67' },
    { lastName: 'Петров', firstName: 'Петр', age: 30, phone: '+7(999)234-56-78' },
    { lastName: 'Сергеев', firstName: 'Сергей', age: 35, phone: '+7(999)987-65-43' }
];

function renderContacts(filter = { lastName: '', firstName: '', age: '', phone: '' }) {
    const tbody = document.getElementById('contactsBody');
    tbody.innerHTML = '';

    const filtered = contacts.filter(contact => {
        return (!filter.lastName || contact.lastName.toLowerCase().includes(filter.lastName.toLowerCase())) &&
               (!filter.firstName || contact.firstName.toLowerCase().includes(filter.firstName.toLowerCase())) &&
               (!filter.age || String(contact.age).includes(filter.age)) &&
               (!filter.phone || contact.phone.includes(filter.phone));
    });

    filtered.forEach(contact => {
        const row = tbody.insertRow();
        row.insertCell(0).textContent = contact.lastName;
        row.insertCell(1).textContent = contact.firstName;
        row.insertCell(2).textContent = contact.age;
        row.insertCell(3).textContent = contact.phone;
    });
}

function addContact() {
    const lastName = document.getElementById('lastName').value.trim();
    const firstName = document.getElementById('firstName').value.trim();
    const age = parseInt(document.getElementById('age').value);
    const phone = document.getElementById('phone').value.trim();

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

    contacts.push({ lastName, firstName, age, phone });
    document.getElementById('lastName').value = '';
    document.getElementById('firstName').value = '';
    document.getElementById('age').value = '';
    document.getElementById('phone').value = '';

    renderContacts();
}

function applyFilter() {
    const filter = {
        lastName: document.getElementById('filterLastName').value,
        firstName: document.getElementById('filterFirstName').value,
        age: document.getElementById('filterAge').value,
        phone: document.getElementById('filterPhone').value
    };
    renderContacts(filter);
}

document.getElementById('addContactBtn').addEventListener('click', addContact);
document.getElementById('filterBtn').addEventListener('click', applyFilter);

renderContacts();