---
tags: mstu5003, tinker, js
---
# TINKER - Javascript Part II

<!--
- See repository: https://github.com/jmk2142/TodoMSTU5003
-->
- See demonstration: https://codepen.io/jmk2142/pen/oGxwPQ
- Tinker Markdown: https://hackmd.io/zJmA8GKJR5-Oe2Zy4r1wqw?both

<!--
For this week, the actual Markdown file is not available via Github Gists. I have included it within this week's Tinker repository along with the rest of the code. It is called `README.md`. You might want to `IMPORT` the markdown into hackmd.io to use that tool (recommended.)

To get access to this code, and the actual Markdown to play with, you can use Github to CLONE the repository using the Github GUI Client. You can get the idea of what repositories are in my Youtube Video:

## Github: How to clone my repository

You'll want to start with the video overview:
https://youtu.be/QOXhN90d9Mk?list=PLn93-yl6k7zUkSFNI8MQqmIVn017z8vKO

Since you want to copy MY repository, once you have the Github GUI Client installed - you can do so with one click of a button. Just click on the Clone or download option, then **Open in Desktop** and that will automatically open it up in the Git GUI. (See Below)


Keep in mind that since you are cloning my repository, you will only be able to commit changes to your local computer. You will not be able to _sync_ or _push_ changes to my Github repository - for obvious security reasons. (You wouldn't want just anyone to change YOUR code.)

If you would like to use Github for your work in progress, what you can do is **_FORK_** my repository first. (See _FORK_ button under account picture.) This will create a copy of this repository under your account name in Github. You can clone YOUR version of this to your local computer, then commit and push to your account to your heart's content. :smiley_cat:

---

-->

## Devtools
You will also want to watch this video on the `console` as we will be using it extensively to Tinker this week.

General Video on Console: https://youtu.be/GAqOggzH_GE?list=PLn93-yl6k7zUkSFNI8MQqmIVn017z8vKO

One of the most important tools we'll use is the `DEBUGGER`.

:::success
**Debugger Demonstration and Youtube Video**

<!--
REPO: https://github.com/jmk2142/Debugger
DEMO: https://jmk2142.github.io/Debugger
-->

CODE: https://codepen.io/jmk2142/pen/RwZErre
DEMO: https://cdpn.io/jmk2142/debug/RwZErre
YOUTUBE: https://youtu.be/RdF7j4no0Ts
:::

I recommend that at some point, you watch these demonstrations and use these tools to explore the Tinker.

:::info
In order to use `console.dir(object)` and see the object property/values, make sure your console setting is set to DEFAULT.


:::

## Tinker GIST: TODOS

> Good bye, "Hello World!"

`Hello World` is probably the most common introductory program around as it's so simple.

alert("Hello World!");

// Or alternatively...

console.log("Hello World!");

Unfortunately, it's not very useful. It doesn't really show the range of different programming concepts and to be quite frank, it's boring. Many beginners like us are interested in creating interactive applications and this requires a range of programming concepts.

1. HTML Elements
2. CSS
3. Variables
4. Operators
5. Functions
6. Control Statements
7. Events
8. Data Structures + Data (e.g. Arrays, Objects, Booleans, Numbers, Strings)

And you really cant get a sense of how these things work together with a 1 line program like `Hello World!`.

### Enter TODOS

Some clever programmer realized this and probably thought:

> What's the simplest, _real_ program I can build that will incorporate all the important aspects of a basic interactive program?

And the **TODOS** or **TODO LIST** program was born.

The beauty of TODOS is that it has everything in a pretty simple package. It can be solved using a variety of different strategies and can be created to be _simpler_ or _more sophsiticated_ depending on ones needs. It tends to now be the defacto standard for demonstrating a full interactive application.

Beginners AND advanced students alike build TODO apps as they learn new things. For example, our TODOS Tinker is designed to demonstrate the base JS concepts with a few _stretch_ challenges embedded in it. In my regular practice, when I have to learn a new library or framework, I will probably start by viewing an existing TODO app built with that specific library to see how that library works. Sort of like how you might compare a basic HTML page with a Bootstrap page (of the same content) to be able to compare and contrast the two. If you're interested, you can briefly look at [this page](http://todomvc.com/) which is an archive of the TODO application built in various different frameworks.

And this is where I am hoping to take this class, the culmination of all the things we've been working towards - to understanding this first, real, interactive program and hopefully - you can apply some of these concepts in your own works.

## Tinker Tasks

In this tinker, were going to:

1. Review prior concepts in this new context:
- Variables, functions, events, and arrays
2. Observe, analyze, and study new concepts:
- Control statements (E.g. `if`, `for`)
- Logical operators (E.g. `===`,`&&`, `||`,`<`,`<=`,`>`,`>=`, etc.)
- Objects (and `array` of `objects`)
3. Learn how to use more developer tools to study JS code
- Source (i.e. debugger)
- Console (i.e. `console.log`, `console.dir`)

We will continue to observe, analyze and think about this program in terms of:

> What is the STATE?
> What is the SEQUENCE?
> What is the CAUSALITY?

### Part 0: Conceptual Program Overview

Play with the program and observe how it reacts to user interactions.

- _Without_ talking about it in _programming terms_ explain the user observable steps/process of the following three interactions and how the program responds.
- Adding a todo
- When adding a todo, the user will type an item. After, they will press enter which adds the new todo on the list. Next, the user will read the todo item. Lastly, they will repeat for any additional todos.
- Completing a todo
- When a todo task is completed, the circle icon next to it will be checked, the task will be italicized, and the entire task will have a strikethrough. Furthermore, the remove button count will increase by 1, and and turn red, indicating that it is available to be clicked on now.
- Removing a todo(s)
- Removing a todo item is only available once a todo task has been marked as complete. Everytime a task is marked as complete, the remove button counter will increase by 1. Selecting the remove button will remove all items/tasks in the todo list that are marked as complete.

Be specific but imagine you are talking to a _non-programmer_. Think about this in terms of observable actions and reactions.
> User puts toast in the toaster. Sets the length of the timer. Pushes the lever to start the toaster. The toast pops out the toaster after the time is completed and goes "DING".
- For each of the interactions above write in _pseudocode_ the steps of how the program for that interaction unfold and results. Pseudocode is semi-formal structure to write out the gist of how your program would work. It uses some keywords but is largely language agnostic. There isn't a single correct way to do it but the following are some rules that can help.
- RULES:
- One statement per line
- CAPITALIZE initial _keywords_
- READ, WRITE, IF, ELSE, REPEAT, UNTIL, AND, OR
- Indent to show hierarchy and groups of operation
- Keep statements language independent

  # Making toast for a big family
  READ loaf of bread
  READ slice of loaf
    Put slice in toaster
      WRITE time to toast
      Start the toaster
        Cook the toast
          READ time
          WRITE time by one second less
        REPEAT UNTIL time is zero
    Remove toast
  REPEAT for all slices in loaf

  # Serving toast
  WRITE number of slices total
  READ number of family members
  READ toastiness
  IF toast is burnt AND (total slices >= number of family members)
    throw away toast
    decrement slices total
  ELSE
    serve toast to family member

  # Adding a todo 
  READ string
  WRITE a new todo
  ADD input to string
  REPEAT for new todos
  
  # Completing a todo
  IF Completed a todo
  WHEN the user click the event,then the text is crossed(checked),the remove botton turns red+the number of events are crossed
  Else the remove button remain the same
  
  # Removing a todo(s)
  IF there are more than 0 tasks that are marked complete
      button will be red 
      WHEN user clicks the button 
          REMOVE all rows where tasks are marked as complete
  ELSE 
      button will remain grey and unclickable

- Using your pseudocode, identify the function(s) in the actual JS code that relate to your pseudocode.
- Compare and contrast your pseudocode with the actual code.
- Adding a todo:

      function addTodoItem() {
      if (!validateTask(inputEl.value)){
      return;
      }
          
      var newTodo = {
         id: getTimeStamp()
      };
          
      newTodo.task = inputEl.value;
      newTodo.done = false;
          
      data.push(newTodo);
      
      updateTodoItems();
      resetInput();
      }

- Completing a todo

      function toggleComplete(event){
      var todoID= parseInt(event.currentTarget.id.replace('task-',''));
      var todoData = getTodoData(todoID);
      todoData.done = !todoData.done;
      updateTodoItems();
      }

- Removing a todo(s)

      function removeTodoItem (event) {
      var incompleteTodos = 
      data.filter(function(todo){
      return todo.done === false;
      });
      data = incompleteTodos;
      updateTodoItems();
      }

- The javascript for removing a todo takes in an event in the function. A local variable is declared and it filters the tasks that are marked as complete or not. Then, it assigns the data variable the tasks that are incomplete then calls another function called `updateToDoItems()` to remove the rows in which there are completed tasks. This is different from the psuedocode because it is more logical and checks for more instances. For example, our psuedocode didn't consider how the completed task rows would be removed (by calling a different function) but the idea behind it was there.

- Explain what similarities and differences you noticed about the instructions / steps / processes in the code vs. your psuedocode.
- The psuedocodes allows for a similar representation of the overall flow of the program including the steps and processes without using the specific codes. Psuedocodes also allows us to create an algorithim that is more readble in format than the actual code syntax which helps us understand the key principles and functions. However, unlike javascript, there is no defined standards for pseudocodes.
- Manipulate different parts of the code as you see fit. Why did you decide to manipulate that part? What happened? (More structured tinkering to follow.)
I marked the first 3 todos completed, turned out that they are italicized and crossed out. Then I added two other todos in the input box and clicked the add button, they were shown up in the todo list.
When I clicked the remove button, all the todos I have marked disappeared and only the last todo left.

### Part 1: Variables, Functions, Arrays, and Events - Madeline

- Explain the `data` variable.
- What does this data (and the data inside) represent conceptually?
- The data variable is an array that consists of the various tasks in the table. Each task has an id, task, and if it is "done" or not.
- If I wanted to access the second object, how would I do that in code?
- You would access the second item in the array by doing `data[1]` because array items start counting from 0.
- If I wanted to access the `done` property of the first object, how would I do that?
- We would do`data[0].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?
- The data is manipulated first then the visual display is updated to reflect those changes.
- Is this what you would have thought of?
- Kind of, because it makes sense to update the array first so that the visuals can reflect those changes.
- What might be the significance of this program design decision?
- Logically would make more sense so that you can update the visual display with the updated data instead of having to do it over and over again, thus making it more efficient.

- What do these lines in my code do?

    var todosEl = document.querySelector('#todos');
    var inputEl = document.querySelector('input');
    var completedEl = document.querySelector('#counter');

- `document.querySelector` returns the first Element within the document that matches the specified selector, or group of selectors. So for `document.querySelector('#todos')`, it will return the div whose ID is `#todos` and assign it to the `todosEl` variable.
- Why declare these (see above) variables at the Global scope instead of in the functions? Or not at all... (E.g. `document.querySelector('#todos');`)
- Declaring global variables makes it easier for us to re-use them in multiple functions we may need them for. This saves us time so we don't have to create variables every single time we need to use them.

- 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.

  console.log("SOME LABEL: ", dataToLog);

- `target` is the element that triggered the event (e.g., the user clicked on) and `currentTarget` is the element that the event listener is attached to.
- In the `toggleComplete` function, there is a `event.currentTarget.id`. Is that `id` the same thing as the id property in my todo objects in the `data` array? Explain.
- No, the `id` that we have in the `data` array is a property of an item in the array that we made up. However, the one in `event.currentTarget.id` we did not assign.
- What does `!something` mean? (The exclamation mark) and how is it used in this code when we `toggleComplete`?
- The exclamation mark means "not". For example, `!==` means not equal to. It's used when we `toggleComplete` by saying `todoData.done = !todoData.done;` which means we will update the todo task to complete if the todo data is done.

- Try calling some of the functions directly from the console. Some will work. Some won't. Explain what you find.
- Some functions work and some don't because some functions require inputs like `id`, `event`, or `task`.

- Look at the function declarations in the JS panel.
- _Where_ is each function being called?
- Functions are being called inside other functions. For example, the `toggleComplete()` function calls the `updateTodoItems()` function.
- _When_ is each function, actually called?
- When a user does a certain action or when something needs to be changed in the todo list.
- What parameter(s) does that function have?
- Most of them either have no parameters or have an `event` parameter.
- What is the argument that is passed into the function when it is called?
- What the specific function requires, like id or event.

- Use the console (in Chrome devtools) to `console.log()` and `console.dir()` the following. What is the difference between `console.log` and `console.dir` and why is `console.dir` kind of more useful for looking at some kinds of data?

    console.log(data);
    console.log(todosEl);

    console.dir(data);
    console.dir(todosEl);

- `console.log` displays the “toString” representation of any object passed to it. However,`console.dir` returns more information like property and values. It displays an interactive list of the properties of the specified object and can be more useful as it gives us more information to work with.

### Part 2: Objects and Arrays of Objects - Courtney

- Manipulate the different _properties_ of the _objects_ inside the `data` array.
- Change all todo objects' `done` property to `true`.
- Change some of the task values.
- Run your code and explain how this changes what you see and why.
When change the object 'done'property to 'true',all the task values are checked and text is italic, grey and line-through. The reason of this change is that in function updateTodoItems, there is a check of whether the done property is true or not. If true, the circle is checked, and the text will have class complete which makes it italic, grey and line-through.
When change the task value from javascript, the tasks name will change to the new task value.

- `console.dir()` the `data` array. Goto the console and _OPEN_ the `> Array(3)` text by clicking on it. Go deeper by opening up the nested objects. Analyze what you see. Then add a new todo through the user interface. `console.dir()` the `data` array again and investigate the insides.
- What is the difference between `data` before and after adding a new todo?
A new item is added to the data with the same task name as our input. The done property is false and the id is the current timestamp.

- Run the following code:

    data.push({
      done: true,
      task: "Goto Aikido Lessons",
      id: getTimeStamp()
    });
    console.dir(data);

- What did the code above do?
The function 'push' add a new task to the tasklist. The new task value is checked and text is italic, grey and line-through. The console will print all the tasks including the one we just added.
- Does our page reflect the changes made? Why or why not? Prove it.
Yes.the code added task before they are displayed on the task page. 

- Does order matter in `Objects`?
No.

- What is the difference between `Object` keys (E.g. `done`, `task`, `id`) and `Array` indices (E.g. `0`, `1`, `2`)?
- The different is Object keys access the variable's field by Object keys and Array indices access it by the order of fields in the variable.
- How are they similar?

  var myAry = [123, "Code", true];
  var myObj = {
    id: 123,
    task: "Code",
    done: true
  }
  console.log(myAry[1]);
  console.log(myObj["task"]);
  console.log(myObj.task);

They all represent the task field of 'myObj'.
- Compare the following in the console:

  var element = document.querySelector('ul');
  var author = { first: "Mark", last: "Twain" }

  var example = {
    theAnswer: 42,
    student: true,
    hobby: "Fishing",
    sayHello: function(){
      alert("Hello");
    },
    favNums: [1,2,3],
    favAuthor: author
  };

  console.dir(example);
  console.dir(element);

- What is an `element` really?
It is a html element with html tag ul
- How does our `element` relate in terms of similarities and differences to `example`?
The similarity is that they are both javascript variables. The difference between these two are that element represent abd example represent an object with several fields.
- If I wanted to call the function in the `example` object, how would I do that? Prove it.
Call is by code `example.sayHello()`

- Try the following code in the console. How does dot notation and bracket notation differ and why would you want to use one or the other?

  var x = "username";
  var user = {
    username: "happyCat"
  }
  console.log(user.username);
  console.log(user["username"]);
  console.log(user[x]);
  console.log(user.x);

- Identify various areas where the `.` object notation is used and explain the thing on the left side of the `.` and the thing on the right side of the `.`
- E.g. `document.querySelector()` `document` is... `querySelector` is...
- HINT: There are MANY choices here.
Document is an interface represents any web page loaded in the browser and serves as an entry point into the web page's content. The querySelector() method returns the first element that matches a CSS selector.

- In two areas of my code, I use what is called a `filter` function. It's a function that arrays can use like `list.pop()`, `list.push()`.
- How does a filter function work?
The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.
- What is the significance of the function argument that is passed INTO the filter parameters?
A function to execute for each element in the array. It should return a truthy to keep the element in the resulting array, and a falsy value otherwise.
- With regard to the function that is passed into the filter as an argument, that function must `return` a boolean or evaluate to a boolean. What is the purpose of this?
Array elements which do not pass the callbackFn test are not included in the new array. So if return true, the element is included in the result, if not, then element is not included.
- What does the _filter function_ return?
E.g. `var x = list.filter(...); // What was returned to x?`
- CAUTION: NOT the function argument that goes into the filter.
- HINT: If you don't know, can you use console to "test" an idea out?
A shallow copy of a portion of the given array, filtered down to just the elements from the given array that pass the test implemented by the provided function. If no elements pass the test, an empty array will be returned.
- Does filtering an array _change_ the original array?
No

### Part 3 Control Structures Tiara

- I use the `if` statement in several places in this code. Explain why a conditional is necessary in:
- `updateTodoItems`
-The conditional statement allows you to check whether todo is complete/done.
- `updateRemoveButton`
- The conditional statement allows the user to remove items depending on if the todo task is done.
- `onEnterKey`
- The conditional statement allows the user to addTodoItem() if the event is true.
- `validateTask`
- The conditional statement allows the user to check if the task is not an empty string.
- `addTodoItem`
- The conditional statement allows the user to check if the validateTask is true or false.
- `getTodoData`
- The conditional statement allows the user to get the appropriate data based on the id of the element.
- HINT: You might want to `console.log` the boolean condition where you see the `if` statements to understand what condition we are evaluating.

  if (booleanCondition) {
    ...
  }
  console.log(booleanCondition);

- Comment on how the boolean condition works as there are many different examples.
-The boolean condition is essentially a data type that takes the 'if' loop with true or false values. Checking conditions such as a==b or</> are also examples of boolean conditions.

- In this code, there are two kinds of `for` loops. The more traditional that looks like:

    for (var i=0; i < list.length; i++) {
      // CODE
    }

and a `for of` loop that looks like:

    for (item of list) {
      // CODE
    }

- How does a `for of` loop work?
'for of' loop issues a loop that executes based on a sequence of values from an iterable object.
- What does the `item` represent? (It can be named anything: `x`, `item`, `thing` etc.)
An item represents any given element or variable within an array.

- Why are `for of` loops convenient compared to the traditional `for`?
'for of' iterates over values that the iterable object defines to be iterated over.
- For what purpose(s) do I employ a `for` or `for of` loop in this program?
'for' is used to check if the particular id in the getTodoData function matches the id for other items within the data array while 'for of' is a loop that iterates through every object in the array to produce a html code in the list.
- On Facebook or Pinterest, or Twitter, how does a loop through data relate to the display of content?
When the user types their interests through key words in the search button the data will loop to find all related topics and repeat accordingly.
### Part 3 Specific Routines

- Take a look at the `updateTodoItems`. Comment it out and replace it with this alternate, but functionally identical version. How does this function work and how do they relate / differ?

function updateTodoItems() {
  todosEl.innerHTML = "";

  if (!data.length) {
    var liElement = document.createElement('li');
    liElement.innerText = "Nothing todo...";
    todosEl.appendChild(liElement);
  } else {

    for (todo of data) {
      var liElement = document.createElement('li');
      var iElement = document.createElement('i');

      liElement.id = todo.id;
      liElement.onclick = toggleComplete;

      if (todo.done) {
        liElement.className = "complete";
        iElement.className = "fa fa-check-circle-o";
      } else {
        iElement.className = "fa fa-circle-o";
      }

      liElement.appendChild(iElement);
      liElement.innerText = todo.task;

      todosEl.appendChild(liElement);
    }
  }

  updateRemoveBtn();
}

- Take a look at the helper function `getTimeStamp`. This function will return a number, in milliseconds, the current time stamp since January 1, 1970.
- I call this when I create new todo items, what are some ideas as to why I might be using a timestamp for todo `ids`?
To distinguish each todo ids and thus making it easier and time efficient to retrieve data linked to the specific time.

- Take a look at the incomplete functions `markAllComplete` and `updateItemsLeft`.
- Can you complete these and add the functionality to this app?
Add the functionality to the html code and modify the todo codes so it will be true.
### Part 4 Debugging, Tools - Tiffany

Using the Chrome debugger (source) tool create breakpoints and watch the program execute line by line, part by part. Experience how this tool can give you insight into your program's _STATE_, _SEQUENCE_, _CAUSALITY_.

#### Chrome Debugger

- Set breakpoints at the following locations of your program
- `function initializeTodos`
- `function onEnterKey`
- `function addTodoItem`
- `function toggleComplete`

- Use the `Step over the next function call` feature to watch how the program pauses during the _SEQUENCE_ of its routines.
- Use the `Step into the next function call` feature to watch how the program pauses during the _SEQUENCE_ of its routines.
- What is the difference between `Step over` and `Step into` and how does this help you understand programs?
"Step over" goes to the next funtion that is be called, "Step into" goes into the line by line in a function. This feature enables me to learn the state of each line the program is.
- Use `Step into` until you've reached the line `var inputEl = document.querySelector('input');`. Should be highlighted in blue.
- Highlight the variable `todosEl` on the line before it and `right click` on it. Select _Evaluate in console_.
- What does the console print?

<ul id="todos">
    <!-- ITEMS HERE -->
</ul>

- Highlight the variable `inputEl` on this highlighted blue line.
- Why does the console say `inputEl` is undefined?
Because "input" is an element in HTML code.
- When you step through your code, does the blue line represent code that is about to be executed or code that has already executed? How do you know?
The blue line represents code that has already executed. The blue highlight sometimes refer back to the codes before this line.
- What do you predict would be the console value of the variable `completedEl` on the next line if you _Evaluate to console_ at this point?
Undefined, since there is no HTML code with an id of "counter".
- Watch how debugger annotates your source code with the updated _state_ of different variables as your program progresses.
- How does the debugger behave when you enter a loop in your program?
The debugger paused and highlighted the line representing the state the program is at. When I unpaused the debugger, the program continued to run.
- How does the debugger behave when you reach the a `filter` function call?
The filter function is circled up/labelled in a rectangle.
- What does filter do and how does it work?
The filter creates a new array filled with elements that pass a test provided by a function. In this program, filter helps find todo of data in the `function updateRemoveBtn()` and `function removeTodoItem(event)`. The Todos are completed if `todo.done === true`; the Todos are incompleted if `todo.done === false`.

### Part X: Putting all together

**Explain the program line by line with sufficient details, part by part.**
:::success
- Line by line
- Part by part
- Be sure to copy blocks of code into this markdown using code formatting/fences as references to your explanations.
- For repetitive code, you can explain how a line works then summarize how it would work for the rest.
:::

**Make it yours (group's)**
:::success
- Try to extend this program to do something cool, as a group, your own original idea(s).
- What is something that a Todo list or todo list user might benefit from?
:::

Our group decided that adding a 'drag and drop' option where users can organize or catergorize their list by priority would be beneficial as other items usually have more weight or urgency than others. This way, the user has more control over the list and can customize it to their liking.