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="#">&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[1]);

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

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

                for(let i = 0; i < tweets.length; i++){
                    let _tw = new Tweet(
                            tweets[i].user.name,
                            tweets[i].user.screen_name,
                            tweets[i].user.profile_image_url,
                            tweets[i].text
                    );
                    let _clone = _msg[0].cloneNode(true);
                    _msg[0].parentNode.appendChild(_clone);

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

                    let _h4 = document.getElementsByClassName('media-heading');
                    _h4[i].innerText = i + " " + _tw.name + " @ " + _tw.username;

                    let _p = document.getElementsByTagName('p');
                    _p[i].innerText = _tw.text;

                }

                _msg[_msg.length - 1].parentNode.removeChild(_msg[_msg.length - 1]);
               //  премахване на допълнителното оригинално копие

                for(let i = 0; i < _msg.length; i++){
                   _msg[i].classList.add('d-none');
                  //  скриване на всички елементи
                }

                let _btn = document.getElementsByClassName('page-link');
                for (let i = 0; i < _btn.length; i++) {
                   _btn[i].addEventListener('click', function(){
                        let _index = parseInt(this.innerText);
                        for(let i = 0; i < _msg.length; i++){
                            _msg[i].classList.add('d-none');
                            if( (_index - 1)*10 <= i && i < _index * 10){
                               // показване само на елементите, които са в диапазона между 0 и 9, 10 и 19, 20 и 29
                              //  според _index стойността
                                _msg[i].classList.remove('d-none');
                            }
                        }

                        // премахване на активното оцветяване на бутона/страница
                        let _active = document.getElementsByClassName('active');
                        _active[0].classList.remove('active');
                        // оцветяване на родителя на кликнатата страница
                        this.parentNode.classList.add('active');

                   });

                }

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