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.


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.


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

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


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.

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

How to access elements from the DOM

Accessing a single element


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) => {

Option 2 with e.target.value

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

<!-- index.html -->
const form = document.querySelector("form#create-task-form")

form.addEventListener("submit", (event) => {

event.target is a property of event.

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

How to create an element?

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

form.addEventListener("submit", submitTodo )

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

//save the input text in a variable
const newTodoText = event.target.description.value

//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


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

const deleteBtn = document.createElement('button')
deleteBtn.innerText = '❌'

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