Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function attachEvents() {
- const BASE_URL = "http://localhost:3030/jsonstore/tasks/"
- const DELETE_BASE_URL = "http://localhost:3030/jsonstore/tasks/"
- let newTaskName = ""
- let loadBtn = document.getElementById("load-button")
- let addBtn = document.getElementById("add-button")
- let titleName = document.getElementById("title")
- let toDoList = document.getElementById("todo-list")
- loadBtn.addEventListener("click", loadHandler)
- addBtn.addEventListener("click", addHandler)
- function loadHandler(){
- toDoList.innerHTML = ""
- if (event){
- event.preventDefault()
- }
- fetch(BASE_URL, {method: "GET"})
- .then((res) => res.json())
- .then((data) => {
- for (const id in data) {
- let taskName = data[id].name
- let li = createElement("li", "", toDoList)
- createElement("span", taskName, li)
- let removeBtn = createElement("button", "Remove", li)
- let editBtn = createElement("button", "Edit", li)
- li.id = id
- removeBtn.addEventListener("click", removeHandler)
- editBtn.addEventListener("click", editHandler)
- }
- })
- }
- function addHandler(){
- if (event){
- event.preventDefault()
- }
- let httpHeaders = {
- method: "POST",
- body: JSON.stringify({name: `${titleName.value}`})
- }
- fetch(BASE_URL, httpHeaders)
- .then(() => loadHandler())
- }
- function removeHandler(event){
- let li = event.currentTarget.parentElement
- let id = li.id
- let httpHeaders = {
- method: "DELETE"
- }
- fetch(`${DELETE_BASE_URL}${id}`, httpHeaders)
- .then(() => {loadHandler()})
- .catch((err) => console.error(err))
- }
- function editHandler(event){
- let li = event.currentTarget.parentElement
- let [span, _removeBtn, editBtn] = Array.from(li.children)
- let taskName = span.textContent
- span.remove()
- inputField = createElement("input", taskName)
- li.prepend(inputField)
- editBtn.remove()
- let submitBtn = createElement("button", "Submit", li)
- submitBtn.addEventListener("click", submitHandler)
- }
- function submitHandler(event){
- let li = event.currentTarget.parentElement
- let [input, _removeBtn, submitBtn] = Array.from(li.children)
- let inputValue = input.value
- let httpHeaders = {
- method: "PATCH",
- body: JSON.stringify({name: inputValue})
- }
- fetch(`${DELETE_BASE_URL}${li.id}`, httpHeaders)
- submitBtn.remove()
- let editBtn = createElement("button", "Edit", li)
- let taskName = input.value
- input.remove()
- let task = createElement("span", taskName)
- li.prepend(task)
- }
- }
- function createElement(type, content, parent, id, classes, attributes){
- let element = document.createElement(type)
- if (content && type !== "input"){
- element.textContent = content
- }
- if (content && type === "input"){
- element.value = content
- }
- if (parent){
- parent.appendChild(element)
- }
- if (id){
- element.id = id
- }
- if (classes){
- element.classList.add(...classes)
- }
- if (attributes){
- for (const key in attributes) {
- element.setAttribute(key, attributes[key])
- }
- }
- return element
- }
- attachEvents();
Add Comment
Please, Sign In to add comment