Learn Coding From Zero

JavaScript Project Study: How To Create A Simple Todo List APP?

After I learned JavaScript loop and array, it’s time to implement those codes into a simple project and see how it works.

The course instructor leads us to create a small To Do List APP. Basically, when we open the web page, it will pop up a question:”What would you like to do?”. Then we enter “new” and add a todo. If we want to check our todo list, we need to enter “list”, so we can see our todos are stored in the console. The question will ask you again and again until you enter “quit” to end it.

We create a HTML page and link to a separate JS file. 

In the JS file, we start to write a todos array. We leave the empty[] since we will enter data through the pop up question window. 

Then, we create the pop up window by writing a prompt(“What would you like to do?”

So when we open the web page, it will pop up this question to ask you to enter your todos.

Next, we use while loop to let the site keep asking the question until we enter “quit”. Therefore, we give a condition for while: if input is not equal to “quit”, as we enter “list”, print out our todo list.

Then, we want to add a new item as we enter “new”. Therefore, we use else if to create a new condition: 

  • ask for a new todo by writing a new prompt
  • use push method to add new items at the end of the array
  • ask again for new input

If we want to end the question, we can enter “quit”.

When I see the question, I enter “new” first to ready to enter a new thing.

Then I see “Enter new todo”, I enter shopping. Later on, I enter another new thing “walking”.

I want to check the list later, so I enter “list”.

Then, I end the question by entering “quit”.

At the end, I open the console to check the result: two todo things and a message about quit the APP. 

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s