# 11/10 部課

# Review: HTML, CSS, Javascript

### Arrow Functions
Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions


// JavaScript Demo: Functions

const materials = ['Hydrogen', 'Helium', 'Lithium', 'Beryllium'];

console.log(materials.map((material) => material.length));
// Expected output: Array [8, 6, 7, 9]

() => expression

param => expression

(param) => expression

(param1, paramN) => expression

() => {
  statements
}

param => {
  statements
}

(param1, paramN) => {
  statements
}

/************************/

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body brace
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

The parentheses can only be omitted if the function has a single simple parameter. If it has multiple parameters, no parameters, or default, destructured, or rest parameters, the parentheses around the parameter list are required.

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no parameters)
() => a + b + 100;

Braces can only be omitted if the function directly returns an expression.

// Traditional anonymous function
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Arrow function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

Naming the function

// Traditional Function
function bob(a) {
  return a + 100;
}

// Arrow Function
const bob2 = (a) => a + 100;

Ref: [Javascript](/aCbVZebKT9iz8EhpkAKqgQ)

## Todo List

https://hackmd.io/p/HyUbwNhLV#/
> This is a homework from Ric’s Web Programming Class 2019 Spring

----

### 下載檔案
- index.html: https://pastebin.com/raw/S2ur8Vy1
- styles.css: https://pastebin.com/raw/YzzVLgdc
- todo.js: 自己寫
- 叉叉圖片:

----

試著把 todo.js 中被挖空的地方補齊!

hint:
- 對 input addEventListener, keyup (如何偵測按 enter, keycode ...)
- 也要開一個陣列存
- 新增一個 element: appendChild

解答: https://pastebin.com/raw/NvstEuW3

var todoData = {}
var id = 0;
var stat = "ALL"; // "ALL", "ACTIVE", "COMPLETED"
var count = 0;

const ulNode = document.getElementById("todo-list");
const removeTodo = (id) => {
    count += todoData[id].checked ? 0 : -1;
    document.getElementById("left_count").innerText = count;
    delete(todoData[id]);
    const liNode = document.getElementById(`li-${id}`);
    liNode.remove();
}

const changeChecked = (id) =>{
    count += todoData[id].checked ? 1 : -1;
    document.getElementById("left_count").innerText = count;
    todoData[id].checked = !todoData[id].checked;
}

const addNewTodo = (data)=>{
    // data = {
    //     "id": 0,
    //     "task": "Testing text",
    //     "checked": false
    // }
    const {id, task, checked} = data;
    const liNode = document.createElement("li");
    const divNode = document.createElement("div");
    const inputNode = document.createElement("input");
    const labelNode = document.createElement("label");
    const h1Node = document.createElement("h1");
    const imgNode = document.createElement("img");

    liNode.appendChild(divNode);
    liNode.appendChild(h1Node);
    liNode.append(imgNode);
    divNode.append(inputNode);
    divNode.append(labelNode);

    if (stat === "COMPLETED"){
        liNode.style.display = "none";
    }

    liNode.className ="todo-app__item";
    liNode.id = `li-${id}`;
    divNode.className = "todo-app__checkbox";
    inputNode.type = "checkbox";
    inputNode.id = id;
    inputNode.checked = checked;
    inputNode.addEventListener("click", ()=>changeChecked(id));
    labelNode.htmlFor = id;
    h1Node.className = "todo-app__item-detail";
    h1Node.innerText = task;
    imgNode.src = "img/x.png";
    imgNode.className = "todo-app__item-x";
    imgNode.id = `img${id}`;
    imgNode.addEventListener("click", ()=>removeTodo(id));

    ulNode.append(liNode);
    count += 1;
    document.getElementById("left_count").innerText = count;
}
// todoData.forEach(addNewTodo);


// Read input
const listenInput = (e) => {
    if (e.key !== "Enter"){
        return;
    }
    const task = e.target.value;
    const data = {task, id, checked: false};
    addNewTodo(data);
    todoData[id] = {task, checked: false};
    e.target.value = "";
    id += 1;
}

const inputNode = document.getElementById("todo-input");
inputNode.addEventListener("keydown", listenInput);

const changeStatus = (new_stat) => {
    if (stat === new_stat){
        return;
    }
    stat = new_stat;
    switch (stat){
        case "ALL":
            // const liNodeList = document.getElementsByClassName("todo-app__item");
            // [].forEach.call(liNodeList, (Node)=>{
            //     Node.style.display = "flex";
            // })

            Object.keys(todoData).forEach((id)=>{
                const {checked} = todoData[id];
                const liNode = document.getElementById(`li-${id}`);
                liNode.style.display = "flex";
            })

            break;
        case "ACTIVE":
            Object.keys(todoData).forEach((id)=>{
                const {checked} = todoData[id];
                const liNode = document.getElementById(`li-${id}`);
                liNode.style.display = checked ? "none" : "flex";
            })
            break;
        case "COMPLETED":
            Object.keys(todoData).forEach((id)=>{
                const {checked} = todoData[id];
                const liNode = document.getElementById(`li-${id}`);
                liNode.style.display = !checked ? "none" : "flex";
            })
            break;
        default:
            break;
    }
}

document.getElementById("view_0").addEventListener("click", () => changeStatus("ALL")); 
document.getElementById("view_1").addEventListener("click", () => changeStatus("ACTIVE")); 
document.getElementById("view_2").addEventListener("click", () => changeStatus("COMPLETED")); 

const removeComplete = () => {
    Object.keys(todoData).forEach((id)=>{
        const {checked} = todoData[id];
        if (checked) {
            removeTodo(id);
        }
    })
}

document.getElementById("clear_completed_button").addEventListener("click", removeComplete);

---

js 淺顯易懂教學：https://www.w3schools.com/js/default.asp

js 闖關遊戲： https://www.codecademy.com/

<style>
.reveal .slides {
text-align: left;
}
h1, h2{
text-transform: none !important;
}
</style>

# NodeJS
[NVM](https://hackmd.io/LkWnyH8HRZSVVosrrDgV1g)
[NodeJS](https://hackmd.io/llXQegO6RkGRyfeUsY8LXg)

## Notes