- What is CSS BEM?
Haven't used BEM before, but as I know, it's a class name naming convension, for better managing css code.
- What is the difference between em and rem units?
em
: Representing relativefont-size
, relative to parent element.rem
:root em
, representing relativefont-size
, but only relative to root element (<html>
).
- 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>
Answer
.row {
display: flex;
}
.col-2 {
flex: 0 0 calc(100% * 2 / 12);
}
.col-3 {
flex: 0 0 calc(100% * 3 / 12);
}
.col-7 {
flex: 0 0 calc(100% * 7 / 12);
}
- What is HTML5 Web Storage? Explain localStorage and sessionStorage.
- Web Storage: Browser can store key-value-pair data through Web Storage API.
- localStorage: One kind of web storage, persists the data even when the browser is closed.
- sessionStorage: One kind of web storage, keep the data until the session of the page is closed.
- What’s the difference between a block-level element and an inline element?
- block element: Each element starts on a new line, have width and height.
- inline element: Element doesn't start on a new line, have no width and height.
- What are the differences between var, let and const?
var
: Function scope variable.let
: Block scope variable.const
: Block scope variable, can't be reassigned, can't be redeclared.
- What is the difference between the array methods map() and forEach()?
map()
: Iterate through input array and return a new array.forEach()
: Iterate through input array.
- 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 }
);
Answer
function batches(recipe, available) {
const numberOfIngredients = [];
for (ingredient in recipe) {
if (recipe[ingredient] === 0) continue;
numberOfIngredients.push(
Math.floor((available[ingredient] || 0) / recipe[ingredient])
);
}
return Math.min(...numberOfIngredients);
}
- 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)))
Answer
function pipe(...methods) {
return function(input) {
let output = input;
for (method of methods) {
output = method(output);
}
return output;
};
}
- 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"
}
];
Answer:
function getBooksFromAuthors(authors) {
const books = [];
for (author of authors) {
const { id: authorId, name: authorName } = author;
for (book of author.books) {
const { id: bookId, name: bookName } = book;
books.push({
author: authorName,
authorId,
book: bookName,
bookId
});
}
}
return books;
}