Project Outline - To Do List
The point of this exercise is to create an extremely simple application! It consists of the following options:
- "new" - Adds a To-do
- "list" - List All To-dos
- "delete" - Remove a Specific Todo
- "quit" - Quit App
The basics
- Setting up the JavaScript file is rudimentary! Including it in a script before the closing <body> tag is important. Include them AFTER the Bootstrap links (if using them) because the Bootstrap scripts need to be loaded and initialized first before any custom scripts can interact with and modify the elements on the page.
- Implement a quick alert in the JS file, just to check the script in the HTML file is correctly included.
- This program will start with a prompt, such as 'What would you like to do?', and the user is expected to enter one of the options above! It is easiest to implement the 'quit' option first...
- To do so, we create a variable called input. If input happens to NOT be either 'quit' or 'q', then the while-loop within which the program runs will continue.
- Note that it's good practice to include some kind of message to the user, indicating the application has been closed.
let input = prompt('What would you like to do?');
while (input !== 'quit' && input !== 'q') {
input = prompt('What would you like to do?');
}
console.log('Okay, you have quit the app for today');
Option 2: Printing Things Out
- Firstly, our ToDo list needs to be set up. const todos = []; seems reasonable. It's okay to add a dummy entry to check whether the printing will work, so I did so: const todos = ['Finish lecture 201'];
- Let's think about our while-loop. If the input is 'list', then we want to print things out. The first way to test things could use a couple of console.log('**********') statements, just to make sure there are no minor issues.
- If that passes the check, we can very easily include a loop that iterates through the todo list array, and prints out both the appropriate index - and the task associated with that index. for(let i = 0; i < todos.length(); i++)
-
let todos = ['Finish Lecture 201']; while (input !== 'quit' && input !== 'q') { if (input === 'list') { console.log('******Generating List of Todos******'); for (let i = 0; i < todos.length; i++) { console.log(`${i}: ${todos[i]}`); } console.log('***********List Generated***********'); } ****OTHER FUNCTIONS INCOMING***** input = prompt('What would you like to do?'); }
Option 1: Adding A New ToDo
- After the input variable (via the prompt) new has been entered, we then once again prompt the user. Using something like const newToDo = prompt('Okay, what is the new todo?');, we can get the string input
- Once that is successfully acquired, we push it into the list (which has already been created as an array)
- Once again, it's also nice to include some means of communicating that a process has taken place!
****OTHER FUNCTION**** (as seen above :))
else if (input === 'new') {
const newToDo = prompt('What is your new todo?');
todos.push(newToDo);
console.log(`${newToDo} has been added to the list`);
}
Option 3: Deleting A Specific ToDo
- After we receive the input 'delete', we might want to print out the list, and ask 'What index do you want to delete?' In this case, I will omit the list printing! However, I will obtain a value for the index using const index = parseInt(prompt('Please enter an index to delete'));
- If our entry is NOT valid, we will simply explain that an invalid index has been entered. What makes for a VALID index, though? Simply, we need the value entered to be within the bounds of the todo list. We both a non-empty todo list, the value to be less than its length, AND the value to be not NaN. This is expressed by the conditional statement: if(!Number.isNan(index) && index>=0 && index<todos.length)
- N.B. The Number.isNan() is a special process in the mold of Object.values/Math.floor and other things we've seen in the course!
- Speaking of which, we use splice() to remove the chosen index from our array. Remember how splice works? If not, just look at this: const deleted = todos.splice(index,1);
- In the above splice(index, 1) means we're splicing 1 entry from the array, at index index :). Subsequent to that operation, it's a good idea to print a message to the user!
else if (input === 'delete') {
const index = parseInt(prompt('Please enter an index to delete:'));
if (!Number.isNaN(index) && index >= 0 && index < todos.length) {
const deleted = todos.splice(index, 1);
console.log(`You have selected ${index}. Deleted ${deleted}`);
} else {
console.log('Invalid index entered. Operation FAILED!');
}
}
Rejected Code!
I originally wanted to include functions, such as a means of calling a menu, but these have not been covered yet (and I don't want to learn them pre-emptively, picking up bad habits). Below lists some of the rejected code ideas:
let menu = {
1: 'New: add a to-do',
2: 'List: list all to-dos',
3: 'Delete: remove specific todo',
4: 'Quit: quit app'
}
const toDoList = [];
function addItem() {
const toDoItem = prompt('Please enter your todo:');
toDoList.push(toDoItem);
console.log(`${toDoItem} added to the list!`);
}
function printList() {
console.log('**********Generating list**********');
for (let i = 0; i < toDoList.length; i++){
console.log(`${i+1}: ${toDoList[i]}`);
}
console.log('*********List Over*********');
}
function removeItem() {
printList();
const index = parseInt(prompt('Which item do you want to remove?'));
console.log(index);
}
function userMenu(menu) {
for (let choice in menu) {
console.log(`${choice}: ${menu[choice]}`);
}
console.log('Please enter your choice:');
}
let running = true;
while (running===true) {
let choice = parseInt(prompt(userMenu(menu)));
while (!choice || choice < 1 || choice > 4)
console.log('Please enter a valid choice!');
if (choice === 1) {
addItem();
}
else if (choice === 2) {
if (toDoList.length === 0)
console.log('No to-dos to do!');
else
printList();
}
else if (choice == 3) {
if (toDoList.length === 0)
console.log('Nothing to remove!');
else
removeItem();
}
else {
console.log('Very well! Exiting program...');
running = false;
}
}