Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let data = [
                {
                    "id": 1,
                    "name": "Иван Иванов",
                    "description": "Харесвам работата си и продължавам да се обучавам!",
                    "email": "[email protected]",
                    "phone": "12345344",
                    "title": "Мениджър",
                    "details": [
                            {
                                "background" : "#7eb2ff",
                                "text": "white",
                                "links": "black"
                            }
                        ]
                    },
                {"id": 2, "name": "Мария Петрова", "description": "Да създавам дизайни за уеб приложения ми доставя необходимата доза забавление на работното място", "email": "[email protected]", "phone": "368938736", "title": "Програмист", "details": [{"background" : "#12cc3f","text": "white","links": "#99ff00"}]},
                {"id": 3, "name": "Стефан Колев", "description": "Интересът ми към високите технологии винаги е бил движеща сила за иновации във всяка една сфера от живота ми", "email": "[email protected]", "phone": "866893", "title": "Финансов директор", "details": [{"background" : "#e9e9e9","text": "black","links": "#a1a1a1"}]},
                {"id": 4, "name": "Петя Илиева", "description": "Усъвършенствам своите познания като помагам на младите си колеги!", "email": "[email protected]", "phone": "10237129", "title": "Бодигард", "details": [{"background" : "#2f0c01","text": "white","links": "red"}]},
                {"id": 5, "name": "Деница Филева", "description": "Личното ми мнение е, творчеството в интернет среда е ценен актив.", "email": "[email protected]", "phone": "0739483", "title": "Офис сътрудник", "details": [{"background" : "#77e9e9","text": "#112211","links": "#099011"}]}];


                for (let i = 0; i < 5; i++) {
                    document.querySelectorAll('.card')[i].style.background = data[i].details[0].background;

                    [...document.querySelectorAll('.card')[i].
                            querySelectorAll('.list-group-item')].map(
                                                    item => item.style.background = data[i].details[0].background);

                    [...document.querySelectorAll('.card')[i].
                            querySelectorAll('a')].map(
                                                    item => item.style.color = data[i].details[0].links);

                    document.querySelectorAll('.card')[i].style.color = data[i].details[0].text;

                    [...document.querySelectorAll('.card')[i].
                            querySelectorAll('.list-group-item')].map(
                                                    item => item.style.color = data[i].details[0].text);

                    document.querySelectorAll('.card')[i].
                            querySelectorAll('.card-title')[0].innerText = data[i].name;

                    document.querySelectorAll('.card')[i].
                            querySelectorAll('.card-text')[0].innerText = data[i].description;

                    document.querySelectorAll('.card')[i].
                            querySelectorAll('.list-group-item')[0].innerText = data[i].email;
                    document.querySelectorAll('.card')[i].
                            querySelectorAll('.list-group-item')[1].innerText = data[i].phone;
                    document.querySelectorAll('.card')[i].
                            querySelectorAll('.list-group-item')[2].innerText = data[i].title;

                    document.querySelectorAll('.card')[i].
                            querySelectorAll('.card-link')[0].addEventListener('click', (e) => {

                            if(e.target.innerText != 'Save'){
                                e.target.innerText = 'Save';
                                document.querySelectorAll('.card')[i].
                                    querySelectorAll('.list-group-item')[0].innerHTML = '<input type="text" value="' + data[i].email + '">';
                                document.querySelectorAll('.card')[i].
                                    querySelectorAll('.list-group-item')[1].innerHTML = '<input type="text" value="' + data[i].phone  + '">';
                                document.querySelectorAll('.card')[i].
                                    querySelectorAll('.list-group-item')[2].innerHTML = '<input type="text" value="' + data[i].title  + '">';
                                e.target.nextElementSibling.classList.remove('d-none');
                                } else {
                                    e.target.innerText = 'Edit';
                                    data[i].email = e.target.parentNode.previousElementSibling.querySelectorAll('[type=text]')[0].value;
                                    data[i].phone = e.target.parentNode.previousElementSibling.querySelectorAll('[type=text]')[1].value;
                                    data[i].title = e.target.parentNode.previousElementSibling.querySelectorAll('[type=text]')[2].value;
                                    e.target.nextElementSibling.classList.add('d-none');
                                    e.target.parentNode.previousElementSibling.
                                            querySelectorAll('.list-group-item')[0].innerText = data[i].email;
                                    e.target.parentNode.previousElementSibling.
                                            querySelectorAll('.list-group-item')[1].innerText = data[i].phone;
                                    e.target.parentNode.previousElementSibling.
                                            querySelectorAll('.list-group-item')[2].innerText = data[i].title;
                                }
                                console.log(data);
                        });

                    document.querySelectorAll('.card')[i].
                            querySelectorAll('.card-link')[1].addEventListener('click', (e) => {
                                e.target.classList.add('d-none');
                                    e.target.parentNode.previousElementSibling.
                                            querySelectorAll('.list-group-item')[0].innerText = data[i].email;
                                    e.target.parentNode.previousElementSibling.
                                            querySelectorAll('.list-group-item')[1].innerText = data[i].phone;
                                    e.target.parentNode.previousElementSibling.
                                            querySelectorAll('.list-group-item')[2].innerText = data[i].title;
                            })

                }

        });
    </script>
</head>
<body>
    <div class="container my-3">
        <div class="row">
            <div class="col-4 my-2">
                <div class="card">
                    <img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                    <div class="card-body">
                        <a href="#" class="card-link">Edit</a>
                        <a href="#" class="d-none card-link">Cancel</a>
                    </div>
                </div>
            </div>
            <div class="col-4 my-2">
                <div class="card">
                    <img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                    <div class="card-body">
                        <a href="#" class="card-link">Edit</a>
                        <a href="#" class="d-none card-link">Cancel</a>
                    </div>
                </div>
            </div>
            <div class="col-4 my-2">
                <div class="card">
                    <img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                    <div class="card-body">
                        <a href="#" class="card-link">Edit</a>
                        <a href="#" class="d-none card-link">Cancel</a>
                    </div>
                </div>
            </div>
            <div class="col-4 my-2">
                <div class="card">
                    <img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                    <div class="card-body">
                        <a href="#" class="card-link">Edit</a>
                        <a href="#" class="d-none card-link">Cancel</a>
                    </div>
                </div>
            </div>
            <div class="col-4 my-2">
                <div class="card">
                    <img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                    <div class="card-body">
                        <a href="#" class="card-link">Edit</a>
                        <a href="#" class="d-none card-link">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>