As a follow up of my previous blog post on arrow functions, I thought I would create a little playground for you all to practice!

How does it work?

1. Open the browser console (on Chrome/Mac option+command+i but you can also right click and use "inspect" option).
2. Copy the initial function and see what it returns.
3. Transform it into an arrow function and run it in the console.
4. Go to the readme and check the answer to your question in the hidden field.

NOTE: I intended the answers to be included in this blog post but it seems that DEV does not react to <details> tag, sadly.

[1] Two arguments

Transform this function:

function sum(num1, num2){
    return num1 + num2
}

sum(40,2)
sum(42,0)
console.log("the answer to everything is", sum(42,0))

Check the answer here.

[2] One argument

Transform this function that tells you how long a string is:

function stringLength(str){
    console.log(`the length of "${str}" is:`, str.length)
}

let longestCityNameInTheWorld = "Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu"

stringLength(longestCityNameInTheWorld)

Check the answer here.

[3] One argument, pt.2

Let's change the previous function a bit to include a variable and a return statement:

function stringLength(str){
    let length = str.length
    console.log(`the length of "${str}" is:`, length)
    return str.length
}

stringLength("willynilly")

Check the answer here.

[4] One argument

Transform this function that selects a random element from the array and concatenates it to your name:

let alerts = ["Hey, you are awesome", "You are so wonderful", "What a marvel you are", "You're so lovely", "You're so sweet that I'd think you're a sweet potato -- and I LOOOOVE POTATOES"]

function showAlert(name){    
    alert(alerts[(Math.floor(Math.random()*alerts.length))] + `, ${name}!`)
}

showAlert("you ball of fluff")

Check the answer here.

[5] Nested functions

Transform this function that rotates elements in your browser + remember about transforming also the traditional function in the .map:

function oneTwoThreeRotate(){
    Array.prototype.slice.call(document.querySelectorAll('div,p,span,img,a,body')).map(function(tag){
        tag.style['transform'] = 'rotate(' + (Math.floor(Math.random() * 3) - 1) + 'deg)';
    })
}

oneTwoThreeRotate()

Check the answer here.

Cover photo from Pexels.