JSFiddle - React, Tailwind, and code Playground

by Luiza CICONE

HTML

<div ng-show="formMode == 'HotelSearch'" id="hotelResults" ng-controller="hotelSearchCtrl">
  
  <button ng-click="hotelSearch()">
    Search
  </button>
  <div class="row" ng-repeat="hotel in hotels">
    <div class="col-md-6 col-lg-4 col-sm-12">
      <div class="card">
        <div class="front">
          <div class="cover">
            <img src="https://jsfiddle.net/img/logo.png" class="img-responsive" />
          </div>
          <div class="content">
            <div class="main">
              <h3 class="name">{{hotel.name}}</h3>
              <h5><i class="fa fa-map-marker fa-fw text-muted"></i> {{hotel.location}}</h5>
              <h5><i class="fa fa-building-o fa-fw text-muted"></i> {{hotel.phone}}</h5>
              <h5><i class="fa fa-envelope-o fa-fw text-muted"></i> {{hotel.email}}</h5>
            </div>
            <div class="footer">
            </div>
          </div>
        </div>
        <!-- end front panel -->
      </div>
      <!-- end card -->
    </div>
  </div>
</div>

JavaScript

var app = angular.module('app', []);
app.controller('hotelSearchCtrl', ['$scope', '$http',
  function($scope, $http) {

    $scope.formMode = 'HotelSearch';

    $scope.hotelSearch = function() {
      $http.get('https://api.ipify.org?format=json').then(
        function onSuccess(response) {
          $scope.hotels = [{
            name: "stuff",
            location: "USA",
            phone: "025-568"
          }, {
            name: "stuf2f",
            phone: "0225-568",
            email: "test@mail.com"
          }];
          console.log($scope.hotels);
        }).
      catch(
        function onError(err) {
          console.log(err);
        });
    }
  }
]);