JSFiddle - React, Tailwind, and code Playground

by iMaverick

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>hello world</title>

    <meta name="description" content="">
</head>
<body>
    <div id="main">
        <p>text</p>
        <a href="#">link</a>
        <button>button</button>
        <form>
            <fieldset>
                <legend>Legend</legend>
                    <label for="radio1">Option 1</label>
                        <input type="radio" name="radio-buttons" value="option-1" id="radio1"/>
                    <label for="radio2">Option 2</label>
                        <input type="radio" name="radio-buttons" value="option-2" id="radio2"/>
                    <label for="radio3">Option 3</label>
                        <input type="radio" name="radio-buttons" value="option-3" id="radio3"/>
                        <p id="warn">No, pick another one.</p>
            </fieldset>
        </form>
    </div>

</body>
</html>

JavaScript

// variables
var p        = document.getElementsByTagName("p");
var a        = document.getElementsByTagName("a");
var button   = document.getElementsByTagName("button")[0];
var fieldset = document.getElementsByTagName("fieldset");

var radio1   = document.getElementById("radio1");
var radio2   = document.getElementById("radio2");
var radio3   = document.getElementById("radio3");

var warn     = document.getElementById("warn");

// functions
function prepareEventHandlers() {

    button.setAttribute('onclick', function() {
        alert("Hello world!")
    });

    radio3.onfocus = function() {
        warn.setAttribute("display","inherit")
    }
}

// window onload
window.onload = function() {
            alert('loaded');
    prepareEventHandlers();
}