Js Task Lister Project

Here is an example of the working app

Your task is to recreate this using Behavior Driven Development. There are no tests for this lab. Try to create the functionality found in the demo:

  • A user should be able to create a new list.
  • A user should be able to add new tasks to a list.
  • A list has many tasks
  • A user should be able to delete a list and its associated tasks.

This project is likely larger than anything you have tackled thus far. Work slowly and iteratively. Often this means to get a specific feature working in a purely functional way and then refactor to an OO approach. If your group can manage to build out all the functionality without creating instances, more power to you, but it is very likely that at some point you are going to wish you could say list.tasks. This is your world, build a structure that works for you.

(i.e. a list has many tasks, task belongs to a list)

Optional HTML Template

If you want to match the style of the demo exactly, feel free to use the following templates for your markup:

Add Task Form

<div id="app-content">
  <form id="create-task-form">
    <label for="parent-list">Select List:</label>
    <select id="parent-list">
      <!-- Major key alert:
      read the docs for HTML option selected:
      https://www.w3schools.com/tags/att_option_selected.asp -->
    <option value="My Dank List" selected>
      My Dank List
    </option>
    </select>

    <label for="new-task-description">Task description:</label>
    <input required type="text" id="new-task-description" placeholder="description">

    <label for="new-task-priority">Priority level:</label>
    <input type="text" id="new-task-priority" placeholder="priority">
    <input type="submit" value="Create New Task">
  </form>
</div>

List

<div id="lists">  
<!-- begin list 1 -->
  <div>
    <h2>doughnuts
      <button data-title="doughnuts" class="delete-list">
        X
      </button>
    </h2>
    <ul>
        <li>
        Task: mocha
        <button data-list-title="doughnuts" data-task-name="mocha" class="delete-task">
            X
        </button>
        <br>
        Priority: low
      </li>
      <li>
        Task: chocolate
        <button data-list-title="doughnuts" data-task-name="chocolate" class="delete-task">
          X
        </button>
        <br>
        Priority: high
      </li>
    </ul>
  </div>
<!--end list 1  -->

<!-- begin list 2 -->
  <div>
    <h2>chik fil a
      <button data-title="chik fil a" class="delete-list">
        X
      </button>
    </h2>

    <ul>
      <li>
        Task: spicy chicken deluxe
        <button data-list-title="chik fil a" data-task-name="spicy chicken deluxe" class="delete-task">
          X
        </button>
        <br>
        Priority: high
      </li>
      <li>
        Task: waffle fries
        <button data-list-title="chik fil a" data-task-name="waffle fries" class="delete-task">
        X
        </button>
        <br>
        Priority: high
      </li>
    </ul>
  </div>
<!-- end list 2 -->
</div>

View this lesson on Learn.co

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