Js Task Lister Lite

Hello and Welcome to TaskLister Lite™️

Today you'll be creating a simple to do list application that will focus on DOM manipulation. Take a look at index.html and identify the DOM elements you'll need to manipulate before you write any code.

Check out the working demo


Instead of relying on unit tests, this lab is deliverable driven. You will be responsible for asserting your solution works as intended by testing the behavior visually in the browser.

  1. Fork and clone this repository
  2. Open index.html in Chrome (Tip: you can use open index.html in bash and, as long as Chrome is your default application for opening .html files, it will automatically open the file)
  3. Put your JavaScript knowledge to the test and work your way through the deliverables

Structuring Your Code:

You've been provided with a basic HTML file, as well as a src/index.js file where you can implement your solution. Focus on getting the feature working while using your knowledge to write readable, maintainable code.


  • users should be able to type a task into the input field
  • users should be able to click some form of a submit button
  • the task string that the user provided should appear on the DOM after the submit button has been activated

Note: While the example shows one working application of TaskLister Lite™️, yours can (and is encouraged to!) look however you like.

Stretch Deliverables:

If you finish early, try to implement one or more of the following:

  • 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 a challenge, implement a sorting functionality that displays the tasks ASC/DESC 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
Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us