JavaScriptmancy - Basics - ES6 Arrow Functions - Exercises

ES6 Arrow Functions - Exercises

by vintharas

HTML

<pre><code id="theWorld">
</code></pre>

CSS

pre { 
    font-size: 0.9rem; 
    padding: 2%;
    background: #333; 
    color: white;
}

pre .world {
    display: block;
    white-space: pre-wrap;
}

pre .world-error{
    color: rgba(255,0,0,0.7);
}

pre .world-info {
    color: grey;
    font-style: italic;
    padding: 10px 0;
}

pre .world-spell{
    color: rgba(90,90,255,1);
}

Babel + JSX

// log stuff in the home-made console to the write in addition to
// logging it to the browser console
startWorld();
/*

JavaScript-mancy: Mastering the Arcane Art of Writing Awesome JavaScript for C# Devs
Chapter 10 - Upgrading Your Everyday JavaScript Magic With ES6: Arrow Functions - Exercises

*/

/* EXERCISES */
narrate("=== 1. You Shall Make a Magic Bow! ===");
narrate("Use ES6 Arrow functions to convert this ordinary wooden bow into a magic bow that can pierce the targets in this tutorial.");

/*
let woodenBow = {
  shoot(target){
     console.log(`You shoot a arrow to the ${target}`);
  }
}
*/

let magicBow = {
  shoot: (target) => console.log(`You shoot a magic arrow to the ${target}`)
};
mooleen.weaves('magicBow.shoot("first target")');

/* as mooleen shots the target it vanishes in thin air */

mooleen.says(`ha! Look at that! I'm awesome!`);
mooleen.says(`Now there's only one left!`);

gort.says(`Excellent job!`);
gort.says(`You shall make a better bow!`);

mooleen.says(`But this bow is awesome!`);
gort.says(`Can you pierce these with that bow?`);

/* All of the sudden 5 more targets materialize from thin air */

mooleen.says('Really?');

narrate("=== 2. You Shall Make a Better Bow! ===");
narrate("Improve your bow to be able to shoot elemental arrows to multiple targets. You should be able to satisfy the following interface.");

/*
elementalBow.shoot('fire', 'target 1');
// => you shoot a fire arrow to target 1
elementalBow.shoot('ice', 'target 2', 'target 3');
// => you shoot a ice arrow to target 2 and target 3
*/

let elementalBow = {
  shoot: (element, ...targets) => 
    console.log(`you shoot a ${element} arrow to ${targets.join(' and ')}`)
};

mooleen.weaves(`elementalBow.shoot('fire', 'target 1', 'target 2', 'target 3', 'target 4' , 'target 5')`);
// => you shoot a fire arrow to target 1 and target 2 and target 3 and target 4 and target 5

mooleen.says(`That's how I roll`);

gort.says('Congratulations! You have completed this...