JSFiddle - React, Tailwind, and code Playground

by kanapkazpasztetem

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<body>
	<div class="example example-1">
		<p>Jak szybko mogą biegać kury?</p>
		<input class="example-1-input" type="text">
		<button type="button" class="example-1-btn">Submit</button>
		<p class="example-1-txt"></p>
	</div>

	<div class="example example-2">
		<button type="button" class="example-2-btn">Nested try-catch</button>
		<p class="example-2-txt"></p>
	</div>

	<div class="example example-3">
		<button type="button" class="example-3-btn">jQuery</button>
		<p class="example-3-txt"></p>
	</div>

	<div class="example example-5">
		<button type="button" class="example-5-btn">catch uncaught exceptions</button>
		<p class="example-5-txt"></p>
	</div>
</body>

SCSS

.example{
  border: solid 2px black;
  padding: 5px;
  margin: 5px 0;
}

JavaScript

$( document ).ready( function() {
	 // just screwing around ;)
   $( '.example' ).each( function(){ 
    var 
    	colorR = Math.floor( 128 + 2 * ( Math.random() * 64 ) ),
    	colorG = Math.floor( 128 + 2 * ( Math.random() * 64 ) ),
    	colorB = Math.floor( 128 + 2 * ( Math.random() * 64 ) );
    $( this ).css( "background-color", "rgb(" + colorR + "," + colorG + "," + colorB + ")" );
  });

  /**
    * Basic JS exception usage
    *
    */
  $( '.example-1-btn' ).click( function(){
  	var txtEl = '.example-1-txt';
    $( txtEl ).empty();
    var speed = $( '.example-1-input' ).val();
		//trying to execute some code
    try {
      if ( speed == "" ) {
      	throw "Nic nie wpisałeś !";
      }
      if ( isNaN( speed ) ) {
      	throw "Nie wpisałeś liczby!";
      }
      speed = Number( speed );
      if ( speed > 16 ) {
      	throw "Trochę za dużo, nie sądzisz? ...";
      }
      if ( speed < 14 ) {
      	throw "Troche więcej wiary w te małe dinozaury! :D";
      }
      throw "Tak, tyle mniej więcej potrafią wyciągnąć w krótkim sprincie. #funfact";
    }
		
		// if something went wrong then catch error
    catch( error ) {
			// and display it
      $( txtEl ).append( error );
    }
		
		// we can also run some code regardless if there was an exception thrown or not
    finally {
		
			//clear input
    	$( '.example-1-input' ).val('');
      
    }
  }); 

  /**
    * We can nest try-catch blocks
    *
    */
  $( '.example-2-btn' ).click( function(){
    $( '.example-2-txt' ).empty();
    try{
      try{
        throw new Error( "siemaneczko!" );
      }
      catch( inner_error ){
        //throw "wow!"; //uncomment this line and comment next one to change type of thrown exception
        throw new Error( "wow!" ); // this will throw Error object with given message instead of string that was thrown in line above
        $( '.example-2-txt' ).append( inner_error.message ); // this line and everything below in this scope wont be reached because an...