JSFiddle - React, Tailwind, and code Playground

by jazahn

HTML

<h2 class="h">variables</h2>
<ul class="h">
    <li>string:
        <div id="string">this is a string</div>
    </li>
    <li>number:
        <div id="number">100</div>
    </li>
    <li>undefined:
        <div id="undefined"></div>
    </li>
    <li>null:
        <div id="null"></div>
    </li>
    <li>objects...</li>
</ul>

<h2 class="">Input / Output</h2>
<ul class="">
    <li>Create an alert
        <button id="but1">ALERT</button>
    </li>
    <li>Create a prompt
        <button id="but2">PROMPT</button>
    </li>
    <li>Output to console.log</li>
    <li>Output to screen
        <div id="screen"></div>
    </li>
</ul>

<h2 class="hide">Math</h2>
<ul class="hide">
    <li>random<div id="random"></div></li>
    <li>floor<div id="floor"></div></li>
</ul>

<h2 class="hide">String</h2>
<ul class="hide">
    <li>split and join:
        <div id="split"></div>
    </li>
    <li>substring:
        <div id="substring"></div>
    </li>
    <li>slice:
        <div id="slice"></div>
    </li>
    <li>number 1:
        <div id="number1">123</div>
    </li>
    <li>number 2:
        <div id="number2"></div>
    </li>
</ul>

<div id="output"></div>

CSS

ul {
    border: solid black 1px;
}
li {
    border: solid black 1px;
    margin: 1em;
    padding: .2em;
}
li div {
    padding-left: 2em;
}
.hide, .h {
    display: none;
}

JavaScript

var button1 = document.getElementById('but1');
var scrn = document.getElementById('screen');

button1.onclick = function(){
      alert("ALERT"); 
}

document.getElementById('but2').onclick = function(){
    var num = parseInt(prompt("number 1")); 
    var num2 = parseInt(prompt("number 2")); 
    scrn.innerHTML = num + num2;
}

scrn.innerHTML = "something";