JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<ol id="list"></ol>
<a href="#" id="addmore">Add more</a>

JavaScript

document.addEventListener('DOMContentLoaded', ready)
    function ready() {
        var __start_index = 1;
        var __max_results = 10;
        show_more(__start_index, __max_results);
        
        var __a = document.getElementById('addmore');
        __a.addEventListener('click', function(event_object) {
            event_object.preventDefault();
            var __lists = document.querySelectorAll("#list li");
            show_more(__lists.length, 11);
        });
    }

    function show_more(__start_index, __max_results) {
        var __src = "https://gdata.youtube.com/feeds/api/videos/2sROs5zunGA/comments?v=2&alt=json&max-results=" + __max_results + "&start-index=" + __start_index;

        var __xhr = new XMLHttpRequest();
        __xhr.open("GET", __src,true);
        __xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var __data = JSON.parse(this.response);

                if (__data.feed && __data.feed.entry) {
                    var __list = document.getElementById('list');
                    var __entries = __data.feed.entry;
                    
                    var __length = __entries.length;
                    for (var i = 0; i < __length; i++) {
                        __list.innerHTML +='<li class="video"><a href="' + __entries[i].link[1].href + '"><span>' + __entries[i].author[0].name.$t + '</span></a> - <span>' + __entries[i].title.$t + '</span></li>'
                    }
                }
                var get_more = document.getElementById('addmore');
                if (__start_index === 90)
                    get_more.style.display = 'none';
                else if (__entries.length < 10)
                    get_more.style.display = 'none';
                else
                    get_more.style.display = 'block';
            }
        };
        __xhr.send();
    }