diff --git a/css/system-min.css b/css/system-min.css
new file mode 100644
index 0000000..5e1ff89
--- /dev/null
+++ b/css/system-min.css
@@ -0,0 +1 @@
+.clear{clear:both;float:none}body{background-color:lightgray;width:100%}body header div{margin:0 auto;width:80%}body header div p{text-align:left}body section form div#latitude_error{color:red;margin:0 auto;text-align:left;width:80%}body section form div#latitute_input{margin:10px auto;text-align:left;width:80%}body section form div#latitute_input div#latitute_input_label{float:left;text-align:right;width:80px}body section form div#latitute_input div#latitute_input_input{float:left;text-align:left;width:100px}body section form div#longitude_error{color:red;margin:0 auto;text-align:left;width:80%}body section form div#longitude_input{margin:10px auto;width:80%}body section form div#longitude_input div#longitude_input_label{float:left;text-align:right;width:80px}body section form div#longitude_input div#longitude_input_text{float:left;text-align:left;width:100px}body section form div#submit_button{padding:20px 0 20px 180px;width:80%}body section div#result_header{margin:0 auto;text-align:left;width:80%}body section div#results{background-color:aqua;margin:0 auto;text-align:left;width:80%}body footer p{margin:20px auto;text-align:left;width:80%}
\ No newline at end of file
diff --git a/css/system.css b/css/system.css
new file mode 100644
index 0000000..cfa9571
--- /dev/null
+++ b/css/system.css
@@ -0,0 +1,61 @@
+.clear {
+ clear: both;
+ float: none; }
+
+body {
+ background-color: lightgray;
+ width: 100%; }
+ body header div {
+ margin: 0 auto;
+ width: 80%; }
+ body header div p {
+ text-align: left; }
+ body section form div#latitude_error {
+ color: red;
+ margin: 0 auto;
+ text-align: left;
+ width: 80%; }
+ body section form div#latitute_input {
+ margin: 10px auto;
+ text-align: left;
+ width: 80%; }
+ body section form div#latitute_input div#latitute_input_label {
+ float: left;
+ text-align: right;
+ width: 80px; }
+ body section form div#latitute_input div#latitute_input_input {
+ float: left;
+ text-align: left;
+ width: 100px; }
+ body section form div#longitude_error {
+ color: red;
+ margin: 0 auto;
+ text-align: left;
+ width: 80%; }
+ body section form div#longitude_input {
+ margin: 10px auto;
+ width: 80%; }
+ body section form div#longitude_input div#longitude_input_label {
+ float: left;
+ text-align: right;
+ width: 80px; }
+ body section form div#longitude_input div#longitude_input_text {
+ float: left;
+ text-align: left;
+ width: 100px; }
+ body section form div#submit_button {
+ padding: 20px 0 20px 180px;
+ width: 80%; }
+ body section div#result_header {
+ margin: 0 auto;
+ text-align: left;
+ width: 80%; }
+ body section div#results {
+ background-color: aqua;
+ margin: 0 auto;
+ text-align: left;
+ width: 80%; }
+ body footer p {
+ margin: 20px auto;
+ text-align: left;
+ width: 80%; }
diff --git a/index.html b/index.html
deleted file mode 100644
index d3c8044..0000000
--- a/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
-
-
-
-
-
- Input Screen
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..f862f84
--- /dev/null
+++ b/index.php
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+ Input Screen
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/system.js b/js/system.js
new file mode 100644
index 0000000..f4ef07f
--- /dev/null
+++ b/js/system.js
@@ -0,0 +1,37 @@
+let value_error = false; // Flag if Lat/Lon values are out of range.
+let latitude_low = 38.0;
+let latitude_high = 40.0;
+let longitude_low = -96.0;
+let longitude_high = -94.0;
+
+function submitForm()
+{
+ // Clear values
+ value_error = false;
+ $("#latitude_error").html('');
+ $("#longitude_error").html('');
+ // Set Vars
+ let nLatitude = $("#latitude").val();
+ let nLongitude = $("#longitude").val();
+
+ if ((!$.isNumeric(nLatitude)) || (!inRange(nLatitude,latitude_low,latitude_high)))
+ {
+ $("#latitude_error").html('Please enter a value between ' + latitude_low + ' and ' + latitude_high);
+ value_error = true;
+ }
+
+ if ((!$.isNumeric(nLongitude)) || (!inRange(nLongitude,longitude_low,longitude_high)))
+ {
+ $("#longitude_error").html('Please enter a value between ' + longitude_low + ' and ' + longitude_high);
+ value_error = true;
+ }
+
+ // if Lat or Lon values are out of range return to form.
+ if (value_error) { return; }
+
+
+
+
+
+ alert('Submit Form');
+}
diff --git a/js/utils.js b/js/utils.js
new file mode 100644
index 0000000..f543a41
--- /dev/null
+++ b/js/utils.js
@@ -0,0 +1,23 @@
+/*
+* UTILS.JS - Basic functions for tasks
+* 2019-09-25
+* Rick Hays
+*
+*/
+
+
+/*
+* inRange - Tests to see if a Number is within a value range.
+* @ nVal - Number - Number to test
+* @ nLow - Lowest value in range
+* @ nHigh - Highest value in range
+*
+* @ return - True/False if value is in range.
+*/
+function inRange(nVal, nLow, nHigh)
+{
+ nVal = Number(nVal);
+ nLow = Number(nLow);
+ nHigh = Number(nHigh);
+ return (nVal >= nLow) && (nVal <= nHigh);
+}
diff --git a/scss/system.scss b/scss/system.scss
new file mode 100644
index 0000000..c9fd1a5
--- /dev/null
+++ b/scss/system.scss
@@ -0,0 +1,119 @@
+.clear
+{
+ clear: both;
+ float: none;
+}
+
+body
+{
+ background-color: lightgray;
+ width: 100%;
+
+ header
+ {
+ div
+ {
+ margin: 0 auto;
+ width: 80%;
+
+ p
+ {
+ text-align: left;
+ }
+ }
+ }
+
+ section
+ {
+ form
+ {
+ div#latitude_error
+ {
+ color: red;
+ margin: 0 auto;
+ text-align: left;
+ width: 80%;
+ }
+ div#latitute_input
+ {
+ margin: 10px auto;
+ text-align: left;
+ width: 80%;
+
+ div#latitute_input_label
+ {
+ float: left;
+ text-align: right;
+ width: 80px;
+ }
+
+ div#latitute_input_input
+ {
+ float: left;
+ text-align: left;
+ width: 100px;
+ }
+ }
+ div#longitude_error
+ {
+ color: red;
+ margin: 0 auto;
+ text-align: left;
+ width: 80%;
+ }
+ div#longitude_input
+ {
+ margin: 10px auto;
+ width: 80%;
+
+ div#longitude_input_label
+ {
+ float: left;
+ text-align: right;
+ width: 80px;
+ }
+
+ div#longitude_input_text
+ {
+ float: left;
+ text-align: left;
+ width: 100px;
+ }
+ }
+ div#submit_button
+ {
+ padding: 20px 0 20px 180px;
+ width: 80%;
+ }
+ }
+ }
+
+ section
+ {
+ div#result_header
+ {
+ margin: 0 auto;
+ text-align: left;
+ width: 80%;
+ }
+
+ div#results
+ {
+ background-color: aqua;
+ margin: 0 auto;
+ text-align: left;
+ width: 80%;
+ }
+ }
+
+ footer
+ {
+ p
+ {
+ margin: 20px auto;
+ text-align: left;
+ width: 80%;
+ }
+ }
+
+}
\ No newline at end of file