Untitled

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <style>
      body,html{
        height:100%;
      }
      body{
        min-height: 100%;
      }
      .body{
        min-height: 100%;
        height: auto !important;
        margin-bottom:-120px;
      }
      .pusher{
        height:72px;
      }
      .footer{
        height:72px;
        box-sizing: border-box;
      }
    </style>

    <script>
      document.addEventListener('DOMContentLoaded', () => {
        let animeArr = ['Bleach', 'Naruto', 'JoJo\'s Bizarre Adventure', 'Demon Slayer', 'My Hero Academia', 'One Piece'];
        let poster = document.querySelectorAll('.card-img-top');
        let animeItem = document.querySelector('.row-cols-xl-4 > .col');
        getAnimes(animeArr).then(x => {
            for(let i = 0; i < animeArr.length; i++){
              if(i != 0){
                let clone = animeItem.cloneNode(true);
                animeItem.parentNode.append(clone);
              }
              poster = document.querySelectorAll('.card-img-top');
              poster[i].nextElementSibling.firstElementChild.innerText = animeArr[i];
              poster[i].src = x[i].img.images.jpg.image_url;
              poster[i].nextElementSibling.firstElementChild.nextElementSibling.innerText = x[i].quote;
            }
        });

      });

      // const delay = (ms = 1100) => new Promise(r => setTimeout(r, ms));

      const getAnimes = async items => {
        let results = [];
        for (let index = 0; index < items.length; index++) {
          // await delay();
          const res1 = await fetch('https://api.jikan.moe/v4/anime?q='+ items[index] +'&sfw').then(r => r.json());
          const res2 = await fetch("https://kitsu.io/api/edge/anime?filter[text]=" + items[index]).then(r => r.json());
          results.push({img: res1.data[0], quote: res2.data[0].attributes.synopsis});
        }
        return results;
      };

    </script>
  </head>
  <body>
    <div class="body">
    <div class="bg-light">
      <div class="container">
        <div class="row justify-content-between justify-content-lg-start align-items-center">
          <div class="col-auto">
            <h5 class="text-primary mb-0 fw-bold">JSON Example</h5>
          </div>
          <div class="col">
            <div class="navbar navbar-expand-lg text-end text-lg-start justify-content-end">
              <button class="navbar-toggler" data-bs-target="#menu" data-bs-toggle="collapse">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-lg-between" id="menu">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a href="" class="nav-link text-primary">Anime</a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link text-primary">Anime</a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link text-primary">Anime</a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link text-primary">Anime</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-info py-5">
        <div class="container my-3">
          <div class="row">
            <div class="col text-center">
              <h1 class="fw-bold">Anime List</h1>
              <span>JSON Fetch Example</span>
            </div>
          </div>
        </div>
    </div>

    <div class="container mt-4">
      <div class="row justify-content-lg-center">
        <div class="col-12 col-lg-5 mx-3">
          <input type="text" class="form-control" placeholder="Look for Anime by title">
        </div>
        <div class="col-12 col-lg-5 mx-3">
          <select name="" id="" class="form-select">
            <option value="">Select Anime</option>
          </select>
        </div>
      </div>
      <div class="mt-4 row row-cols-xl-4 row-cols-md-3 row-cols-2 justify-content-center gy-5">
        <div class="col">
          <div class="card border-info">
            <img src="https://placehold.co/450x300" alt="" class="card-img-top">
            <div class="card-body text-center">
                <h5 class="mb-1">Anime Title</h5>
                <div class="mb-4">
                  Quote
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pusher"></div>
 </div>
    <div class="bg-dark text-white text-center p-4 mt-5 footer">
      Copyright &copy; Your Website 2024
    </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>