Choco Sample View

by Manuel Castro

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    
    <div class="col-sm-6">
      <div class="card mb-3" style="">
        <div class="card-header">
          <label for="infolink">Paste any link (u can use this a sample): 
            <a href="https://chocospace42.weebly.com/linktest.html" target="_blank" class="card-link">https://chocospace42.weebly.com/linktest.html</a>
          </label>
        </div>
        <div class="card-body ">
        <div class="mb-3">          
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">URL goes here</span>
            </div>
            <input type="text" class="form-control" id="infolink" placeholder="http://bla.bla.bla" required="">
            <div class="invalid-feedback " style="width: 100%;">
              A link is required.
            </div>
          </div>
        </div>
        <button class="btn btn-primary btn-lg btn-block" id="getinfoButton" type="submit">Get the info :)
        </button>
      </div>
    </div>
      <div class="card  mb-3" style="">
        <div class="card-header">
          <label for="infolink">Raw Info</label>
        </div>
        <div class="card-body ">
          <div class=""> 
            <div id="raw_info">
            </div>
          </div>
        </div>
      </div>      
  </div>

    
  <div class="col-sm-6">
  <div class="card" style="">
    <div class="card-header">
      <label for="infolink">Link Info</label>
                
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">The url was</span>
            </div>
            <input type="text"...

JavaScript

$('#getinfoButton').on('click', function(event) {
  event.preventDefault(); 
  //var empty = $("#infolink").value;
  var url =  $("#infolink").val();
    
  if(url === ""){
    console.log ("no link");
     $(".invalid-feedback").addClass('d-block');    
  //return;
  }
  else {
      console.log ("yeah a link");
      $(".invalid-feedback").removeClass('d-block');     
			$("#infolinkwas").val( url );
      $.get( url , function( data ) {
        console.log(data);
        $("#raw_info").html( data );
        //IMG
        //var firstlinkImage = data.getElementsByTagName("img")[0];
        //var linkimgsrc = firstlinkImage.src;
        //console.log(linkimgsrc);

        //TITLE H2    
        //var linkTitle = data.getElementsByTagName("h2")[0];
        //var linktitletext = linkTitle.val;
        //console.log(linktitletext);
      });
      }
  
});