Random Quotes Machine

 

“The things should work; the way we expect them to work; without surprises”

– EfficientUser

I’ve created a quote machine as a part of my course in freeCodeCamp. I’m always interested to read books and famous quotes which has some deep meaning, intellectual thoughts and sometimes some random ones.

This task is really interesting,  the user stories are very simple.

  • I can use whichever libraries or APIs I need. And I have some personal style.
  • When I click a button it should show me a random quote.
  • When I click a share button it should tweet the quote.

To complete this task, I’ve searched on the internet whether any free APIs are already there to give me a random quote. And I have got a bunch of links. I have picked an API from the top list and started adding into my code.

The API documentation provides sample request to query the API. It’s a getJSON sample which uses jQuery to run. So I have imported jQuery CDN in my HTML code.

Then I have created the button to trigger the API call to get Quotes. And created a tweet button with the help twitter official documentation. For some personal styling, I have added material CSS CDN to my code.

Earlier I have displayed the quotes in the normal div, then I have replaced it with material CSS cards.

That’s it! Quote Machine Ready 🙂

You can find the quote machine I have created below,

And also I have recorded the vlog when doing the quote machine coding task.

You find that below:

Check it out, and let me know thoughts in comment section.

Happy coding 🙂

Default Parameters – ECMAScript 6

In JavaScript, parameters of functions default to undefined. However, in some situations, it might be useful to set a different default value.

In the past, the default value for a parameter is defined in the function body based on the value of the parameter as below:

function multiply(a, b) {
    b = (typeof b !== 'undefined') ? b : 1;
    return a * b;
}

console.log(multiply(5, 2)); // 10
console.log(multiply(5, 1)); // 5
console.log(multiply(5)); // 5

In the above code snippet the typeof parameter b is being checked, if the value is undefined then the value is set to 1.
Sometimes people will be using || operator to set default value as below

function multiply(a, b) {
    a = a;
    b = b || 1;
    return a * b;
}

console.log(multiply(5, 5)); // 25 -- value of b is 5
console.log(multiply(5)); // 5 -- value of b is 1, which taken from
                      // initialization using || operator

This pattern is most used but is dangerous when we pass values like

console.log(multiply(5, 0));

Because the 0 is falsy, and so the b || 1 results in 1, not the directly passed in 0. To handle this, coders started initializing value in function bodies.

In ECMAScript 6, the checks in the function body are no longer needed, we can define the default value in function head itself as follows:

function multiply(a, b = 1) {
    return a * b;
}

console.log(multiply(5, 2)); // 10 -- value of b is 2
console.log(multiply(5, 5)); // 25 -- value of b is 5
console.log(multiply(5)); // 5 -- value of b is 1, which taken from
                  // default parameter initialization

console.log(multiply(5, undefined)); // 5 -- value of b is 1,
                 // even if we pass  undefined as value to parameter b

The default value for parameter b is initialized from function head if it didn’t have any valid input.

If we convert the above ES6 code into native javascript code using Babel transpiler, we will get the following equivalent code

"use strict";

function multiply(a) {
    var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

    return a * b;
}

console.log(multiply(5, 2)); // 10 -- value of b is 2
console.log(multiply(5, 5)); // 25 -- value of b is 5
console.log(multiply(5)); // 5 -- value of b is 1, which taken from
// default parameter initialization

console.log(multiply(5, undefined)); // 5 -- value of b is 1,
// even if we pass  undefined as value to parameter b

ECMAScript 6 is a syntactic sugar for the existing components 🙂

Happy Coding 🙂