AI – To do List – CS L4

Leave a Comment / CS - Skills - Level 4 / By

Making improvements to our To-Do-List App

Create a new subfolder in your project folder called v2

Copy the files from v1 into v2

Adding New Fields

To Add a Priority Field to your application you will need to make a few changes.

You will need to make the follow changes to the four file

  1. index.html
  2. style.css
  3. script.js
  4. mytasks.json

json

Old

[
    "Review Year 10 Science for Friday",
    "Daily Goal: Reach 10,000 steps",
]

New

[
    { 
        "text":"Review Year 10 Science for Friday",
        "priority": "High"
    },
    { 
        "text":"Daily Goal: Reach 10,000 steps",
        "priority": "Medium"
    }
]

html

Old

        <div class="input-group">
            <input type="text" id="todo-input" placeholder="New task..." disabled>
            <button id="add-btn" disabled>Add</button>
        </div>

New

<div class="input-group">
    <input type="text" id="todo-input" placeholder="New task..." disabled>
    
    <select id="priority-input" disabled>
        <option value="Low">Low</option>
        <option value="Medium" selected>Medium</option>
        <option value="High">High</option>
    </select>

    <button id="add-btn" disabled>Add</button>
</div>

css

add this to your css file

/* Style the dropdown */
select {
    padding: 10px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
}

/* Priority Badges */
.badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    margin-right: 10px;
    text-transform: uppercase;
}

.priority-High { background: #fed7d7; color: #c53030; }
.priority-Medium { background: #feebc8; color: #9c4221; }
.priority-Low { background: #c6f6d5; color: #22543d; }

js

update the addBtn.addEventListener

addBtn.addEventListener('click', () => {
    if (input.value.trim()) {
        tasks.push(input.value.trim());
        input.value = '';
        renderTasks();
    }
});

New

addBtn.addEventListener('click', () => {
    const taskText = input.value.trim();
    const priorityValue = document.getElementById('priority-input').value;

    if (taskText) {
        // Create an object instead of just a string
        const newTask = {
            text: taskText,
            priority: priorityValue
        };
        tasks.push(newTask);
        input.value = '';
        renderTasks();
    }
});

js

update the renderTasks function

function renderTasks() {
    todoList.innerHTML = '';
    tasks.forEach((task, index) => {
        const li = document.createElement('li');
        li.innerHTML = `<span>${task}</span><button class="del-btn" onclick="deleteTask(${index})">x</button>`;
        todoList.appendChild(li);
    });
}

New

function renderTasks() {
    todoList.innerHTML = '';
    tasks.forEach((task, index) => {
        const li = document.createElement('li');
        // Use a template literal to apply the correct color class based on priority
        li.innerHTML = `
            <div>
                <span class="badge priority-${task.priority}">${task.priority}</span>
                <span>${task.text}</span>
            </div>
            <button class="del-btn" onclick="deleteTask(${index})">x</button>
        `;
        todoList.appendChild(li);
    });
}

js

update the enableApp function

Add the line
document.getElementById(‘priority-input’).disabled = false; 

function enableApp(fileName) {
    input.disabled = false;
    addBtn.disabled = false;
    saveBtn.disabled = false;
    statusMsg.innerText = `Editing: ${fileName}`;
}

New

function enableApp(fileName) {
    input.disabled = false;
    addBtn.disabled = false;
    document.getElementById('priority-input').disabled = false;
    saveBtn.disabled = false;
    statusMsg.innerText = `Editing: ${fileName}`;
}