A_Project_M2/script.js at main · ZaurS2001/A_Project_M2 · 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
let todo = document.querySelector('ul');
let inputData = document.querySelector('.inp');
let submit = document.querySelector('.add');
let sorting = document.querySelector('.sort');
let sortsrc = document.querySelector('.method1').getAttribute('src');
let elems = [];
let elemnums = [];
let elemstrings = [];
function addElement() {
    if (/^[0-9]+$/.test(inputData.value) == true) {
        elemnums.push(+inputData.value);
    }
    else {
        elemstrings.push(inputData.value);
    }
    console.log(elemnums);
    console.log(elemstrings);
    todo.innerHTML += `<li><div class="elem">${inputData.value}<button class="del" style="border: none;background-color: white;margin-right: 10px;"><img class="remove" src="files/remove.svg"></button></div></li>`;
    let removes = document.querySelectorAll('.del');
    removes.forEach(removeElement);
    inputData.value = "";
}
function addElementWithEnter(event) {
    if (event.key=="Enter") {
        if (/^[0-9]+$/.test(inputData.value) == true) {
            elemnums.push(+inputData.value);
        }
        else {
            elemstrings.push(inputData.value);
        }
        console.log(elemnums);
        console.log(elemstrings);
        todo.innerHTML += `<li><div class="elem">${inputData.value}<button class="del" style="border: none;background-color: white;margin-right: 10px;"><img class="remove" src="files/remove.svg"></button></div></li>`;
        let removes = document.querySelectorAll('.del');
        removes.forEach(removeElement);
        inputData.value = "";
    }
}
function removeElement(el) {
    el.addEventListener('click', (event) => {
        let itemtoDelete = event.target.closest('li').innerText;
        event.target.closest('li').remove();
        if (/^[0-9]+$/.test(itemtoDelete) == true) {
            elemnums.splice(elemnums.indexOf(+itemtoDelete), 1);
        }
        else {
            elemstrings.splice(elemstrings.indexOf(itemtoDelete), 1);
        }
        console.log(elemnums);
        console.log(elemstrings);
    });
}
function sortElements() {
    if (sortsrc == "files/asc.svg") {
        sorting.innerHTML = `<img class="method2" src="files/desc.svg">`;
        sortsrc = "files/desc.svg";
        elemnums.sort((a,b) => {
            return a-b;
        });
        elemstrings.sort();
        elems = elemnums.concat(elemstrings);
        console.log(elems);
        console.log(elemnums);
        console.log(elemstrings);
        todo.innerHTML = '';
        elems.forEach((item) => {
            todo.innerHTML += `<li><div class="elem">${item}<button class="del" style="border: none;background-color: white;margin-right: 10px;"><img class="remove" src="files/remove.svg"></button></div></li>`;
        });
        let removes = document.querySelectorAll('.del');
        removes.forEach(removeElement);
    }
    else if (sortsrc == "files/desc.svg") {
        sorting.innerHTML = `<img class="method1" src="files/asc.svg">`;
        sortsrc = "files/asc.svg";
        elemnums.sort((a,b) => {
            return b-a;
        });
        elemstrings.sort().reverse();
        elems = elemnums.concat(elemstrings);
        console.log(elems);
        console.log(elemnums);
        console.log(elemstrings);
        todo.innerHTML = '';
        elems.forEach((item) => {
            todo.innerHTML += `<li><div class="elem">${item}<button class="del" style="border: none;background-color: white;margin-right: 10px;"><img class="remove" src="files/remove.svg"></button></div></li>`;
        });
        let removes = document.querySelectorAll('.del');
        removes.forEach(removeElement);
    }
}
submit.addEventListener('click', addElement);
document.addEventListener('keypress', addElementWithEnter);
sorting.addEventListener('click', sortElements);