itStepTestRepository/MVC.html at master · AntonPankou/itStepTestRepository · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .section {
            margin-bottom: 10px;
            padding: 1px;
        }
    </style>
</head>

<body>
    <script>
        'use strict';

        const appendElement = (position, tag, id = null) => {
            const elem = document.createElement(tag);
            elem.id = id;
            position.append(elem);
        };

        const appendInput = (form, type, id, label) => {
            const inputContainer = document.createElement('div');

            const input = document.createElement('input');
            input.setAttribute('type', type);
            input.id = id;

            if (label) {
                const labelForInput = document.createElement('label');
                labelForInput.setAttribute('for', id);
                labelForInput.innerText = label;
                inputContainer.append(labelForInput);
            }

            inputContainer.append(input);

            form.append(inputContainer);
        };

        const model = [
            'fehu',
            'uruz',
            'thurisaz',
            'ansuz',
            'raido'
        ];

        let inEditMode = false;

        appendElement(document.body, 'div', 'content');
        appendElement(content, 'div', 'searchContainer');
        appendElement(content, 'div', 'itemsContainer');
        appendElement(content, 'div', 'addNewContainer');
        appendInput(searchContainer, 'text', 'searchInput', 'Search');
        appendElement(searchContainer.children[0], 'button', 'clearButton');
        appendInput(addNewContainer, 'text', 'addNewInput', 'Add new item');
        appendElement(addNewContainer.children[0], 'button', 'addNewButton');
        clearButton.innerText = 'Clear';
        addNewButton.innerText = 'Add';

        clearButton.addEventListener('click', () => {
            searchInput.value = '';
            getModel();
        });

        addNewButton.addEventListener('click', () =>{
            model.push(addNewInput.value);
            getModel();
            addNewInput.value = '';
        });

        const getModel = (array = model) => {
            itemsContainer.innerHTML = '';
            array.forEach((item) => {
                const listItem = document.createElement('div');
                listItem.innerText = item;
                itemsContainer.append(listItem);

                listItem.addEventListener('dblclick', (event) => {
                    if (inEditMode) return
                    inEditMode = true;
                    listItem.innerHTML = `<input type='text' value=${listItem.innerText}><button>Confirm</button>`;
                    const button = listItem.querySelector('button');

                    button.addEventListener('click', event => {
                        const input = listItem.querySelector('input');

                        listItem.innerHTML = `${input.value}`;

                        const index = model.indexOf(item);
                        model[index] = input.value;
                        inEditMode = false;
                    })
                });
            });
        };

        getModel();

        searchInput.addEventListener('change', (event) => {
            const filteredListArray = model.filter(item => {
                return item.startsWith(event.target.value)
            });
            getModel(filteredListArray);
        })

        /*
        model - array of data

        view - html

        controller - inputs and buttons
        */

    </script>
</body>

</html>