JSFiddle - React, Tailwind, and code Playground

by Luke Arrington

HTML

<div id="myDIV">
<a title="By DemonDeLuxe (Dominique Toussaint) (Image:Newtons cradle animation book.gif) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File%3ANewtons_cradle_animation_book_2.gif"><img width="8%" alt="Newtons cradle animation book 2" src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Newtons_cradle_animation_book_2.gif"/></a>
<button onclick="myFunctionHide()">Stop it Newton!</button>
</div>

<script>
function myFunctionHide() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

<h2>Convert <em>NW</em> or <em>NF</em> links into STG links:</h2>

<div id="demo">
<p contenteditable="true" style="border:1px solid; width: 60%">
  COPY and PASTE list into this field.
</p>
</div>

<button onclick="myFunction()">NF</button>

<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var res = str.replace(/com/g, "nwie.net");
    document.getElementById("demo").innerHTML = res;
    var str1 = document.getElementById("demo").innerHTML;
    var res1 = str1.replace(/nationwide/g, "stg-nationwide");
    document.getElementById("demo").innerHTML = res1;
}
</script>

<button onclick="myFunction1()">NW</button>

<script>
function myFunction1() {
    var str1 = document.getElementById("demo").innerHTML; 
    var res1 = str1.replace(/com/g, "nwie.net");
    document.getElementById("demo").innerHTML = res1;
    var str2 = document.getElementById("demo").innerHTML;
    var res2 = str2.replace(/nationwide/g, "staging.nationwide");
    document.getElementById("demo").innerHTML = res2;
}
</script>
<button onclick="myFunction3()">Clear</button>
<script>
function myFunction3() {
    location.reload();
}
</script>