JSFiddle - React, Tailwind, and code Playground

by roadrash

HTML

<div>
    <h2>Poll</h2>
    <div id="area">
        <form action="" onsubmit="return false" id="frm" style="margin: 0">
            <p>What is your favourite colour?</p>
            <p>
                <input type="radio" name="colour" id="red" value="red" checked="checked" />
                <label for="red" class="red">Red</label>
            </p>
            <p>
                <input type="radio" name="colour" id="blue" value="blue" />
                <label for="blue" class="blue">Blue</label>
            </p>
            <p>
                <input type="radio" name="colour" id="green" value="green" />
                <label for="green" class="green">Green</label>
            </p>
            <p style="text-align: right; ">
                <input type="submit" value="Submit" onclick="doSubmit()" />
            </p>
        </form>
    </div>
</div>

CSS

body {
    margin: 0;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 11pt;
}
h2 {
    color: #cf8300;
}
.red {
    color: red; 
    font-weight: bold;
}
.blue {
    color: blue; 
    font-weight: bold;
}
.green {
    color: green; 
    font-weight: bold;
}

JavaScript

// form.htm from Highslide front page

function doSubmit() {
	var frm = document.getElementById("frm");
	var area = document.getElementById("area");

	var value = "";
	for (var i = 0; i < frm.colour.length; i++) {
		if (frm.colour[i].checked) {
			value = frm.colour[i].value;
			break;
		}
	}


    area.innerHTML = "Your favourite colour is <span style='font-weight: bold; text-transform: uppercase'>"
		+ value +"</span>"

	if (parent.window.hs) {
		var exp = parent.window.hs.getExpander("formexample");
		if (exp) {
            area.innerHTML += "<br/><br/><span style='font-style: italic; color: red;'>Closing soon...</span>";

			setTimeout(function() {
				exp.close();
			}, 3000);
		}
	}

	return false;
}