codeup-web-exercises/dom_add_remove.html at main · MatthewRMoreno/codeup-web-exercises · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Adding and Removing DOM Elements</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <style>
    #my-form {
      width: 400px;
    }
  </style>
</head>
<body>

<div class="container-fluid">
  <h1>My Todo List</h1>

  <div id="my-todos" class="row">

    <div class="card col-2">
      <div class="card-body">
        Example Todo
      </div>
      <div class="card-footer">
        <button class="delete-todo">Delete Todo</button>
      </div>
    </div>

  </div>

  <hr>

  <h4>Add a Todo</h4>
  <form id="my-form" class="todo-form" name="my-form">
    <label for="add-todo-text" class="form-label">Todo Text</label>
    <input id="add-todo-text" class="form-control" type="text" value="" placeholder="Enter todo text here">
    <div class="invalid-feedback">
      Yo man, this can't be blank!
    </div>
    <div class="valid-feedback">
      Aw yeah, that's some good text!
    </div>
    <br>
    <button id="add-todo" class="form-control btn-primary" type="button">Add Todo</button>
  </form>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<script>
  "use strict";
  (function() {
    document.addEventListener("DOMContentLoaded", function () {

      // add your code here

      function countTodos() {
        return document.querySelector("#my-todos").children.length;
      }
      let numTodo = 1
      let inputText = document.getElementById("add-todo-text")
      let addButton = document.getElementById("add-todo")
      let cardDiv =  document.getElementById("my-todos")
      addButton.addEventListener("click", addTodo)

      function addTodo() {
        // if(cardInfo.trim().length < 1) {
        //   inputText.classList.add("is-invalid")
        //   inputText.classList.remove("is-valid")
        //   is-valid = false;
        // } else {
        // }
        if (numTodo === 10) {
          console.log("Max limit of cards reached");
          return;
        }
        let card = document.createElement("div")
        card.className = "new-card card col-2 border-primary"

        let cardInfo = inputText.value

        let cardBody = document.createElement("div")
        cardBody.className = "card-body"
        cardBody.innerText = cardInfo

        let cardFooter = document.createElement("div")
        cardFooter.className = "card-footer"

        let deleteButton = document.createElement("button")
        deleteButton.className = "delete-todo"
        deleteButton.innerText = "Delete Todo"

        card.appendChild(cardBody)
        cardFooter.appendChild(deleteButton)
        card.appendChild(cardFooter)
        cardDiv.appendChild(card)

        addDelete()
      }


      function addDelete() {
        let allDelete = document.querySelectorAll(".delete-todo")
        for (let i = 0; i < allDelete.length; i++) {
          allDelete[i].addEventListener("click", deleteTodo)
        }
      }

      function deleteTodo(event) {
        this.parentElement.parentElement.remove()
      }


    });
  })();
</script>
</body>
</html>