Fully customised Twitter Widget using twitterFetch.js

gistfile1.js

<script type="text/javascript" src="js/twitterFetch.js"></script>

        <script>
            // ID of the Twitter List
            var id = '606429765768081409';
            
            // Settings for what the js library will output to the corresponding
            // element. Not an exhaustive list.
            var config5 = {
                "id": '606429765768081409',
                "domId": 'example1',
                "maxTweets": 3,
                "enableLinks": true,
                "showUser": true,
                "showTime": false,
                "dateFunction": '',
                "showRetweet": false,
                "customCallback": handleTweets,
                "showInteraction": false
            };
            
            // Gets called to handle an array of tweets allowing customised output.
            // Each tweet seems to just be a long string containing html tags.
            function handleTweets(tweets){
                var x = tweets.length;
                var n = 0;
                // element that will be filled with the data:
                var element = document.getElementById('example1');
                var html = '';                                
                
                while(n < x) {
                    // html specific to the template I was using:
                    html += '<div class="container">';
                    html += '<div class="row wow animated fadeInUp">';
                    html += '<div class="twitter_feed_icon col-sm-1 col-md-1"><a href="#twitter"><i class="fa fa-twitter"></i></a></div>';
                    html += '<div class="col-sm-11 col-md-11"><blockquote>';
                    
                    // Create a fake element so I can fill it with the raw response then
                    // use selectors to pull out what I need.
                    var el = document.createElement("div");
                    el.innerHTML = (tweets[n]);
                    var t = el.getElementsByClassName('tweet');
                    
                    // This is how you use a custom attribute and its value in a selector
                    var handle = el.querySelector("[data-scribe='element:screen_name']");
                    var name = el.querySelector("[data-scribe='element:name']");
                    var a = el.getElementsByClassName('user')[0].getElementsByTagName('a')[0].getAttribute('href');
                    
                    html += '<p>' + t[0].innerHTML + '</p>';
                    html += '- ' + name.innerHTML + ' (<a target="_blank" href="' +a+'">' + handle.innerHTML + '</a>)';
                    html += '</blockquote></div></div></div>'                                 

                    n++;
                }
                element.innerHTML = html;
            }
            
            twitterFetcher.fetch(config5);
        </script>