Love Calculator app using angularjs

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.
1) https://github.com/n3-charts/pie-chart
2) http://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.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.