GBLwMa

gblwma.markdown

GBLwMa

A Pen by BKO on CodePen.

License.

index.html

<button id="trigger-button">toggle!</button>

<div id="viewer">
  <div id="value-field"></div>
</div>

script.babel

(function() {
  var displayArray = ['😆', '🤔', '😭'];
  var display = displayArray[0];
  var counter = 0;
  $('#value-field').text(display);
  
  $('#trigger-button').click(function() {
    counter += 1;
    display = displayArray[counter % displayArray.length];
    $('#value-field').text(display);
  });
})();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

#viewer {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 1px;
  text-align: center;
}

#value-field {
  padding: 10px 10px;
  font-size: 180px;
}