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[0]);
                class Tweet {
                    constructor(username, name, avatar, tweet){
                        this.username = username;
                        this.name = name;
                        this.avatar = avatar;
                        this.tweet = tweet;
                    }
                }
                let tw = [];
                tweets.forEach(item => {
                    let t = new Tweet(
                                        item.user.screen_name,
                                        item.user.name,
                                        item.user.profile_image_url,
                                        item.text);
                    tw.push(t);
                });

                let media = document.querySelectorAll('.media');
                let parent = media[0].parentNode;
                tw.forEach((item,index) => {
                    let clone = media[0].cloneNode(true);
                    parent.append(clone);
                    let img = clone.querySelector('.img-thumbnail');
                    let names = clone.querySelector('.media-heading');
                    let tweetText = clone.querySelector('p');
                    img.src = item.avatar;
                    index++;
                    names.innerText = `${index} . ${item.name} @ ${item.username}`;
                    tweetText.innerText = item.tweet;
                });
                media[0].remove();

                let items = document.querySelectorAll('.media');
                for(let i = 0; i < items.length; i++){
                    if(i > 9) {
                        items[i].style.display = 'none';
                    }
                }

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

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