JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

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

<br/>

<button name="data" data-emojis="✌👻🔥">
  Click me for data attribute emojis result ✌👻🔥
</button>

<br/>

<button name="variable">
  Click me for js variable value result 👻🔥✌
</button>

<br/>

<button name="json">
  Click me for json ajax response ✌🏼➕❤️
</button>

<br/>

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

CSS

BUTTON {
  display: block;
  text-align: center;
  width: 100%;
}

#result {
  padding: 1rem;
  border: 1px solid black;
  text-align: center;
  font-size: 4rem;
}

JavaScript

// div for button result
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://api.jsonbin.io/b/5fb3211d5be6ec73e94f6285',
    type: 'GET',
    dataType: 'json',

    // 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");

    },


  });


});