forked from ohthebrave/tasklist
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.js
76 lines (66 loc) · 2.52 KB
/
index.js
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
// Get the form element
let form = document.querySelector("form");
// Add an event listener to the form submission event
form.addEventListener("submit", (e) => {
const task = taskInput.value;
// Create a new task list item element.
const taskItem = document.createElement("li");
// Add the task text to the task list item element.
taskItem.textContent = task;
// Add the task list item element to the task list element.
taskList.appendChild(taskItem);
// clear the task input element
// taskInput.reset();
taskInput.value = "";
// Prevent the default form submission behavior
e.preventDefault();
// Get the to-do task from the form
console.log(task);
// Send the to-do task to the server
// "/todo" is the url endpoint we are sending the request to.
// Send the to-do task to the server
// "http://localhost:3000/posts/todo" is the url endpoint we are sending the request to.
fetch("http://localhost:3000/posts", {
// POST method is used to send data to the server
method: "POST",
headers: {
"Content-Type": "application/json",
},
// The data we are sending. It's converted to a JSON string using "JSON.stringify"
// Sends an object with a 'task' property, which contains the task data collected from the form.
//body: JSON.stringify({ task: task })
body: JSON.stringify({
name: task,
}),
})
.then((res) => {
/* Step 6: Handle the server response: Byte Almighty >>initiate server responses : */
// Step 7: The to-do task was successfully added
console.log(res);
if (res.ok) {
console.log("SUCCESS");
alert("Data Posted Successfully");
} else {
console.log("Not Successful");
alert("An issue occurred when posting your data");
}
return res.json();
})
.then((data) => console.log(data));
});
// Get a reference to the task input element.
const taskInput = document.getElementById("task-input");
// Get a reference to the add task button element.
const addTaskButton = document.getElementById("add-task-button");
// Get a reference to the task list element.
const taskList = document.getElementById("task-list");
// Add an event listener to the add task button element.
// Add an event listener to the task list element.
taskList.addEventListener("click", (e) => {
// Get the target element of the event.
const target = e.target;
// If the target element is a task list item element, toggle its completed class.
if (target.tagName === "LI") {
target.classList.toggle("completed");
}
});