JSFiddle - React, Tailwind, and code Playground
HTML
<input name="project1" id="searchbox1" placeholder="Cmpt 1"/>
<input name="project2" id="searchbox2" placeholder="Cmpt 2"/>
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 I"
...