To-Do-List Add Ons – DIY Student

Updating your To-Do-List

Using your code from the sample to-do-list complete the following

Make sure you copy your code as you move from one task to another.

ToDoList-V1 – Your basic to-do-list app

ToDoList-V2 – Updated with new Priority Field

ToDoList-V3 – Updated with new text field for who has been Assigned the task

ToDoList-V4 – Update to change the Assigned field to have a dropdown function

ToDoList-V5 – Update the CSS to create your own look and feel.

To create another text field, copy the example you have for the Task Description field

<input type="text" id="todo-input" placeholder="New task..." disabled>

<input type="text" id="todo-input" placeholder="New task..." disabled>

Constant Declaration : Declare a new constant for your new assigned field

const input = document.getElementById('todo-input');

const input = document.getElementById('todo-input');

Event Listener: Add a new constant for the assigned value

const taskText = input.value.trim();

const taskText = input.value.trim();

enableApp function: Enable new assigned field

input.disabled = false;

input.disabled = false;

renderTasks function: Add span for new field

<span>${task.text}</span>

<span>${task.text}</span>

Add new key to the JSON file

    { 
        "text":"Review Year 10 Science for Friday",
        "priority": "High"
    },

    { 
        "text":"Review Year 10 Science for Friday",
        "priority": "High"
    },