App/index.html at main · AliDoCode/App · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Crud App</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  </head>
  <body class="bg-dark" >

      <nav class="navbar navbar-expand-lg navbar-dark bg-success">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Crud App</a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

        </div>
      </nav>
      <div class="container  mt-5 col-6">
        <div class="input-group  border rounded-1 border-5 border-success mb-3">
          <input type="text" class="form-control" placeholder="Chapter Name" aria-label="Recipient's username" aria-describedby="button-addon2" />
          <button id="add_btn" class="btn btn-outline-success" type="button" id="button-addon2">Add</button>
        </div>
        <ul id="parentList" class="list-group rounded-1 border-5 border border-success">
          <li class="list-group-item d-flex justify-content-between">
            <h4 class="flex-grow-1">Chapter 1</h4>
            <button class="btn btn-warning mx-1" onclick="editChapter(this)">Edit</button>
            <button class="btn btn-danger" onclick="removeChapter(this)">Remove</button>
          </li>
        </ul>
      </div>

    <script>
      let addBtn = document.getElementById("add_btn");
      addBtn.addEventListener("click", addChapter);
      let parentList = document.getElementById("parentList");
      function addChapter(e) {
        if (parentList.children[0].className == "emptyMsg") {
          parentList.children[0].remove();
        }
        let currentBtn = e.currentTarget;
        let currentInput = currentBtn.previousElementSibling;
        // console.log(currentInput.value);
        let currentChapterName = currentInput.value;

        let newLi = document.createElement("li");
        // newLi.classList.add('list-group-item')
        newLi.className = "list-group-item d-flex justify-content-between";
        newLi.innerHTML = `<h4 class="flex-grow-1">${currentChapterName}</h4>
             <button class="btn btn-warning mx-1" onclick="editChapter(this)">Edit</button>
             <button class="btn btn-danger" onclick="removeChapter(this)"   >Remove</button>`;
        parentList.appendChild(newLi);
      }
      function removeChapter(currElement) {
        currElement.parentElement.remove();
        let parentList = document.getElementById("parentList");
        if (parentList.children.length <= 0) {
          let newEmpty = document.createElement("h3");
          newEmpty.classList.add("emptyMsg");
          newEmpty.textContent = "Nothing is here . Please add some chapter name";
          parentList.appendChild(newEmpty);
        }
      }
      function editChapter(currElement) {
        if (currElement.textContent == "Done") {
          currElement.textContent = " Edit";
          let currChapterName = currElement.previousElementSibling.value;
          let currHeading = document.createElement("h3");
          currHeading.className = "flex-grow-1";
          currHeading.textContent = currChapterName;
          currElement.parentElement.replaceChild(currHeading, currElement.previousElementSibling);
        } else {
          currElement.textContent = "Done";
          let currChapterName = currElement.previousElementSibling.textContent;
          let currInput = document.createElement("input");
          currInput.type = "text";
          currInput.placeholder = "Chapter Name";
          currInput.className = "form-control";
          currInput.value = currChapterName;
          currElement.parentElement.replaceChild(currInput, currElement.previousElementSibling);
        }
      }
    </script>
  </body>
</html>