JSFiddle - React, Tailwind, and code Playground

by ramyaaviji

HTML

<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab1</a></li>
    <li><a href="#tabs-2">Tab2</a></li>
  </ul>
  <div id="tabs-1">
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
   <button id="json-load">Populate Age</button>
  </div>
  <div id="tabs-2">
    <div id="progressbar"></div>
      <button id="prog-load">Show Progress</button>   
      
  </div> 
    </div>
 
 
</body>
</html>

JavaScript

$(function() {
    $( "#tabs" ).tabs();
  });

$(function() {
    $( document ).tooltip();
  });



$(function () {
    
     var i = 0;
    var fib = (function () {
        var cache = [0, 1];
        return function (n) {
            if (cache[n] === undefined) {
                cache[n] = fib(n - 1) + fib(n - 2);
            }
            return cache[n];
        };
    })();

    $('#json-load').click(function () {

        $.ajax({
            url: '/echo/json/',
            dataType: 'json',
            type: 'POST',
            data: {
                json: JSON.stringify({
                    n: fib(++i)
                })
            }
        }).done(function (data) {

            $('#age').val(' ' + data.n);

        });

    });
    
     $('#prog-load').click(function () {

        $.ajax({
            url: '/echo/json/',
            dataType: 'json',
            type: 'POST',
            data: {
                json: JSON.stringify({
                    n: fib(++i)
                })
            }
        }).done(function (data) {

            $('#progressbar').progressbar({value: data.n});

        });

  });

 });