# CSS

1. What is CSS BEM?

    CSS的一種命名規則， 由區塊(Block)、 元素(Element) 與修飾詞(Modifier) 組合而成，
    元素帶有雙底線前墜， 修飾詞帶有雙減號前墜， 藉由這種命名規則來增加使用的方便度

2. What is the difference between em and rem units?

    em: 為字大小的長度， 會受到上下文的影響， 若有改變過字體大小則會跟著改變em長度
    rem: 為html標籤的字體大小長度， 不受上下文影響

3. Using flexbox, create a 3-column layout where each column takes up a col-{n} / 12 ratio of the container.

<div class="row">
  <div class="col-2"></div>
  <div class="col-7"></div>
  <div class="col-3"></div>
</div>

    .row {
        display: flex;
    }

    .col - 2 {
            flex: 2;
        }

        .col - 3 {
            flex: 2;
        }

        .col - 7 {
            flex: 2;
        }

-------------------------------------------------

# HTML

1. What is HTML5 Web Storage? Explain localStorage and sessionStorage.

    Web Storage 為一種儲存於客戶端的方法， 分為localStorage與sessionStorage。 不同於cookie， 此方法不會跟隨請求送出而浪費頻寬。

    localStorage: 沒有到期限制， 就算關閉瀏覽器還是會存在， 不同分頁間是共用的。
    sessionStorage: 當瀏覽器被關閉， 資料就會消失。

2. What’s the difference between a block-level element and an inline element?

    block元素: 元素從新的一行開始， 不論寬度， 都會占用全部寬度
    inline元素: 行內元素， 占用寬度為內部元素寬度， 不會造成段行或改變配置

-------------------------------------------------

# Javascript

1. What are the differences between var, let and const?

    const: 作用域為區塊，在區塊內不可重複宣告， 沒有自動提升特性， 不可重複賦值， 宣告時必須賦值， 首次宣告後不能更動其定址。
    let: 作用域為區塊，在區塊內不可重複宣告， 沒有自動提升特性， 可以重複賦值。
    var: 作用域為函式內 重複宣告會蓋過前面的值， 有自動提升特性， 在賦值前呼叫為undefined。

2. What is the difference between the array methods map() and forEach()?

    map: 無副作用， 迴圈循環函式， 次數為陣列的寬， 回傳新的陣列， 陣列內容為函式回傳值的集合。
    forEach: 無副作用， 迴圈循環函式， 次數為陣列的寬度。

3. Create a function batches that returns the maximum number of whole batches that can be cooked from a recipe.

/**
It accepts two objects as arguments: the first object is the recipe
for the food, while the second object is the available ingredients.
Each ingredient's value is number representing how many units there are.
 `batches(recipe, available)`
*/
// 0 batches can be made
batches(
  { milk: 100, butter: 50, flour: 5 },
  { milk: 132, butter: 48, flour: 51 }
)
batches(
  { milk: 100, flour: 4, sugar: 10, butter: 5 },
  { milk: 1288, flour: 9, sugar: 95 }
)

// 1 batch can be made
batches(
  { milk: 100, butter: 50, cheese: 10 },
  { milk: 198, butter: 52, cheese: 10 }
)

// 2 batches can be made
batches(
  { milk: 2, sugar: 40, butter: 20 },
  { milk: 5, sugar: 120, butter: 500 }
)

    function batches(recipe, available) {
        let count = -1;
        Object.keys(recipe).forEach((index) => {
            const thisCount = available[index] ? Math.floor(available[index] / recipe[index]) : 0;
            if (count === -1) {
                count = thisCount;
            } else if (count !== 0) {
                count = Math.min(thisCount, count);
            }
        });
        return count;
    }

4. Create a function pipe that performs left-to-right function composition by returning a function that accepts one argument.

const square = v => v * v
const double = v => v * 2
const addOne = v => v + 1
const res = pipe(square, double, addOne)
res(3) // 19; addOne(double(square(3)))

    function pipe() {
        const arg = arguments;
        return function (value) {
            let sum = 0;
            const length = arg.length;
            for (let i = 0; i < length; i++) {
                sum = arg[i](i === 0 ? value : sum);
            }
            return sum;
        };
    }

5. Create a function to handler Array Object data

input origin Data:
const authors = [

      {
          name: ‘張曼娟’,
          id: ‘a001’,
          books: [{
                  name: ‘人間好時節’,
                  id: ‘a1b001’,
              },
              {
                  name: ‘時間的旅人’,
                  id: ‘a1b002’,
              },
          ],
      }, {
          name: ‘瑞． 達利歐’,
          id: ‘a002’,
          books: [{
              name: ‘原則： 生活和工作’,
              id: ‘a2b001’,
          }, ],
      },

];

output flat Data：
const books = [

    {
        author: ‘張曼娟’,
        authorId: ‘a001’,
        book: ‘人間好時節’,
        bookId: ‘a1b001’,
    }, ….other book

];

    function getBooks(authors = []) {
        return authors.reduce((books, authorValue) => {
            let book = [];
            if (authorValue.books) {
                book = authorValue.books.map((authorBooks) => ({
                    author: authorValue.name,
                    authorId: authorValue.id,
                    book: authorBooks.name,
                    bookId: authorBooks.id,
                }));
            }
            return books.concat(...book);
        }, [])
    }