JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="row">
  <div class="col">

    <button name="html">
      Click for html result <span>🔥✌👻</span> 
    </button>

    <button name="data" data-emojis="✌👻🔥">
      Click for data-emoji result ✌👻🔥
    </button>
    
    <button name="variable">
      Click js var value result 👻🔥✌
    </button>

    <button name="json">
      Click json ajax response ✌🏼➕❤️
    </button>
    
    <form>
      <input type="text" name="value" value="😉💦💦" />
      <button>
        Submit form input above 😉💦💦
      </button>
    </form>  

  </div>
  <div class="col">
  
    <div id="result"></div>
    
  </div>
</div>

CSS

BUTTON {
  display: block;
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
}

FORM {
  display: block;
  overflow: hidden;
}

INPUT {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  width: 100%;
  min-height: 28px;
}

#result {
  padding: 1rem;
  border: 1px solid black;
  text-align: center;
  font-size: 4rem;
  border-radius: 3px;
  position: fixed;
  width: calc(50% - 30px);
}

.row {
  margin-left: -10px;
  margin-right: -10px;
}

.col {
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}

BODY {
  margin: 0;
  padding: 20px;
  height: 1000px;
}

*, ::after, ::before {
    box-sizing: border-box;
}

JavaScript

// constant result div for button on click results
const $result = $('#result');

// button name html on click function
$(document).on('click', '[name="html"]', function() {

  // get emojis html from button child span
  let result = $(this).find('SPAN').html();

  // log result
  console.log(result);

  // render result html
  $result.html(result);

});

// button name data on click function
$(document).on('click', '[name="data"]', function() {

  // get emojis from button data attribute emojis
  let result = $(this).data('emojis');

  // log result
  console.log(result);

  // render result html
  $result.html(result);

});

// button name variable on click function
$(document).on('click', '[name="variable"]', function() {

  // js variable with emojis
  let result = '👻🔥✌';

  // log result
  console.log(result);

  // render result html
  $result.html(result);

});

// button name json on click function
$(document).on('click', '[name="json"]', function() {

  // jquery ajax call
  $.ajax({

    // get json file with emojis 
    url: 'https://gist.githubusercontent.com/joshmoto/bb7673e1beb9a004bed5102f234e227b/raw/c0d2335d31fc4ec7827e5768b8fd9893e3401847/ajax-modal.html',
    type: 'GET',

    // on success response function
    success: function(response) {

      // json response with emojis
      let result = response[0].emojis;

      // log result
      console.log(result);

      // render result html
      $result.html(result);


    },

    // on fail response function
    error: function() {

      // console err
      console.log("json emoji error");

    },


  });


});

// form test on submit function
$(document).on('submit', 'FORM', function(e) {

  // prevent form submit default
  e.preventDefault();

  // this form input with name value
  let result = $('[name="value"]',this).val();

  // log result
  console.log(result);

  // render result html
  $result.html(result);

});