JSFiddle - React, Tailwind, and code Playground

by wsgrah

HTML

<p>some text</p>

<div class="highlight"><pre><code class="ruby"><span class="n">test1</span> <span class="o">=</span> <span class="mi">600000000</span> 
<span class="c1"># there are 60 seconds and minute</span> 
<span class="n">in_minutes</span> <span class="o">=</span> <span class="n">test1</span> <span class="o">/</span> <span class="mi">60</span> 
<span class="c1"># there are 60 minutes in an hour</span> 
<span class="n">in_hours</span> <span class="o">=</span> <span class="n">in_minutes</span> <span class="o">/</span> <span class="mi">60</span> 
<span class="c1"># there are 24 hours in a day</span> 
<span class="n">in_days</span> <span class="o">=</span> <span class="n">in_hours</span> <span class="o">/</span> <span class="mi">24</span> 
<span class="c1"># there are about 365 days in a year</span> 
<span class="n">in_years</span> <span class="o">=</span> <span class="n">in_days</span> <span class="o">/</span> <span class="mi">365</span> 
 
<span class="nb">puts</span> <span class="n">in_years</span> 
</code></pre> 
</div> 

<hr/>

<p>A time traveller has suddenly appeared in your classroom!</p> 
 
<p>Create a variable representing the traveller's year of origin (e.g., year = 2000) and greet our strange visitor with a different message if he is from the distant past (before 1900), the present era (1900-2020) or from the far future (beyond 2020).</p> 

<div class="highlight"><pre><code class="ruby"><span class="n">year</span> <span class="o">=</span> <span class="mi">1899</span> 
<span class="c1"># if you want to get really fancy, you can grab today&#39;s date from Ruby</span> 
<span class="c1"># see http://www.ruby-doc.org/core/classes/Time.html#M000368</span> 
<span class="c1"># e.g. year = Time.now.year</span> 
 
 
<span class="k">if</span> <span class="n">year</span> <span class="o">&lt;=</span> <span class="mi">1900</span> 
  <span class="nb">puts</span> <span class="s2">&quot;Welcome from the distant past!&quot;</span> 
<span class="k">elsif</span> <span...

JavaScript

$(document).ready(function() {
   $('div.highlight').hide(); 
   $('hr').before($('<a class="show">Show Hint</a>'));
    $('.show').click(function() {
        
          $(this).prev('.highlight').slideToggle('slow'); 
    });

});