JSFiddle - React, Tailwind, and code Playground

by t4gedieb

HTML

<script src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0-beta.3/angular-animate.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.6/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.6/angular-strap.tpl.js"></script>
<link rel="stylesheet" href="http://rawgit.com/mgcrea/bootstrap-additions/master/dist/bootstrap-additions.css">
<script src="https://rawgit.com/paulyoder/angular-bootstrap-show-errors/master/src/showErrors.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgit.com/frapontillo/angular-highcharts/develop/dist/angular-highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.9.0/angular-moment.js"></script>
<div ng-app="weather" ng-controller="LocationCtrl as locationCtrl">
    <header class="navbar" role="banner">
        <div class="container">
            <div class="navbar-header"> <span class="navbar-brand" style="font-size:24px">Weather Service&nbsp;<i class="glyphicon glyphicon-cloud"></i></span>

                <div class="nav navbar-nav">
                    <form class="navbar-form" role="search" name="locationForm" ng-submit="locationForm.$valid && locationCtrl.search()" novalidate>
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" class="form-control" ng-model="locationCtrl.location.location" /> <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>

                            </div>
                            <!-- span class="glyphicon...

JavaScript

(function () {
    Highcharts.setOptions({
        global: {
            useUTC: true
        }
    });

    var app = angular.module('weather', ['ngAnimate', 'ui.bootstrap.showErrors', 'mgcrea.ngStrap', 'frapontillo.highcharts', 'angularMoment']);

    app.controller('LocationCtrl', function ($http, $alert, $scope) {
        var that = this;
        this.location = {
            location: 'Playa del Carmen'
        };
        this.reset = function () {
            this.data = {};
        }
        this.search = function () {
            $http.get('http://api.worldweatheronline.com/free/v2/search.ashx', {
                params: {
                    format: 'json',
                    key: 'bf6fd5a6c5bccdd76cd16dc286b83',
                    q: this.location.location,
                    popular: this.location.isPopular ? 'yes' : 'no'
                }
            }).success(function (result) {
                that.data = result;
                $scope.$broadcast('change-location');
                if ((result.data || {}).error) {
                    $alert({
                        content: result.data.error[0].msg,
                        placement: 'top-right',
                        container: 'body',
                        type: 'danger',
                        show: true
                    });
                }
            });
        };
    });

    //

    app.controller('WeatherCtrl', function ($http, $alert, $scope, moment) {
        var that = this;
        $scope.$on('change-location', function () {
            that.data = {};
        });
        this.get = function (location) {
            $http.get('http://api.worldweatheronline.com/free/v2/marine.ashx', {
                params: {
                    format: 'json',
                    key: 'bf6fd5a6c5bccdd76cd16dc286b83',
                    lang: 'de',
                    q: location.latitude + ',' + location.longitude
                }
            }).success(function (result) {
            ...