JSFiddle - React, Tailwind, and code Playground

by liquidmetalrob

HTML

<script>

function myFunction(event) {
var x = event.which || event.keyCode || event.charCode;
if(x >= 49 && x <= 50){
    var element  = document.getElementById('name');
    var fragment = document.createDocumentFragment();
    var img = document.createElement("img");
    img.src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6uw_6wpFz6VWeLQhsUtQlFw7m2H4YCUSK58JQ7aoGO9Vs8ZS1';
    fragment.appendChild(img);
    element.appendChild(fragment);
    };
};

function downFunction(event) {
var y = event.which || event.keyCode || event.charCode;
var element  = document.getElementById('name');
if( y == 8 && element.children.length > 0){
    element.removeChild(element.lastChild);
    };
};

</script>

    <div id="uploader">
    <div id="back" class="bg_img">Click and press 1 or 2</div>
        <div id="name"></div>
    </div>
    
    <input type="text" name="url" id="url" autocomplete="off"
    onkeypress="myFunction(event)" onkeydown="downFunction(event)">

CSS

#uploader {
  width: 480px;
  height: 250px;
  line-height: 250px;
  border: 2px dashed #443d66;
  cursor: pointer;
  color: #777;
  font-family: 'Arial';
  font-weight: bold;
  text-align: center;
}

JavaScript

$(document).ready(function() {

		$('#uploader').click(function(e){
        document.getElementById("url").focus();
        $('#back').hide();
    });

    $("#url").keypress(function(){
        $('#upload_url').show();
        $('#uploader').addClass('disabled_');
    });
    
    $('#url').focusout(function(e){
      var element  = document.getElementById('name');
      if (element.children.length == 0) {
        $('#back').show();
      }
    });
});