JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>

CSS

/* Just basic CSS to make the button prettier - nothing too fancy */
.btn {
  padding: 15px;
  background-color: #000;
  color: #fff;
}

JavaScript

// Creating a function to run when called 

function displayMessage() {
// This is to allow the function to work in the site's HTML
  var html = document.querySelector('html');
  
// This creates a "button" element within the "html" section
  var panel = document.createElement('button');
  
// This means that all the additional things we update will happen within the "panel" section
  html.appendChild(panel);
  
// This set's the button's class to "btn"
  panel.setAttribute('class', 'btn');
  
// This adds another attribute called "data-text-swap" to the button, and sets the text to "Schleifer"
  panel.setAttribute('data-text-swap', 'Schleifer')
  
// This sets the text inside the button to "Danielle"
  panel.textContent = "Danielle";  
}

//This runs the function above.
displayMessage();

// This provides the functionality to actually make the button work

// This selects everything within the document that has the ".btn" class
var button = document.querySelectorAll(".btn")[0];

// This provides the logic for anytime anyone "clicks" the button using a basic if/else statement.
button.addEventListener('click', function() {
  if (button.getAttribute("data-text-swap") == button.innerHTML) {
    button.innerHTML = button.getAttribute("data-text-original");
  } else {
    button.setAttribute("data-text-original", button.innerHTML);
    button.innerHTML = button.getAttribute("data-text-swap");
  }
}, false);