Tag: Algorithm

FCC Zipline Series 102: Build a Random Quote Machine | The React Way

This time, we are going to be building a Random Quote Machine. We must code a page that replicates the functionalities present here. The user stories that we must fulfil are the following:

  • As a user, I can click a button to show me a new random quote.
  • Bonus: As a user, I can press a button to tweet out a quote.

I’m going to take this chance to let you take a peek into React. If you just want the walk-through for the vanilla JavaScript version, take a look at this other post.

You may, or may not have heard about React before, but it’s getting quite popular as of late. It’s a library made by the guys at Facebook, who describe it as the following:

React: A JavaScript library for building user interfaces.

It’s a front-end framework similar to Angular, Ember or Backbone (someone reading this is probably orchestrating my assassination right now, bear with me please) but not quite so. In a MVC (Model View Controller) architecture, we could say that react is our V (View).

Hopefully, this exercise will grant you some insight into what React is and how it operates at a basic level; and help you decide whether to give it a shot or not. I’m also putting up an AngularJS and vanilla JavaScript version of this same exercise, in case you’re more interested in those.

FCC Zipline Series 102: Build a Random Quote Machine | The JS Way

This time, we are going to be building a Random Quote Machine. We must code a page that replicates the functionalities present here. The user stories that we must fulfil are the following:

  • As a user, I can click a button to show me a new random quote.
  • Bonus: As a user, I can press a button to tweet out a quote.

I’m going to take you through the process of setting up the JS code necessary for this app to work. If you want to give React a chance, go ahead and visit this other post, where we’ll build this same app using Facebook’s React framework.

FCC Bonfire Series 147: Friendly Date Ranges

Sad but true. Today, we’ll be tackling Friendly Date Ranges, the last bonfire in the entire FCC Bonfires Series. If you’ve made it up to this point, this next exercise shouldn’t pose much of a problem, but we’ll go through it anyway.

This time, we must write a function that given an array containing two strings that representing two dates (in ‘YYYY-MM-DD’ format) returns a human friendly date range. What the hell does that mean?

According to Free Code Camp, it’s a date range with no redundant information, in other words, if both dates are in the same year and month, only display the day range within that month etc. Keep in mind that if starting in the current year, the following year can be inferred by the reader and thus, should not be displayed. But I’ll stop babbling nonsense and show you some examples so we can get started:

['2015-10-04', '2015-10-20'] -> ['October 4th', '20th']
['2015-12-24', '2016-01-03'] -> ['December 24th', 'January 3rd']
['2020-01-21', '2021-05-25'] -> ['January 1st, 2020', 'May 25th, 2021'];