URL Shortener Microservice [freeCodeCamp [Back End Projects]] (Challenge)

index.html

<div class="container-wrapper" ng-app="srApp">
  <div class="shortener-container">
    <div class="shortener" ng-controller="srCtrl">
    <div class="text-center logo-wrap">
      <div ng-if="isLoading === false">
      <img class="logo" src="https://rawgit.com/linuxenko/linuxenko.github.io/master/showcase/freecodecamp/spring.svg" /> URL Shortener
      </div>
      <div ng-if="isLoading === true">
      <img class="logo animated infinite rubberBand" src="https://rawgit.com/linuxenko/linuxenko.github.io/master/showcase/freecodecamp/spring.svg" /> please wait ...
      </div>
    </div>
    <div class="text-center" ng-if="isLoading === false && resultingURI === null">
      <form ng-submit="submit(shortifierURI)">
      <input class="form-control input-lg" type="text" name="url" placeholder="Shortify something ..." ng-change="isError = null" required autofocus ng-model="shortifierURI" />
       <div class="error-message" ng-show="isError" >Invalid URI: {{shortifierURI}}</div>
        <button ng-show="shortifierURI.length" class="btn" type="submit"><i class="fa fa-compress"></i>
  &nbsp; shortify</button>
      </form>
    </div>
      
    <div class="text-center" ng-if="resultingURI !== null">
      <form ng-submit="resetResult()">
        
      <input class="form-control input-lg" type="text" name="resulting" value={{resultingURI}} />
        <button class="btn" type="submit"><i class="fa fa-refresh"></i>
  &nbsp; one more</button>
      </form>
    </div>
    
      <ul class="latest" ng-hide="isLoading">
        <li class="latest-desc">Last 3:</li>
        <li ng-repeat="l in latest">
          <a ng-href={{l.url}} target="_blank">
 {{l.url}} <i class="fa fa-external-link"></i></a>
        </li>
      </ul>
      
    </div>
  </div>
</div>

script.js

var SERVER_URI = 'url-shortener-freecodecamp.herokuapp.com';
var app = angular.module('srApp', []);

app.factory('factoryURI', function($http) {

  return {
    fetch : $http.get('//'+ SERVER_URI +'/latest'),
    create : function(uri) {
      return $http({
        method: 'POST',
        data : {url : uri},
        url : '//' + SERVER_URI
      });
    }
  }
});

app.controller('srCtrl', function($scope, factoryURI) {
  $scope.isLoading = true;
  $scope.resultingURI = null;
  $scope.isError = false;
  $scope.latest = [];
  
  function updateURIS() {
    factoryURI.fetch.success(function(data) {
       $scope.latest = data.map(function(d) {
           d.url = 'https://'+ SERVER_URI +'/' + d.uid;
           return d;
       });
      
      $scope.isLoading = false;
    });
  }

 $scope.resetResult = function() {
   $scope.resultingURI = null;
   $scope.shortifierURI = null;
 }
 
 $scope.submit = function(shortifierURI) {
   $scope.isLoading = true;
   factoryURI.create(shortifierURI).then(
     function(data) {
       $scope.latest = [
         {url : data.data.url}, 
         $scope.latest.shift(),
         $scope.latest.shift() ];
       $scope.resultingURI = data.data.url;
       $scope.isError = false;
       $scope.isLoading = false;
     }, function(err) {
       $scope.isLoading = false;
       $scope.resultingURI = null;
       $scope.isError = true;
       $scope.shortifierURI = shortifierURI;
   });
 }
  
 updateURIS();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>

style.less

@import url(https://fonts.googleapis.com/css?family=Roboto);
body,html,.container-wrapper {
  height: 100%;
  font-family: 'Roboto', sans-serif;
}

.container-wrapper {
  display: flex; 
}

.shortener-container {
  display: flex;
  margin: auto;
  max-width: 480px;
  box-shadow: 0px 0px 4px #444;
  background: #924da3;
  border-radius: 5px;
}

.shortener {
  padding: 10px 20px;
  min-width: 380px;
  min-height: 80px;
  .logo-wrap {
    color: #fff;
    font-size: 28px;
    margin: 10px 0px;
    text-transform: uppercase;
  }
  .logo {
    margin-bottom: 5px;
  }
  
  input[type=text] {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    &:focus {
      box-shadow: 0px 0px 2px #fff;
    }
  }
  
  .error-message {
    color : #fff;
    text-align: left;
    padding: 5px 0px;
  }
  
  button[type=submit] {
    width: 100%;
    margin: 10px 0px;
    height: 40px;
    background: none;
    border: 2px solid #fff;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;

    &:hover,&:focus {
      box-shadow: 0px 0px 2px #fff;
    }
  }
  
  .latest {
    list-style : none;
    margin-top: 10px;
    margin-left: 10px;
    padding: 0px;
    
    .latest-desc {
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    a {
      color : #fff;
      
      i {
        position: relative;
        font-size: 9px;
        top: -4px;
      }
    }
  }
  
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

url-shortener-microservice-freecodecamp-back-end-projects-challenge.markdown

URL Shortener Microservice [freeCodeCamp [Back End Projects]] (Challenge)

A Pen by Svetlana Linuxenko on CodePen.

License.