Untitled

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
      <style>
         body {
         font-family: 'Lato';
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div class="row">
            <div class="col-md-10">
              <div class="card">
                 <div class="tweet-list">
                    <form action="{{ route('approve-tweets') }}" method="post">
                       <div class="tweet row">
                          <div class="col-sm-10">
                             <div class="media bg-light p-4 m-4 ">
                                <div class="media-left">
                                   <img class="img-thumbnail media-object" src="" alt="Avatar">
                                   <!-- {{ $tweet->user_avatar_url }} -->
                                </div>
                                <div class="media-body ml-4">
                                   <h4 class="media-heading">{{ '@' . $tweet->user_screen_name }}</h4>
                                   <p>{{ $tweet->text }}</p>
                                </div>
                             </div>
                          </div>
                       </div>
                    </form>
                 </div>
                 <div>
                    <ul class="pagination">
                       <li class="page-item disabled">
                          <a class="page-link" href="#">&laquo;</a>
                       </li>
                       <li class="page-item active">
                          <a class="page-link" href="#">1</a>
                       </li>
                       <li class="page-item">
                          <a class="page-link" href="#">2</a>
                       </li>
                       <li class="page-item">
                          <a class="page-link" href="#">3</a>
                       </li>
                       <li class="page-item">
                          <a class="page-link" href="#">4</a>
                       </li>
                       <li class="page-item">
                          <a class="page-link" href="#">5</a>
                       </li>
                       <li class="page-item">
                          <a class="page-link" href="#">6</a>
                       </li>
                       <li class="page-item">
                          <a class="page-link" href="#">7</a>
                       </li>
                       <li class="page-item">
                          <a class="page-link" href="#">8</a>
                       </li>
                       <li class="page-item">
                          <a class="page-link" href="#">9</a>
                       </li>
                       <li class="page-item">
                        <a class="page-link" href="#">10</a>
                     </li>
                     <li class="page-item">
                        <a class="page-link" href="#">11</a>
                     </li>
                       <li class="page-item">
                          <a class="page-link" href="#">&raquo;</a>
                       </li>
                    </ul>
                 </div>
              </div>
            </div>
         </div>
      </div>
      </div>
      </div>
      <script>
         document.addEventListener("DOMContentLoaded", function(event){

           function readTextFile(file, callback) {
             const rawFile = new XMLHttpRequest();
             rawFile.overrideMimeType("application/json; charset=UTF-8");
             rawFile.open("GET", file, true);
             rawFile.onreadystatechange = function() {
                 if (rawFile.readyState === 4 && rawFile.status == "200") {
                     callback(rawFile.responseText);
                 }
               }
               rawFile.send(null);
           }
           readTextFile("https://api.codetabs.com/v1/proxy?quest=http://it.deepcloud.eu/uploads/tweets-en.json", function(text){
                const tweets = JSON.parse(text);
                // console.log(tweets[0]);

                class Tweet{
                    constructor(name, screenName, avatar, text){
                        this.name = name;
                        this.screenName = screenName;
                        this.avatar = avatar;
                        this.text = text;
                    }
                }

                let _mediaContainer = document.getElementsByClassName('media');

                tweets.forEach((item, index) => {
                    let _tw = new Tweet(
                                    item.user.name,
                                    item.user.screen_name,
                                    item.user.profile_image_url_https,
                                    item.text
                                );
                    let _clone = _mediaContainer[0].cloneNode(true);
                    _mediaContainer[0].parentNode.appendChild(_clone);

                    let _snimka = document.getElementsByClassName('img-thumbnail');
                    _snimka[index].src = _tw.avatar;

                    let _fullHandle = document.getElementsByClassName('media-heading');
                    _fullHandle[index].innerText = _tw.name + " @ " + _tw.screenName;
                    _fullHandle[index].nextElementSibling.innerText = "#" + (index+1) + "." +_tw.text;
                });

                _mediaContainer[_mediaContainer.length - 1].remove();

                for (let index = 10; index < _mediaContainer.length; index++) {
                    _mediaContainer[index].style.display = 'none';
                }

                let _btns = document.getElementsByClassName('page-link');
                for(item of _btns){
                    item.addEventListener('click' , (e) => {
                        let page = parseInt(e.target.innerText);

                        for (let index = (page-1)*10; index < page*10; index++) {
                            _mediaContainer[index]?.style  ? _media[index].style.display = 'flex': '';
                        }
                        let active = document.querySelectorAll('.page-item.active');
                        let activePage = active[0].firstElementChild.innerText;

                        for (let index = (activePage-1)*10; index < activePage*10; index++) {
                            _mediaContainer[index]?.style ? _media[index].style.display = 'none': '';
                        }
                        e.target.parentNode.classList.add('active');
                        active[0].classList.remove('active');
                    });
                }

           });

         });
      </script>
   </body>
</html>