JSFiddle - React, Tailwind, and code Playground

by Emily Suvada

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css">
<div style="text-align:center"> 
<canvas id="myCanvas" width="300" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</div>

<form id="form" action="." method="post" name="form" onsubmit="return false">
<div class="row"><label for="field_text">Input text here:</label>
<textarea id="input_text" resize="none" maxlength = "58"></textarea></div>
<div class="row"> <input id="btn1" type="submit" value="Update Text"></div>
</form>

Image <p id="chosen-slide" ""/>
<div class="demo">
    <ul id="lightSlider">
  <li>
   <img src="http://emilysuvada.com/wp-content/uploads/2017/02/whiteDust300.jpg" />
  </li>
  <li>
      <img src="http://emilysuvada.com/wp-content/uploads/2017/02/redDust300.jpg" />
  </li>
  <li>
      <img src="http://emilysuvada.com/wp-content/uploads/2017/02/dimRedDust300.jpg" />
  </li>
</ul>
</div>

CSS

@import "https://fonts.googleapis.com/css?family=Share+Tech+Mono";

.demo {
    width:420px;
}

div {font-family: 'Share Tech Mono';}
html {font-size:20px; font-family:'Share Tech Mono';}

ul {
    list-style: none outside none;
    padding-left: 0;
    margin-bottom:0;
}
li {
    display: block;
    float: left;
    margin-right: 6px;
    cursor:pointer;
}
img {
    display: block;
    height: auto;
    max-width: 100%;
}

JavaScript

function writeimage(){
	var canvas = document.getElementById('myCanvas');

	canvas.toBlob(function(blob) {
  var newImg = document.createElement('img'),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
  alert("something");
});
}

function gtcaEncryption(inputText, selectedAction) {
    
    var output = '';
    
    switch(selectedAction.substr(0,4)) {
    case "text":
        output = EncodeAsGTCA(inputText);
        break;
    case "gtca":
        output = DecodeFromGTCA(inputText);
        break;
    }
    
    // This will be put into the output textarea by jQuery
    return(output);
}

function EncodeAsGTCA(inputText) {
    
    // Initialize output in case the input is empty.
    var output      = '';
    
    // Build a string of base pairs. When we convert to 
    // binary, a value of "0" will become either "A" or 
    // "T", and a value of "1" will become either "G" or 
    // "C". We use a random number below to choose which.
    var basePairs   = "TAGC";
    
    // Loop through each letter of the input text.
    for (i=0; i < inputText.length; i++) {
        
        // Pull out the current letter, then represent as 
        // a number with "charCodeAt". Google "ascii table"
        // for more info. Then take that number and represent 
        // as a binary string by using "toString(2)". 
    	var s = inputText[i].charCodeAt(0).toString(2);
        
        // Make sure the binary string has 8 digits. If not, 
        // left-pad with zeroes. 
        while(s.length<8){s='0'+s;}
        
        // Loop through each of the 8 digits in the binary 
        // string.
        for (j=0; j < 8; j++) {
            
            // Pull out the current digit (a 1 or 0)
            var l = +s[j]
            
            // Create a number that will be randomly either 
            //...