JSFiddle - React, Tailwind, and code Playground
HTML
<div id="project-label" style="margin-left:430px; margin-top:60px; color:#F70;"><h1>Select a course name (type "C" for a start):</h1></div>
<div class="button-container">
<form action="search" method="post" >
<div>
<input id="project" name="project2" id="searchbox" placeholder="Cmpt 110"/>
<input type="hidden" id="project-id" />
<input id="instr" name="instr" id="searchbox" placeholder="Key Wang"/>
<input type="hidden" id="instr-id" />
<p id="project-description"></p>
<button type="submit" id="submit">Search</button>
</div>
</form>
CSS
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-image: url("sfu2.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-size:100%;
font-size: 13px;
line-height: 18px;
color: #333333;
background-color: #ffffff;
position:absolute;z-index:0;left:0;top:0;width:100%;height:100%
}
#searchbox
{
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
overflow: hidden; /* Clear floats */
}
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
.button-container form,
.button-container form div {
display: inline;
}
.button-container{
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 500px;
height: 35px;
padding: 10px;
margin: 100px auto 50px;
}
.button-container button {
display: inline;
vertical-align: middle;
}
#project{
float: left;
}
#project{
padding: 5px 9px;
height: 36px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
-moz-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255,...
JavaScript
function getQueryVariable(variable)
{
var full_url = document.URL; // Get current url
var url_array = full_url.split('/') // Split the string into an array with / as separator
var last_segment = url_array[url_array.length-1]; // Get the last part of the array (-1)
alert( last_segment );
}
$(function() {
var projects = [
{
value: "CMPT101",
label: "CMPT 101",
desc: "Discrete Mathematics I"
},
{
value: "CMPT110",
label: "CMPT 110",
desc: "Programming in Visual Basic"
},
{
value: "CMPT120",
label: "CMPT 120",
desc: "Intro.Cmpt.Sci/Programming I"
},
{
value: "CMPT125",
label: "CMPT 125",
desc: "Intro.Cmpt.Sci/Programming II"
},
{
value: "CMPT126",
label: "CMPT 126",
desc: "Intro.Cmpt.Sci and Programming"
},
{
value: "CMPT130",
label: "CMPT 130",
desc: "Intro to Computer Prog I"
},
{
value: "CMPT135",
label: "Zibra hsadhfjk ahjfk ahsjfkh j",
desc: "ntro to Computer Prog II"
},
{
value: "zibra",
label: "Zibra hsadhfjk ahjfk ahsjfkh j",
desc: "cmpt125"
},
{
value: "keywang",
label: "Keywang",
desc: "Discrete Mathematics I"
},
{
value: "zwang",
label: "zwang",
desc: "Programming in Visual Basic"
},
{
value: "bwang",
label: "C",
desc: "Intro.Cmpt.Sci/Programming I"
},
{
value: "Clpt",
label: "C",
desc: "Intro.Cmpt.Sci/Programming II"
},
{
value: "gg",
label: "gg",
desc: "Intro.Cmpt.Sci and Programming"
},
{
value: "zzz",
label: "zz",
desc: "Intro to Computer Prog...