Crud-FE/data.js at main · nurafifahwidya/Crud-FE · 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
var row = null;

const studentData = document.querySelector('#studentData');
const studentForm = document.querySelector('#studentForm');
const submitButton = document.getElementById('submitButton')
const studentName = document.getElementById('studentName');
const studentNim = document.getElementById('studentNim');
const studentFaculty = document.getElementById('studentFaculty');
const studentMajor = document.getElementById('studentMajor');

function clearValues(){
    studentName.value = "";
    studentNim.value = "";
    studentFaculty.value = "";
    studentMajor.value = "";
}

//delete & edit
studentData.addEventListener('click', (e)=>{
    target = e.target;
    // console.log(target);
    if(target.classList.contains('delete')){
        target.parentNode.parentNode.remove();
        console.log(target.parentNode.parentNode);
    }
    if(target.classList.contains('edit')){
        row = target.parentNode.parentNode;

        studentName.value = row.children[0].textContent;
        studentNim.value = row.children[1].textContent;
        studentFaculty.value = row.children[2].textContent;
        studentMajor.value = row.children[3].textContent;
    }
})

//submit
studentForm.addEventListener('submit',(e)=>{
    e.preventDefault();
    target = e.target;

    if(studentName.value == ""|studentNim.value == ""|studentFaculty.value == ""|studentMajor.value == ""){
        alert('isi dlu bg');
    } else{
        if( row == null){
            const newData = document.createElement("div");
            newData.classList.add('card');

            newData.innerHTML = `
            <li>${studentName.value}</li>
            <li>${studentNim.value}</li>
            <li>${studentFaculty.value}</li>
            <li>${studentMajor.value}</li>
            <div class="buttons">
            <li></li>
            <button class="btn-submit edit">Edit</button>
            <button class="btn-submit delete">Delete</button>
            <li></li>
            </div>
            `;

            studentData.appendChild(newData);
            row = null;
            clearValues();
        } else{
            if(row.children[0].innerHTML != studentName.value |row.children[1].innerHTML != studentNim.value |row.children[2].innerHTML != studentFaculty.value|row.children[3].innerHTML != studentMajor.value){
                row.children[4].children[0].innerHTML = "(edited)";
            }
            row.children[0].innerHTML = studentName.value;
            row.children[1].innerHTML = studentNim.value;
            row.children[2].innerHTML = studentFaculty.value;
            row.children[3].innerHTML = studentMajor.value;

            clearValues();
            row = null;
        }

    }

})

function notification(message){

}