F2E interview question

CSS

1) What is CSS BEM?
2) What is the difference between em and rem units?
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>

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

HTML

1) What is HTML5 Web Storage? Explain localStorage and sessionStorage.
2) What’s the difference between a block-level element and an inline element?

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

Javascript

1) What are the differences between var, let and const?
2) What is the difference between the array methods map() and 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 }
)

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


4) 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 someHandler(data) {
  /*
    to do
  */
  return 'new data'
}