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/[email protected]/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);

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

              let mediaOrignal = document.querySelectorAll('.media')[0];
              tweets.forEach((item, index) => {
                  let tw = new Tweet(item.user.name, item.user.screen_name, item.user.profile_image_url, item.text);

                  let clone = mediaOrignal.cloneNode(true);
                  clone.style.display = index > 9 ? 'none' : '';
                  mediaOrignal.parentNode.appendChild(clone);

                  let img = clone.querySelectorAll('.img-thumbnail')[0];
                  img.src = tw.avatar;

                  let userHeading = clone.querySelectorAll('.media-heading')[0];
                  userHeading.innerText = `${index+1} // ${tw.name} @ ${tw.screenName}`;

                  let tweetText = clone.querySelectorAll('p')[0];
                  tweetText.innerText = tw.text;
                  // console.log(clone.parentNode);
              });
              mediaOrignal.remove();

              let btns = document.querySelectorAll('.page-link');
              btns.forEach(item => {
                item.addEventListener('click', (e) => {
                  let page = parseInt(e.target.innerText);
                  let media = document.querySelectorAll('.media');

                  // for (let i = 0; i < media.length; i++) {

                    // if(i >= (page-1)*10 && i <= page*10 - 1){
                    //   media[i].style.display = 'flex';
                    // } else {
                    //   media[i].style.display = 'none';
                    // }

                  //   media[i].style.display = (i >= (page-1)*10 && i <= page*10 - 1 ? 'flex' : 'none');
                  // }

                  for(let i = (page-1)*10; i <= page*10 - 1; i++){
                    media[i]?.style ? media[i].style.display = 'flex' : '';
                  }

                  let active = document.querySelectorAll('.page-item.active')[0];
                  let activePage = active.firstElementChild.innerText;

                  for(let i = (activePage-1)*10; i<= activePage*10 - 1;i++){
                    media[i]?.style ? media[i].style.display = 'none' : '';
                  }

                  e.target.parentNode.classList.add('active');
                  active.classList.remove('active');
                });
              });

              // let tw = new Tweet(tweets[0].user.name, tweets[0].user.screen_name, tweets[0].user.profile_image_url, tweets[0].text);
              // let img = document.querySelectorAll('.img-thumbnail')[0];
              // img.src = tw.avatar;
              // let userHeading = document.querySelectorAll('.media-heading')[0];
              // userHeading.innerText = `${tw.name} @ ${tw.screenName}`;
              // let tweetText = document.querySelectorAll('p')[0];
              // tweetText.innerText = tw.text;
           });

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