Love Calculator app using angularjs

Published on May 4, 2015

Hi, Guys welcome back to my another angular.js application tutorial. We will call this app as Love CalC. This app will take your name and your partner name as input and it will show you how much you are compatible with each other. This App is just for fun.

Demo

Download

Ok now I did this app. actually, I want to show you how to work with open apis in angular. When I googled for open API’s I end up with https://www.mashape.com. It’s simply amazing there you can find number free API’s. Let’s see the code. Besides angular we are going to use.

https://github.com/n3-charts/pie-chart
//d3js.org We will use above two to show the graph.

Let’s see the code.

index.html(boilerplate)

<!DOCTYPE html>
<html lang="en" data-ng-app="LoveCalc">
  <head>
    <meta charset="UTF-8" />
    <title>Fun with Love calculater - techumber</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css"
    />
  </head>
  <body>
    <div class="ui page grid">
      <div class="column" data-ng-controller="LoveCalcCtrl">
        <h1 class="ui header aligned center">NG Love Calc</h1>
      </div>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-messages.min.js"></script>
    <script src="//cdn.rawgit.com/n3-charts/pie-chart/master/dist/pie-chart.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

same old HTML code. added all our third party libraries.

index.html

<div class="ui segment" data-ng-class="{loading:isProcessing}">
  <div class="ui two column middle aligned relaxed fitted stackable grid">
    <div class="column">
      <form class="ui form" data-ng-submit="getResult(data)" name="loveForm">
        <div
          class="field required"
          data-ng-class="{error: (loveForm.fname.$invalid && loveForm.fname.$dirty)}"
        >
          <label>First Name </label>
          <div class="ui left icon input">
            <input
              type="text"
              placeholder="First Name"
              required
              name="fname"
              data-ng-model="data.fname"
            />
            <i class="user icon"> </i>
          </div>
          <div ng-messages="loveForm.fname.$error">
            <div data-ng-include="'messages.tpl.html'"></div>
          </div>
        </div>
        <div
          class="field required"
          data-ng-class="{error: (loveForm.sname.$invalid && loveForm.sname.$dirty)}"
        >
          <label>Partner Name </label>
          <div class="ui left icon input">
            <input
              type="text"
              placeholder="Second Name"
              name="sname"
              required
              data-ng-model="data.sname"
            />
            <i class="user icon"> </i>
          </div>
          <div ng-messages="loveForm.sname.$error">
            <div data-ng-include="'messages.tpl.html'"></div>
          </div>
        </div>
        <button
          type="submit"
          class="ui blue submit button"
          data-ng-disabled="loveForm.$invalid"
        >
          Get Result
        </button>
      </form>
    </div>
    <div class="ui vertical divider">
      Or
    </div>
    <div
      class="column aligned center"
      style="height:200px;margin-top: -25px;"
      data-ng-show="gauge_data[0].label"
    >
      <pie-chart data="gauge_data" options="gauge_options"> </pie-chart>
    </div>
  </div>
</div>

HTML form with semantic UI. and added ‘pie-chart’ directive. When we get the data from the server we this will get the update.

message.tpl.html

<div
  class="ui red pointing prompt label transition visible"
  ng-message="required"
>
  This filed is required
</div>

Your message template to show angular forms error messages.

app.js

angular
  .module("LoveCalc", ["ngMessages", "n3-pie-chart"])
  .controller("LoveCalcCtrl", [
    "$scope",
    "$http",
    function($scope, $http) {
      $scope.gauge_data = [
        {
          label: "",
          value: 0,
          suffix: "%",
          color: "steelblue"
        }
      ];
      $scope.gauge_options = {
        thickness: 5,
        mode: "gauge",
        total: 100
      };
      $scope.getResult = function(data) {
        $scope.isProcessing = true;
        $http
          .get(
            "process.php?fname=" +
              data.fname.replace(/ /g, "") +
              "&sname=" +
              data.sname.replace(/ /g, "")
          )
          .then(function(res) {
            $scope.isProcessing = false;
            $scope.gauge_data[0].value = res.data.percentage;
            $scope.gauge_data[0].label = res.data.result;
          });
      };
    }
  ]);

Hear we creating our module. We are going to get data from our process.php. We will update our scope variables.

process.php

header("content-type:application/json");

$fname = isset($_REQUEST['fname'])?$_REQUEST['fname']:diex('First Person Name Required');
$sname = isset($_REQUEST['sname'])?$_REQUEST['sname']:diex('Secons Person Name Required');

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,'https://love-calculator.p.mashape.com/getPercentage?fname='.$fname.'&sname='.$sname);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$headers = array();
$headers[] = 'X-Mashape-Key: HERE YOUR MASHAPLE KEY GOES.....';
$headers[] = 'Accept: application/json';
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$server_output = curl_exec ($ch);
curl_close ($ch);
print $server_output ;

function diex($err){
  echo json_encode(array(
    'err'=> $err
  ));
  die();
  return;
}

Now, this is important we are using php_curl to interact with mashape API. Don’t forget to add your Mashape key in this code.