From 1c2488c808089354bad5c5a8902db40968f8da87 Mon Sep 17 00:00:00 2001 From: Rick Hays Date: Wed, 25 Sep 2019 16:31:54 -0500 Subject: [PATCH] Moved Javascript, added SCSS and CSS files for a basic look. Signed-off-by: Rick Hays --- css/system-min.css | 1 + css/system.css | 61 +++++++++++++++++++++++ index.html | 85 -------------------------------- index.php | 56 +++++++++++++++++++++ js/system.js | 37 ++++++++++++++ js/utils.js | 23 +++++++++ scss/system.scss | 119 +++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 297 insertions(+), 85 deletions(-) create mode 100644 css/system-min.css create mode 100644 css/system.css delete mode 100644 index.html create mode 100644 index.php create mode 100644 js/system.js create mode 100644 js/utils.js create mode 100644 scss/system.scss 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 - - - - -
-
-

Please enter a Latitude and Longitude

-
-
-
-
-
-
- - -
-
-
- - -
-
- -
-
-
-
-
Results:
-
-
-
-

Copyright 2019 - Rick Hays, All rights reserved.

-
- - \ 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 + + + + + + +
+
+

Please enter a Latitude and Longitude

+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
Results:
+
+
+ + + \ 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