JSFiddle - React, Tailwind, and code Playground

by tylerbrownhenry

HTML

<!--

// get values of input field
// run function on input values
// output css into text area
// create template


 
/* http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html */

//<script type="text/javascript" src="js/shCore.js"></script>
//<script type="text/javascript" src="css/shBrushJScript.js"></script>
<!-- find css <script type="text/javascript" src=""></script> -->

<!--<link href="css/shCore.css" rel="stylesheet" type="text/css" />-->
<!--<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />-->



<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/css/shBrushCss.js" type="text/javascript"></script>



<div id="cssDisplayError" style="color:red;">
 </div>
<form id="target" action="#destination.html">
  <input type="text" value="Height" id="inputheight"/>
     <input type="text" value="Width" id="inputwidth" />
  <input id="sel" type="submit" value="Go" />
</form>
<div id="cssDisplay">
  Trigger the handler
</div>

JavaScript

/*SyntaxHighlighter.all();*/

    $("form").submit(function() {
        
         $("#cssDisplay").slideUp(250).text("");
        
            height = $('#inputheight').val();
            width = $('#inputwidth').val();
            console.log(height);
            console.log(width);
     /* if ($("input:first").val() == "correct") {
        $("div").text("Validated...").show();
        return true;
      }
      $("div").text("Not valid!").show().fadeOut(1000);
      return false; */
        
    if(parseInt(height) && parseInt(width)){
        //Makes sure that a number was put into both fields
        
        
           $("#cssDisplayError").html("<pre class='brush: css'>Your CSS and template are available below.</pre>").show().fadeIn(1000); 
           $("#cssDisplay").text("Congrats").delay(250).slideDown(1000); 
          // $("#outputCss").rotate(height,width); 
          // return false;
        
    } else {
        
           $("#cssDisplayError").html("<pre class='brush: css'>Please make sure both of your fields include a value numeric value.</pre>").show().fadeIn(1000); 
           
        
    };
        
    return false;    
});