Simple Twitterwall

In this example below you will see how to do a Simple Twitterwall with some HTML / CSS and Javascript

Twitterwall for your hashtag.

Thumbnail
This awesome code was written by voku, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright voku ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Simple Twitterwall</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h2>
  Simple Twitterwall
</h2>
<h6>
  With the power of AngularJS
</h6>

<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>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/voku/simple-twitterwall-AbcKd */
@import url("https://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%; }
}
@-moz-keyframes progress {
  to { width: 100%; }
}
@keyframes progress {
  to { width: 100%; }
}

@-webkit-keyframes blink {
  50% { background: rgb(226, 226, 226); }
}
@-moz-keyframes blink {
  50% { background: rgb(226, 226, 226); }
}
@keyframes blink {
  50% { background: rgb(226, 226, 226); }
}

/*Downloaded from https://www.codeseek.co/voku/simple-twitterwall-AbcKd */
angular.module('MyApp', []).directive('animate', function(){
  return function(scope, elm, attrs) {
    setTimeout(function(){
      elm.addClass('animate');
    });
  };
})


function TwitterCtrl($scope, $http) {
  $scope.hashtag = 'linux';
  
  var interval;
  var lastID;
  
  $scope.getResults = function() {
    $http(
      {
        method: 'JSONP',
        url: 'https://search.twitter.com/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();
}

Comments