Урок 14. Массивы объектов

Блок поиска

Блок авторизации

Блок замены пользователя

    
------------------------------------------------------------------------------------------------------------------------
HTML КОД:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Урок 14. Массивы объектов</title>
</head>
<body>
    <header></header>
    <main>
        <h1>Урок 14. Массивы объектов</h1>

        <h2 style="text-align: center">Блок поиска</h2>
        <div>
            <label for="al_10">Кого ищем?</label>
            <input type="text" value="" id="al_10"></input>
            <button id="btn_al_10">Передать</button>
        </div>

        <h2 style="text-align: center">Блок авторизации</h2>
        <div style="border-radius: 10px; border: 1px solid black; padding: 10px; margin-top: 20px;">
            <div style="margin-bottom: 10px;">
                <label for="al_11_1">Введите логин: </label>
                <input type="text" value="user1" id="al_11_1"></input>
            </div>
            <div style="margin-bottom: 10px;">
                <label for="al_11_2">Введите пароль: </label>
                <input type="text" value="pass1" id="al_11_2">
            </div>
            <button id="btn_al_11">Авторизация</button>
        </div>

        <h2 style="text-align: center;">Блок замены пользователя</h2>
        <div style="border-radius: 10px; border: 1px solid black; padding: 10px; margin-top: 20px;">
            <div style="margin-bottom: 10px;">
                <label for="al_12_1">Кого ищем:</label>
                <input type="text" value="Оксана" id="al_12_1"></input>
            </div>
            <div style="margin-bottom: 20px;">
                <label for="al_12_2">Какого возраста:</label>
                <input type="text" value="25" id="al_12_2"></input>
            </div>
            <hr>
            <div style="margin-bottom: 10px;">
                <label for="al_12_3">На какое имя пользователя производим замену:</label>
                <input type="text" value="user2" id="al_12_3"></input>
            </div>
            <div style="margin-bottom: 30px;">
                <label for="al_12_4">Какой новый возраст:</label>
                <input type="text" value="20" id="al_12_4"></input>
            </div>
            <button style="margin-bottom: 10px; border-radius: 6px;" id="btn_al_12">Заменить</button>
        </div>

        <script src="js/index.js"></script>
    </main>
    <footer></footer>
</body>
</html>

------------------------------------------------------------------------------------------------------------------------
JS КОД:

let massObject = [
    {
        name: 'Оксана',
        age: 25,
    },
    {
        name: 'Петр',
        age: 20,
    },
    {
        name: 'Кристина',
        age: 15,
    },
]
console.log("Массив пользователей:");
console.log(massObject);

let f = massObject[0].name
console.log("Имя первого пользователя в массиве: " + f);

let btn_al_10_clk = document.querySelector("#btn_al_10");
btn_al_10_clk.onclick = () => {
    for (let i = 0; i < massObject.length; i++) {
        if (massObject[0].name === document.querySelector("#al_10").value) {
            console.log("Имя: " + massObject[0].name + " Возраст: " + massObject[0].age);
            break;
        }
        else if (massObject[1].name === document.querySelector("#al_10").value) {
            console.log("Имя: " + massObject[1].name + " Возраст: " + massObject[1].age);
            break;
        }
        else {
            console.log("Такого имени нет");
            break;
        }
    }
}

let massPassword = [
    {
        log: 'user1',
        pass: 'pass1'
    },
    {
        log: 'user2',
        pass: 'pass2'
    },
    {
        log: 'user3',
        pass: 'pass3'
    }
]

console.log("Массив пользователей и паролей:");
console.log(massPassword)

let btn_al_11 = document.querySelector("#btn_al_11");
btn_al_11.onclick = () => {
    let k = false;
    for (let i = 0; i < massPassword.length; i++) {
        if (document.querySelector("#al_11_1").value === massPassword[i].log &&
            document.querySelector("#al_11_2").value === massPassword[i].pass) {
            k = true;
            break;
        }
    }
    if (k) {
        console.log("Авторизация прошла успешно");
    }
    else {
        console.log("Ошибка авторизации");
    }
}

let btn_al_12 = document.querySelector("#btn_al_12");

btn_al_12.onclick = () => {
    let k = false;
    let name_old = document.querySelector("#al_12_1").value;
    let age_old = document.querySelector("#al_12_2").value;

    let name_new = document.querySelector("#al_12_3").value;
    let age_new = document.querySelector("#al_12_4").value;

    for (let i = 0; i < massObject.length; i++) {
        if (massObject[i].name === name_old &&
            massObject[i].age === +age_old)
        {
            massObject[i].name = name_new;
            massObject[i].age = +age_new;
            k = true;
            break;
        }
    }
    if (k) {
        console.log("Новый массив с данными:");
        console.log(massObject);
    }
    else {
        console.log('Пользователь не найден!')
    }
}