JSFiddle - React, Tailwind, and code Playground

by rubioli

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<button class="click">Click Me</button>
<br>
<p class="extract" style="display:none;">Extrating html</p>
<input type="text" class="title">
<br>
<textarea name="" id="" cols="30" rows="5" class="description"></textarea>
<br>
<input type="text" class="image">

CSS

input {
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
}

.none{display:none;}

JavaScript

$(function () {
      var query;
      var apiUrl;
      $("button.click").click(function () {
          //query = 'select * from htmlstring where url="' + $(this).val() + '" and xpath="//a"&format=json&env=store://datatables.org/alltableswithkeys&callback=';
          apiUrl = "https://query.yahooapis.com/v1/public/yql?q=select * from htmlstring where url='http://stackoverflow.com/'&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback=";
          $('p.extract').toggle();
          $.get(apiUrl, function(data) {
          	$('p.extract').addClass('none');
            var html = $(data).find('html');
            $("input.title" ).val(html.find("meta[property='og:title']").attr('content') || 'no title found');
           	 $("textarea.description").val(html.find("meta[property='og:description']").attr('content') || 'no title found');
            $("input.image").val(html.find("meta[property='og:image']").attr('content') || '');

      });

  });
    });