index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
         
                <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
    body {
    box-sizing:border-box;
    background-color:#eca5ff;  
    overflow:hidden;
    border:20x dolid #fff;
}
header{
    text-align:center;
    margin-top:50px;
    margin-bottom:10px;
    font-size 60px; 
}

.p{
    font-weight:bold;
    color:green;
    font-size:25px;
}

.p span
{
    text-decoration:underline;
    color:red;
    font-size:18px;
}

.div{
    background-color:#ddd;
    margin:auto 15px ;
    overflow:hidden;
    direction:rtl;
    width:80%
} 

.div div{
    display:flex;
    align-items:center;
}

.div a
{
    text-decoration:none;
}

.div h3{
    color:brown;
    font-size:22px;
}

.div img{
    margin:0 7px;
    border-radius:50%;
    width:60px;
    height:60px;
}

.div span{
    font-size:14px;
    margin-top:-5px;
    margin-right:7px
}


#spinner{
  visibility:hidden;
  width: 30px;
  height: 30px;

  border: 2px solid #f3f3f3;
  border-top:3px solid green;
  border-radius: 100%;

  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right: 0;
  margin: auto;

  animation: spin .5s infinite linear;
}

@keyframes spin {
  from {
      transform: rotate(0deg);
  } to {
      transform: rotate(360deg);
  }
}

#spinner.show{
    visibility:visible;
}
</style>
    </head>
    <body>
     <div id="spinner"></div>
    <header>
    <h1>YouTube Comment App</h1>
    <p class="p">Type Youtube Link id ,Like This one:<br> https://youtube/<span>fpDsw4vBzAg</span></p>
        <form id="form">
            <input type="text" id="videoId" placeholder="type youtube video id here" style="color:green">
            <button type="submit" onclick="api();showSpinner()" style="font-weight:bold">Display Comments</button>
        </form>
        </header>
        <div id="show"></div>
       
        
        <script>
        
         // show and hide spinner
                const spinner = document.getElementById("spinner");
    
    function showSpinner() {
  spinner.classList.add("show");
}

function hideSpinner(){
    spinner.classList.remove("show");
}
            function api(){
            
                $("form").submit(function(event){
                event.preventDefault()
            
                })
                videoId = $("#videoId").val()
                console.log(videoId)
                
                apiKey = "AIzaSyBJ82gJco3jhHuXhZrqA48ZlHFMbcFtq9g";
                url = "https://www.googleapis.com/youtube/v3/commentThreads?part=snippet&key="+apiKey+"&videoId="+videoId+"&maxResults=100";
                
                
               async function gett(){
              response = await fetch(url);
              data = await response.json();
              
              show = document.getElementById("show");
              
             
              for (i=0;i<data.items.length;i++){
              show.innerHTML+=
              
              `
              <div class="div">
              <div>
              <img src="${data.items[i].snippet.topLevelComment.snippet.authorProfileImageUrl}">
              
              <a href="${data.items[i].snippet.topLevelComment.snippet.authorChannelUrl}"><h1>${data.items[i].snippet.topLevelComment.snippet.authorDisplayName}</h1></a>
              
              
                  </div>
              
              <span>${data.items[i].snippet.topLevelComment.snippet.textDisplay}</span>
              </div>
              `
           ;   
              }
              hideSpinner()
              }
              
              
              gett()
              
            }
            
            
        </script>
    
    </body>
</html>