JSFiddle - React, Tailwind, and code Playground

by Delusionallogic

HTML

<script src="http://stevenlevithan.com/demo/parseuri/js/assets/parseuri.js"></script>
<body>
    <div id="wrapper">
        <div id="input">
            <form action="html_form_action.asp" id="inputForm">
                <h2>Lectio Skema URL:</h2>
                <input type="text" class="text" />
                Uger frem:
                <select name="Uger frem" id="weeks">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
                <br />
                <input type="submit" value="Submit" class="button" />
            </form>
        </div>
        <div id="filler">&nbsp</div>
        <div class="output">
            <h2>Resultat:</h2>
            <div class="result"></div>
        </div>
    </div>
</body>

CSS

body{
    background-color: darkred;
background-image: 
    -webkit-gradient(linear, 100% 0%, 0% 100%, 
    from(transparent), 
    color-stop(0.15, transparent),  
    color-stop(0.15, rgba(255,0,0,0.75)), 
    color-stop(0.50, rgba(255,0,0,0.75)), 
    color-stop(0.50, transparent), 
    color-stop(0.65, transparent),
    color-stop(0.65, rgba(255,0,0,0.75)),  
    to(rgba(255,0,0,0.75)));
    ffbackground-color: blue;
-webkit-background-size: 3px 3px;
    padding: 10px 0px;
}


#wrapper{
    background-color: white;
    width: 820px;
    margin: auto;
    padding: 10px 0px;
    border: 2px solid black;
    
  -webkit-box-shadow: 1px 1px 4px 0px #141414;
          box-shadow: 1px 1px 4px 0px #141414;

    
  -webkit-border-radius: 12px;
          border-radius: 12px;

 
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;

}

form{
    padding: 0px 10px;
    align: center;
    background-color: lightgrey;
    text-align: center;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}

h2{
    font-family: "Verdana";
    font-size: 20px;
}

form .text{
    box-sizing: border-box;
    height: 24px;
    width: 100%;
    padding: 2px;
    margin: 2px 0px;
}

form .button{
    padding: 2px;
}

#filler{
    padding: 10px;
}

div .output{
    padding: 0px 10px;
    align: center;
    background-color: lightgrey;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    text-align: center;
}
@media (max-width:830px) {
    #wrapper{
        width: 99%;
    }
}

JavaScript

$('#inputForm').submit(function(e) {
    var host = "http://delusionallogic.dyndns.org:8080/ILectio/api/";

    var uri = $('form .text').val();
    var ject = parseUri(uri);

    var split = ject.directory.split('/');

    var weeks = $('#weeks option:selected').text();

    var retString;

    if (ject.file == "SkemaNy.aspx") {
        if (ject.queryKey.type == "elev") retString = host + "?elevid=" + ject.queryKey.elevid + "&type=" + ject.queryKey.type + "&skoleid=" + split[2] + "&weeks=" + weeks;
        else if (ject.queryKey.type == "laerer") retString = host + "?laererid=" + ject.queryKey.laererid + "&type=" + ject.queryKey.type + "&skoleid=" + split[2] + "&weeks=" + weeks;
    } else {
        retString = "URL'en blev ikke genkedt.";
    }

    $('.result').html("<b>" + retString + "</b>");

    e.preventDefault();
});