JSFiddle - React, Tailwind, and code Playground

by gilly3

HTML

<form method="GET">
    <div>Put some values in the querystring so we can parse them</div>
    <div><label>Name: <input name="name" value="Fred Flintstone" /></label></div>
    <div><label>Location: <input name="location" value="Bedrock" /></label></div>
    <div><label>Likes: <textarea name="likes">Wilma
Pebbles
Barney
Bowling
Brontosaurus Steaks</textarea></label></div>
    <div><input type="Submit" value="submit" /></div>
</form>
<div id="result">
    <div><a id="showForm" href="#">Show form</a></div>
    <div>
        <b>Query string to parse:</b>
        <div id="qs"></div>
    </div>
    <div>
        <b>Parsed querystring:</b> <span>(as JSON)</span>
        <div id="parsedQS"></div>
    </div>
    <div>Look up a query string value</div>
    <div>
        <label for="nameLookup">Name: <span>(valid values are <i>name</i>, <i>location</i>, and <i>likes</i>)</span></label>
        <br />
        <input id="nameLookup" value="name" />
        <button id="parseButton">Read from location.querystring</button>
    </div>
    <div>
        <b>Value:</b>
        <div id="parsedValue"></div>
    </div>
</div>

CSS

body { font-family: sans-serif; font-size: 13px; }
form, #parsedQS { margin-bottom: 15px; }
#result { display: none; }
label, b { font-size: 12px; font-weight: bold; }
b + span { font-size: 12px; }
form label { display: inline-block; width: 210px; }
input { width: 200px; }
textarea { width: 200px; height: 120px; vertical-align: top; font-family: sans-serif; }
div { margin-bottom: 7px; }
#parsedValue, #parsedQS { white-space: pre-wrap; }
label span { font-weight: normal; margin-left: 3px; }
label i { background-color: #ddd; padding: 1px 2px; }

JavaScript

location.queryString = {};
location.search.substr(1).split("&").forEach(function (pair) {
    if (pair === "") return;
    var parts = pair.split("=");
    location.queryString[parts[0]] = parts[1] && decodeURIComponent(parts[1].replace(/\+/g, " "));
});

$(function () {
    if (location.search) {
        $("form").hide();
        $("#result").show();
        $("#showForm").click(function(e){
            $(this).remove();
            $("form").show();
            return false;
        });
        $("#qs").text(location.search);
        $("#parsedQS").text(JSON.stringify(location.queryString, null, 2));
        $("#parseButton").click(function(e){
            e.preventDefault();
            $("#parsedValue").text(location.queryString[$("#nameLookup").val()]+"");
        });
        $("#nameLookup").keypress(function(e){
            if (e.keyCode == 13) {
                e.preventDefault();
                $("#parseButton").click();
            }
        });
    }
});