JSFiddle - React, Tailwind, and code Playground

by Checha Man

HTML

<div ng-app>
  <div ng-controller="AppController">
    <div class="button" ng-click="createContract()">
     Create Contract
    </div>
    <br>
    <pre>{{result}}</pre>
  </div>
</div>

CSS

.button {
  width: 150px;
  border: 1px solid green;
  text-align: center;
  cursor: pointer;
  padding: 10px;
}

pre {
  width: 400px;
  white-space: pre-line;
}

JavaScript

function AppController($scope, $http) {
  $scope.result = 'result will appear here';
  
  $scope.createContract = function(){
  	var endpoint = "https://" + "supergirl" + ".nogginhat.me" +
                  "/contract/create";
    var token = "eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJwb2RzZW5zZSIsImlhdCI6MTQ4NTkyOTY4NDA2NiwiZXhwIjoxNDg1OTMwMjg0MDY2fQ.0cYN-NZPYT0ZZ8gsYyZKoi7PW6fpbVbunhPxoljQrpbxHNIZ9YfTEZ1HVqzZV8LM_1KRf5rxKm7P48CbzqpVGA";
    var reqData = '{"contract_name": "podsense","contract_type": "debit","attributes": ["email"]}';

    var request = {
      method: 'POST',
      url   : endpoint,
      headers: {
        'Authorization': 'Bearer ' + token
      },
      data: reqData
    };
    
    $http(request)
      .then(function (response) {
        console.log('Success in creating contract!');
        $scope.result = response.data;
      }, function (error) {
        console.log('Error in creating contract');
        $scope.result = error;
      });
  }
}