JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<form ng-app="MyApp" ng-controller="TwitterCtrl" ng-submit="initResults()">
  <span>#</span>
  <input type="text" ng-model="hashtag" placeholder="Hashtag" spellcheck="false" />
  <input type="submit" value="Start" />  
  <hr ng-class="progressClass" />  
  <ul id="tweets">
    <li animate ng-repeat="tweet in tweets">
      {{tweet.text}}
    </li>
  </ul>
</form>

CSS

@import url("http://fonts.googleapis.com/css?family=Nunito:300,400");

* {
  font: normal 20px/30px Nunito, sans-serif;
  color: rgb(66, 66, 66);
  
  border: 0;
  margin: 0;
  padding: 0;
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  margin: 1em;
  background: rgb(239, 239, 239);
}
h2 {
  color: rgb(241, 188, 26);
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  text-transform: uppercase;
}
h6 {
  color: rgb(99, 99, 99);
  font-weight: 300;
  text-align: center;
}

form {
  width: 600px;
  margin: 20px auto;
  display: block;
}
span {
  float: left;
  width: 40px;
  height: 50px;
  background: #FFF;
  text-align: right;
  font-size: 30px;
  line-height: 50px;
}
input[type="text"] {
  float: left;
  width: 360px;
  height: 50px;
  padding: 0 20px 0 10px;
  outline: 0;
  background: #FFF;
  line-height: auto;
}
input[type="submit"] {
  float: left;
  width: 200px;
  height: 50px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  background: rgb(2, 218, 175);
  line-height: 52px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
input[type="submit"]:hover {
  background: rgb(241, 188, 26);
}

hr {
  top: 15px;
  clear: both;
  width: 0;
  height: 5px;
  margin: 0 0 25px;
  display: block;
  position: relative;
  background: rgb(2, 218, 175);
  
  
}
hr.load {
  -webkit-animation: progress 10s infinite;
  -moz-animation: progress 10s infinite;
  animation: progress 10s infinite;
}

ul {
  list-style: none;
}

li {
  width: 100%;
  margin: 5px 0;
  padding: 30px 40px;
  display: inline-block;
  background: rgb(248, 248, 248);
  font-size: 18px;
  font-weight: 300;
  line-height: 24px;
  text-decoration: none;
  
  transition: background 1s;
  -moz-transition: background 1s;
  -webkit-transition: background 1s;
}

li.animate {
  -webkit-animation: blink 1s 2;
  -moz-animation: blink 1s 2;
  animation: blink 1s 2;
}

@-webkit-keyframes progress {
  to { width: 100%;...

JavaScript

angular.module('MyApp', []) 


function TwitterCtrl($scope, $http) {
  $scope.hashtag = 'news';
  
  var interval;
  var lastID;
  
  $scope.getResults = function() {
    $http(
      {
        method: 'JSONP',
        url: 'https://api.twitter.com/1.1/search.json',
        params: {
          'q': encodeURIComponent('#' + $scope.hashtag),
          'since_id': lastID || '',
          'rpp': 5,
          'result_type': 'recent',
          'callback': 'JSON_CALLBACK'
        }
      }
    )
    .success(
      function(data) {
        if ( data.results && data.results.length ) {
          if ( data.max_id === lastID ) {
            return;
          }
          
          lastID = data.max_id;
          
          angular.forEach(
            data.results,
            function(value, key) {
              $scope.tweets.unshift(
                value
              );
            }
          );
        }
      }
    );
  }
  
  
  $scope.initResults = function() {
    /* No hashtag? */
    if ( ! $scope.hashtag ) {
      return;
    }
    
    /* Clear items list */
    $scope.tweets = [];
    
    /* Start by null */
    lastID = 0;
    
    /* Reset progress bar */
    $scope.progressClass = '';
    $scope.progressClass = 'load';
    
    /* Fire */
    $scope.getResults();
    
    /* Set interval */
    interval = setInterval(
      function() {
        $scope.getResults();
      },
      10000
    );
  }
  
  $scope.initResults();
}