FCC Zipline Series by strongeleeroyFeb 11, 201612:10 am

FCC Zipline Series 104: Build a JavaScript Calculator | The JS Way

Today, we are going to be building a calculator app using vanilla JavaScript . No jQuery or other third party libraries/frameworks involved. I’m even going to make it more complicated by using objects and prototypical inheritance, so do not expect a quick and dirty job. Here’s a demo of what we’ll be building.

We’ll build a Calculator “class”, which will take care of the application logic. This Calculator, will have methods that we can access to pass it numbers, operations and ~~all sorts of cool stuff~~ that’s it.

FCC Algorithm Challenges by strongeleeroyFeb 8, 20162:46 pm

FCC Bonfire Series 148: Caesars Cipher

FreeCodeCamp has recently added a few more challenges to the site. One of them is Caesars Cipher. This bonfire will have us write a function that mimics the ages old encryption method allegedly used by Romans back in the day.

It’s one of the simplest and oldest encryption methods, and works by replacing each character in a word or sentence with another one down the alphabet (based on a shift amount). For this exercise, we are told to use a shift of 13. Let me show you an example using the word dog and a shift of three.

d -> e, f, g
o -> p, q, r
g -> h, i, j

JavaScript Core by strongeleeroyNov 23, 20158:56 pm

Bower, your new best friend… Or bird.

Applications grow in size and complexity by the day, and as new needs arise, new tools do too. Bower is one of them, let me tell you about it.

One day, you’re just bringing in jQuery into your nice little project, and then, suddenly, in a weeks time, you need to keep track of a framework, plugins, JS and CSS libraries and whatnot for this other side thing you’re doing. You may just keep a long txt file with a list of CDNs or an overloaded library folder with all of your favorite resources, and that is okay. You’re just missing out on the greatness of Bower, your new best friend.

Today, I’m going to show you the power of NPM and Bower working in tandem. I’ll expand on this in future posts by bringing in a few more tools (Gulp/Grunt, RequireJS, Webpack/Browserify) that you’ll surely find useful, I promise!

Bower is a very handy tool that fetches and brings in anything that you need for your project. That means libraries, frameworks, assets and, according to the official site, rainbows too. Anything that you may ever need is a few keystrokes away.

Before we get into the matter though, we need to get a couple dependencies set up; namely: NPM (Node Package Manager) and Git. Let’s get started.

FCC Zipline Series by strongeleeroyNov 23, 20158:05 pm

FCC Zipline Series 103: Build a Pomodoro Clock

This time, we are going to build our own Pomodoro Clock. No, this is not a Pomodoro, it’s actually a Commodore:

The Pomodoro clock has it’s own history, which is somewhat irrelevant to us at this point, but bear with me while I take you in a journey through time and space, a time of… Nevermind, it’s really just a clock. Actually, not even a clock, but a timer that allows us to set a few parameters. Namely: Pomodoro cycle time (25 min default) and break time (5 min default).

As a note, I will mention that we are not going to be using jQuery or any other library in this process. At the end of this post, you can find links to a live version of this exercise, along with an AngularJS and React version.

FCC Zipline Series by strongeleeroyNov 19, 20157:22 pm

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.