aderaaij

/* The highlight function we tagged on to our template string
Arguments: An array of strings in between variables and the variables
We could use `strings, age, name` as arguments but using the spread operator
to get all the variables is better scalable. */
function highlight(strings, ...values) {
    let str = '';
    /* For each string we add both string and value to the let value. If value doesn't exist, 
    add empty string. */
    strings.forEach((string, i) => {
      str += `${string} <span class='hl'>${values[i] || ''}</span>`;

aderaaij

const beer = {
    name: 'Belgian Wit',
    brewery: 'Steam Whistle Brewery',
    keywords: ['pale', 'cloudy', 'spiced', 'crisp']
};

function renderKeywords(keywords) {
    return `
        <ul>
            ${keywords.map(keyword => `<li>keywords: ${keyword}</li>`).join('')}

aderaaij

const song = {
    name: 'Dying to live',
    artist: 'Tupac',
    featuring: 'Biggie Smalls'
};

const markup = `
    <div class="song">
        <p>
            ${song.name} — ${song.artist}

aderaaij

const dogs = [
    { name: 'Snickers', age: 2 },
    { name: 'Hugo', age: 8 },
    { name: 'Sunny', age: 1 }
];

const markup = `
    <ul class="dogs">
        ${dogs.map(dog => `
            <li>

aderaaij

function calculateBill(total, tax = 0.10, tip = 0.15) {
    return total + (total * tax) + (total * tip);
}
console.log(calculateBill(100));

// Calculate bill with custom tip value and default tax value. Pass undefined
// expliclitely to use a default value that's not the first or last function argument
const bill = caluculateBill(100, undefined, 0.20);
console.log(bill);

aderaaij

const names = ['michelangelo', 'donatello', 'leonardo'];

const fullNames = names.map(name => `${name} turtle`);
console.log(fullNames);
const sayMyName = name => alert(`hi ${name}`)
sayMyName('Raphaello');

aderaaij

const race = '100m Dash';
const winners = ['Hunter Gath', 'Singa Song', 'Imda Bos'];

// Return an object with winners, the race they participate in and their 
// finishing place based on the order of the array
// Note that the second argument is shorthand, when both the name and value
// are equal
const win = winners.map((winner, i) => ({ name: winner, race, place: i+1}));
console.log(win);

aderaaij

// Switch out variables by destructuring in es6
let first = 'first';
let second = 'second';

console.log(first, second);

[first, second] = [second, first];

console.log(first, second);

aderaaij

browser-sync start -s --directory "/"

browser-sync start -s --directory "/" --files "**/*.html"

aderaaij

// A function to repeat whatever you feed it an x amount of time
// https://stackoverflow.com/a/30452949/4474075
const times = x => f => {
  if (x > 0) {
    f()
    times (x - 1) (f)
  }
}

// use it