---
# System prepended metadata

title: TINKER - Javascript Part II

---

# TINKER - Javascript Part II
Members: Rob, Wenjie, Keying
## Part 1: Variables, Functions, Arrays, and Events
### Explain the data variable.
* What does this data (and the data inside) represent conceptually?
The tasks that need to be done / have already been done.
* If I wanted to access the second object, how would I do that in code?
data[1]
* If I wanted to access the done property of the first object, how would I do that?
data[1].done

### Look through the rest of the code where this data array is used. When the user does things, am I manipulating the visual display and updating the data to reflect those changes? Or am I manipulating the data and updating the visual display to reflect those changes?
We are manipulating the data and updating the visual display to reflect those changes. The significance of this design decision is that by changing the data, the user can add endless new tasks to the lists without cracking the code.

### What do these lines in my code do?
```
var todosEl = document.querySelector('#todos');
```
TodosEL is used to access the ID used in HTML where the to-do tasks are. This variable shortens the document.querySelector command. 

### Why declare these (see above) variables at the Global scope instead of in the functions?
Because these variables are gonna be used over and over again in the following code, in multiple functions.

### The toggleComplete function has an event parameter. Inside the function I access event.currentTarget. What is the difference between event.currentTarget and event.target which we used previously?
* Hint 1: You can add a console.log(event) etc. inside that function to test the value of event.target and event.currentTarget.
* Hint 2: When testing, click on a todo to “complete” it. Click on two areas: the li as well as the i (font icon) element to see the differences.
* Hint 3: You can pass multiple arguments to console.log(). I often pass two: first a string label, second the thing I want to log. This will basically make the logs easier to identify if you use console.log() a lot.