Right now, the to-do list on the page is just some HTML that I put in there so you'd have something to look at! Time to make it yours: Go into
index.html
and delete the four lines that start with<li>
tags. If nothing's changed, they'll be lines 23–26. Then reloadindex.html
in your browser. It looks a little empty, but you'll fix that soon!Inside the
runWhenPageLoads
function, call therunWhenPageLoads
function. Reloadindex.html
to check that it's being called. If you got the alert then you're all set!Now you need to make the
loadList
function actually load a list! For now, it's going to be a sort of a “demo list”. Later, I'll show you how to save a to-do list and load it when you re-open the page. First, let's talk about lists in JavaScript. Lists, or arrays as they're called in JavaScript, are groups of the same kind of variable (number, text, etc.) in order. They don't need individual names, since you can look them up from the array. You use square brackets ([]
) to create an arry. They're also a kind of variable, so you can give them names like any other variable (and yes, you can have arrays of arrays, but we're not doing that just yet!). Change the contents of theloadList
to create an empty array calledtoDoItems
like this:toDoItems = [ ]
You now need to add some things to that array. There's a problem, though: a to-do has two parts! You need to know what it is (a string of text) and whether or not it has been completed yet (a true/false value). Because the need to know if things are true or false is so common (is the user signed in? does the player have more than 10 points? etc.) JavaScript has a special kind of variable for true/false values. It's called a boolean and it can only be either
true
orfalse
. Now you know what you need, make up three to-do items for your list and decide which one you'll mark done (to show the user they can do that).So, with three to-dos to add to your array, how do you do that? You can create an object variable in JavaScript that contains related variables. In the case of your to-dos that will be their
text
and theircompleted
state (eithertrue
orfalse
). Here's an example object:exampleToDo = { text: "Buy milk", completed: false }
The object is wrapped in curly braces (
{ }
) and stores pairs of keys (text
) and values (Buy milk
). Now it's time to put your objects into your array to make a list you can load when the page does!So, change the contents of the
loadList
function like this (but use the to-dos you made up!):toDoItems = [ { "text": "My", "completed": false }, { "text": "to-do", "completed": true }, { "text": "list", "completed": true } ]
You can see that these three items each have their
text
and theircompleted
status and that they're stored in an array. However, you still need to put them on the page. Inside thegetToDoItemHTML
function, add this bit of code:var listItem = document.createElement("li") var itemText = document.createTextNode(toDoItem.text) listItem.appendChild(itemText) if(toDoItem.completed === true){ listItem.classList.add("completed") } return listItem
This code:
- Creates a piece of HTML (a
li
or list item element) and stores it in thelistItem
variable. - Then an
itemText
variable is created and aTextNode
(the bit of text that'll sit inside the HTML tag) is stored in it with thetext
of thetoDoItem
that was passed into the function. - Then it adds (“appends”) the
itemText
inside thelistItem
element. - If the
toDoItem
'scompleted
property istrue
, then it adds aclass
to the item. This tells the HTML page to display the completed task differently (based on some code I wrote for you). If you've done the HTML/CSS Sushi Cards then you can take a look at the CSS files and edit what they look like if you want!
- Creates a piece of HTML (a
Now you can create the HTML for a list item, you need to add it to the list. Add this to the
loadList
function, after the array of items.toDoList = document.getElementById("todo") toDoItems.forEach(function(toDoItem){ itemHTML = getToDoItemHTML(toDoItem) toDoList.append(itemHTML) })
This code uses
forEach
, which goes through every item in the array and appends it to the to-do list, selected by itsid
in the HTML.