Introduction 🔥
Hello Everyone, My name is Sagar and I am here to share my learnings along the journey of my Tech Career in Web Development. Today, I am sharing with you what I build ( A Todo App ) with the help of basic javascript. This small beginner-level project is special to me because I built this without any video tutorial or any kind of tutorial. I gave this a try to build it myself and It worked.
How this project works 🤔
Here is the youtube video to see what the result of the project will look like.
Setting up the basic structure
First, we need the basic structure of the project which is the HTML body and connecting it with the javascript file where our main code will reside ( because we are creating it with the help of javascript ;).
Create an html file and add the basic body
Adding the link for the javascript file
you can add the link at the end and just before the closing of the body tag. I named my js file app.js
Checking
Let's check if the js file is working or not. We are making this app on the browser of google chrome so whatever we try to print on the console will show on the console window of the browser
just code this on the js file and save it. Now, Open your website on chrome and check the console window to see if hello bro is showing there.
console.log("hello bro")
Breaking the problem into 4 phases
If you have read past the above gibberish then I am surprised 😂. We have to create the todo app and the tip is Break the problem into smaller problems.
But before we move on that first we want to keep asking the user their response and not make it a dangerous infinity loop lol, we want to give them a choice to exit the app whenever they feel. So, let's create a while loop for this:
let response = prompt("What would you like to do?") //This will ask the user their initial response
const arr = [] // We will store the todo tasks user enters inside this array
//while loop
while(response!= quit){
response = prompt("What would you like to do?")
// while the response is not quit, keep asking the user their response and store it in the variable response
}
Phase 1: Creating the todo list ✌️
This shall happen whenever the user enters the keyword "new" as their response.
if (response === 'new') {
let item = prompt("Enter a new todo")
arr.push(item)
console.log(`${item} added to the list`)
}
//This will be inside the while loop
In the above code, we are asking the user their to-do task and storing it in the item variable. Then, we are adding the value in the array we declared above by the push() method. To learn more about the array methods in javascript refer to
Phase 2: Displaying the list of todo tasks 🤩
else if (response === 'list') {
console.log("************") //just to make it look attractive for some reason lol
for (let i = 0; i < arr.length; i++) { // a for loop to traverse through the array and displaying its contents
console.log(`${i} : ${arr[i]}`)
}
console.log("************")
}
An else if block whenever the user enters the keyword "list" meaning to display the todo tasks they stored.
Phase 3: Deleting a todo task 🗑️
else if (response === 'delete') {
let i = prompt("Enter the index to delete")
arr.splice(i, 1)
console.log("todo is deleted")
}
First, we ask the user to enter their index which they want to delete and store it in variable i. Then, with the help of the splice() array method, we can delete any item from the array from any index. To learn more about it :
Phase 4: Finishing up 🗒️
else
console.log("Pls enter a valid todo")
If someone stores an invalid response for eg. a number or not something from the 4 keywords in the menu.
Lastly, we want the html body to load up first before the prompt arrives so that users can read the menu of instructions. For that just wrap up your whole js inside a Set Timer Function
Source Code:
let tList = []; window.setTimeout(function () {
// rest of your code here
let response = prompt("What would you like to do?")
const arr = []
while (response != 'quit') {
if (response === 'new') {
let item = prompt("Enter a new todo")
arr.push(item)
console.log(`${item} added to the list`)
}
else if (response === 'list') {
console.log("************")
for (let i = 0; i < arr.length; i++) {
console.log(`${i} : ${arr[i]}`)
}
console.log("************")
}
else if (response === 'delete') {
let i = prompt("Enter the index to delete")
arr.splice(i, 1)
console.log("todo is deleted")
}
else
console.log("Pls enter a valid todo")
response = prompt("What would you like to do?") //I have put this prompt in the end to avoid repition of asking the user twice
}
console.log("OK, you quit the app")
}, 10);
That's it guys, This was a Simple enough project. I hope you understood and if any doubts you can ask in the comments.
See you in the next blog ;)