JSFiddle - React, Tailwind, and code Playground

by sffriend

HTML

<script src='http://underscorejs.org/underscore.js'></script>
<div class="container">
    <H1>Poetry</h1>
    <h3>Poetry REST API</h3>
    <div class="row">
        <div class="col-xs-10">
            <div class="panel panel-default">
                <div class="panel-heading"><strong>GET</strong> /api/v1/poem/:id</div>
                <div class="panel-body">Returns
                    <pre>
{
    id:     number // id of the poem
    author: string // name of the poet
    text:   array // array of strings, lines of poem.
}
</pre>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-xs-10">
            <div class="panel panel-default">
                <div class="panel-heading"><strong>POST</strong> /api/v1/poem</div>
                <div class="panel-body">
                    <p>POST arguments</p>
<pre>
{
    author: string // name of the poet
    poem:   array // array of strings, lines of poem.
}
</pre>
                    <p>Returns</p>
<pre>
{
    id: // number id of the new poem record
}
</pre>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container appreciation">
    <H2>Poetry Appreciation</H2>
    <div class="row">
        <div class="col-xs-1">&nbsp;</div>
        <div class="col-xs-10">
            <div class="appreciation">
                <h3>Poem Author</h3>
                <p class="poet">Insert Poet's name here</p>

                <h3>Poem Text</h3>
                <p class="poem" style="white-space: pre">Insert poem here</p>

                <h3>Most common word</h3>
                <p class="count">Insert most common word count here</p>
            </div>
        </div>
        <div class="col-xs-1">&nbsp;</div>
    </div>
</div>

<div class="container">
    <h2>New Poem</h2>
    <div class="row">
        <div class="col-xs-1">&nbsp;</div>
        <div class="col-xs-10">
            <form name="poem_input" class="form-horizontal">
      ...

JavaScript

// Sets up mock data
!function(){$.mockjax({url:"/api/v1/poem/1",responseText:{id:1,text:["To move, to breathe, to fly, to float,","To gain all while you give,","To roam the roads of lands remote,","To travel is to live."],author:"Hans Christian Anderson"}}),$.mockjax({url:"/api/v1/poem",method:"POST",status:500,responseText:"Duplicate value"})}();
$(".submit").on("click", function(){
    var id = $(".id").val();
    $.ajax({
      method: "GET",
    url: "/api/v1/poem/" + id,
         success: function(response){
        $(".poet").text(response.author);
      $(".poem").text("");
      for (var i=0; i < response.text.length; i++) {
          $(".poem").append("<p>" + response.text[i] + "</p>");
      }
    } 
  });