How to Build a Random Quote Web App using AngularJS

Hello there ! Last week I was working on an exciting project and was planning to write its tutorial, so here it is. This post is a step by step tutorial about how can you build a simple web app using HTML, CSS and Javascript. It’s a beginner level tutorial which will walk you through how can you build a Random Quote Generator Web app all the way from scratch to finish. What is “Random Quote Generator” web app you might ask ? Well, it’s a single page, simplistic web app which will display a randomly generated quote to the user when they click a button, and that’s all what it does 🙂 You click a button a new quote generates, you click the button again and another quote generates and displays on the browser and so on. Also you can tweet a quote if it falls into single tweet character budget.

So here are the tools that you’re going to need to build this web app

    • A web browser

I’d use Google Chrome preferably, however you can also use Firefox or any other good browser of your choice.

    • Sublime Text Editor

For writing code I’d use Sublime Text 3. Again, you can use any text editor you like. Just don’t use Notepad 🙂

    • Browser Sync

We will need a light weight server for in-browser testing, as browsers do not load Javascript unless the files are hosted on some server. Also Browser Sync would allow synchronized browser testing, means that we won’t need to refresh the webpage, every time we make changes to our script. All the changes will be automatically reflected as you hit save (Ctrl+S). Works pretty cool especially when you have multiple screens 🙂

To install Browser Sync enter the following command in the terminal/command prompt. (You must have NodeJS pre-installed for this)

  npm install -g browser-sync

Once everything you need is ready, you can proceed and start building your web app. Most web apps comprise of HTML, CSS and Javascript files (bare minimum). So that’s what we’re gonna do first.

    • Create a directory/folder and name it anything you want, lets say “RandomQuoteApp”.
    • Create 3 files in that directory one html file, one css file and one Javascript file.
    • Name the files as index.html, style.css and app.js receptively. You can name them anything you want, but these are just conventional names to keep the things intuitive.
    • Now open up a terminal/command prompt in that directory and fire up the browser sync because we’re about to start writing code now 🙂 Use the following command to fire up the browser sync
  browser-sync start --server --directory --files "*"

So now we are ready to write code as our browser sync is also ready and will render the changes synchronously as we code. Lets just lay out the skeletal structure of our app in html. We will need a text are to display the quote text along with its author and we need a button in order to load the new quote. We don’t have the quote yet at this moment, but we’re just laying out the app’s frond end view. I’ve also included Bootstrap from CDN in order to make it responsive.

 <h1 align="center">Crazy Quote Machine</h1>
  <div>
   <div class="col-md-8 col-md-offset-2" align="center">

    This is the quote text
    This is the Author

   <div class="btn btn-default" align="center">New Quote Button</div>
  </div>
</div>

So this is just the skeletal view, it’s going to completely change when we’ll start writing Javascript code.
So let’s get to the point, we laid out the front end view of the app (sort of 😉 ).
Where do we get the quote from ???
Well here’s the tricky part, yet most simplistic 🙂 We’ll be extracting the quote from a RESTful resource. That RESTful resource or the RESTful API will give us a random quote each time we request it for the quote. That serves our purpose of random quote generation pretty good. Each time user clicks the button we’d send a request to extract a quote and then we’ll display it to the user.

So we would need to instantiate an HTTP request to the RESTful resource using Javascript. This task can be easily done via JQuery, but I’m using AngularJS for the sake of this example here. The reason I chose Angular JS is because it’s clean and and perfect data binding mechanism than Jquery. Download the angular.min.js file from AngularJs official website and copy it into the directory/folder you created at the beginning.

Once you copied the file into the folder, you’re ready to write Javascript code, infact AngularJS code. So head over into app.js file and write this code in there.

(function(){
    'use strict';
     angular.module('RQApp', [])
     .controller('RQAppController', RQAppController);
     RQAppController.$inject = ['$scope', '$http']
     function RQAppController ($scope,$http){
	$scope.getQuote = function(){ 
         $http({method : "GET",url : "http://quotes.stormconsultancy.co.uk/random.json"})
         .then(function mySuccess(response){
	    $scope.myResponse = response.data;
          }, function myError(response){
            $scope.myResponse = response.statusText;
        });
      }
    };
})()

I started this script with a standard IIFE(Immediately Invokeable Function Expression) to begin with. Then I created and Angular Module “RQApp” followed by an Angular Controller named “RQAppController”. I separated the dependency injection array from the controller part and put it explicitly using $inject directive. I intentionally did this to prevent the code from minification hazards and increasing the code readability. We’re using angular $scope and $http services as we need to send and HTTP request on a RESTful resource via GET method and store the response inside an angular $scope variable.

Now that we’ve implemented the core functionality, it’s time to bind the data on the front end side i.e. HTML.
In index.html we will bind the divs associated with quote text and author with the respective response data we received in response of the request.

<h1 align="center">Crazy Quote Machine</h1>
 <div>
  <div class="col-md-8 col-md-offset-2" align="center">
   {{myResponse.quote}}
   {{myResponse.author}}
  <div class="btn btn-default" align="center">New Quote</div>
  <div class="btn-group"><a target="_blank"><button class="btn btn-primary">Tweet Quote</button></a></div>
  <div class="row">
   <div class="col-md-8 col-md-offset-2">
    <div id="warn" class="alert alert-warning">140">Warning: Quote too long to tweet.</div>
</div>


</div>
</div>

</div>

Finally you can go ahead to your style.css file and customize the style the way you want. 🙂
In the next part of this tutorial we will go ahead and fix some issues with this app and make it more robust for the users. In fact you should go ahead and watch for the missing spots in this app and let me know in the comments 🙂 Thanks .
Here is the Github Repository of this project where you can get the full code of the app.
Thanks for the read !! Happy Coding 🙂

 

Shabbir

I'm student of computer Sciences and Self Taught Developer, dedicated to Self Education via MOOCs :)

 

Leave a Reply

Your email address will not be published. Required fields are marked *