JS Task Lister mini project

2 min readNov 20, 2023

This lab doesn’t use fetch and it’s all about selecting DOM objects and manipulating.

Deliverables

As a user, I should be able to type a task into the input field.
As a user, I should be able to click some form of a submit button.
As a user, I expect to see the task string that I provided appear in the DOM after the submit button has been activated.

Steps

In the index.js, I want to select the HTML input form
I want to save the text the user type
submit the form
list the submitted text

What does the document.addEventListener(“DOMContentLoaded”, callback func) do?

#index.js

document.addEventListener("DOMContentLoaded", () => {
  // your code here
});

DOMContentLoaded event fires when the initial HTML document has been completely loaded. This way the objects that index.js is grabbing will be available in the html DOM. Otherwise it will give you an error.

<head> 
   <script src="./src/index.js" defer></script>
</head>

How to access elements from the DOM

Accessing a single element

.querySelector('')
  ('#id')
  ('.class')
  ('div')
.getElementById('id')

How do we extract the input text?

Option 1

document.addEventListener("DOMContentLoaded", () => {
  // your code here
  const form = document.querySelector("form#create-task-form")
  const inputDesc = document.querySelector('form > input#new-task-description')

  form.addEventListener("submit", (event) => {
    event.preventDefault()
    console.log(inputDesc.value)
  })
});

Option 2 with e.target.value

change the name of the input tag first to description without dash

<!-- index.html -->
<input 
      type="text" 
      id="new-task-description" 
      name="description" 
      placeholder="description">

//index.js
  const form = document.querySelector("form#create-task-form")

  form.addEventListener("submit", (event) => {
    event.preventDefault()
    console.log(event.target.description.value)
  })

event.target is a property of event.

console.log(event) //event.target[0].value (bc there are two inputs)
console.log(event.target)
console.log(event.target.description) //description is "name" of the input html
console.log(event.target.description.value)

How to create an element?

Document.createElement() - Web APIs | MDN

A string that specifies the type of element to be created. The of the created element is initialized with the value of…

developer.mozilla.org

document.addEventListener("DOMContentLoaded", () => {
  // your code here
  const form = document.querySelector("form#create-task-form")

  form.addEventListener("submit", submitTodo )
});

const submitTodo = (event) => {
  event.preventDefault()
  // console.log(event)
  // debugger

  //save the input text in a variable
  const newTodoText = event.target.description.value
  console.log(newTodoText)
  
  //select the task DOM object
  const tasks = document.querySelector("#tasks")

  //create a new li element
  const newLi = document.createElement("li")

  //insert the new todo text inside of li element
  newLi.innerHTML = newTodoText

  //append new li onto tasks object
  tasks.appendChild(newLi)

  //reset 
  event.target.reset()

Stretch Goals

* A delete function that will remove tasks from your list
* A priority value selected from a [dropdown][] that is used to determine the color
  of the text in the list (e.g. red for high priority, yellow for medium, green
  for low)
  * As an additional challenge, implement a sorting functionality that displays
    the tasks in ascending or descending order based on priority
* An additional input field (e.g. user, duration, date due)
* Ability to edit tasks
* Something of your choice! The main objective is to add a feature that allows
  the user's input to affect the DOM

Delete function

////////DELETE/////////
  const deleteBtn = document.createElement('button')
  deleteBtn.innerText = '❌'
  newLi.append(deleteBtn)


  /////DELETE FUNCTION/////
  deleteBtn.addEventListener("click", (e) => {
    // const removingLi = e.target.parentNode
    // removingLi.remove()
    newLi.remove()
  })