rhays/rx_api_call
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Moved Javascript, added SCSS and CSS files for a basic look.

Browse Source 
Signed-off-by: Rick Hays <rhays@haysgang.com>
This commit is contained in:
Rick Hays
2019-09-25 16:31:54 -05:00
parent 1178328186
commit 1c2488c808
7 changed files with 297 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
css/system-min.css vendored Normal file
View File

@@ -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%}

61
css/system.css Normal file
View File

@@ -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%; }

85
index.html
View File

@@ -1,85 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Input Screen</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
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 inRange(nVal, nLow, nHigh)
{
nVal = Number(nVal);
nLow = Number(nLow);
nHigh = Number(nHigh);
return (nVal >= nLow) && (nVal <= nHigh);
}
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');
}
</script>
</head>
<body>
<header>
<div>
<p>Please enter a Latitude and Longitude</p>
</div>
</header>
<section>
<form action="" method="get">
<div id="latitude_error"></div>
<div>
<label for="latitude">Latitude:</label>
<input type="text" name="latitude" id="latitude" />
</div>
<div id="longitude_error"></div>
<div>
<label for="longitude">Longitude:</label>
<input type="text" name="longitude" id="longitude" />
</div>
<div>
<input type="button" onClick="submitForm()" value=" Save ">
</div>
</form>
</section>
<section>
<div>Results:</div>
<div id="results"></div>
</section>
<footer>
<p>Copyright 2019 - Rick Hays, All rights reserved.</p>
</footer>
</body>
</html>

56
index.php Normal file
View File

@@ -0,0 +1,56 @@
<?php
opcache_reset();
// apc_clear_cache();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Input Screen</title>
<link rel="stylesheet" href="css/system.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/utils.js"></script>
<script src="js/system.js"></script>
</head>
<body>
<header>
<div>
<p>Please enter a Latitude and Longitude</p>
</div>
</header>
<section>
<form action="" method="get">
<div id="latitude_error"></div>
<div id="latitute_input">
<div id="latitute_input_label">
<label for="latitude">Latitude:&nbsp;</label>
</div>
<div id="latitute_input_text">
<input type="text" name="latitude" id="latitude" />
</div>
</div>
<div id="longitude_error"></div>
<div id="longitude_input">
<div id="longitude_input_label">
<label for="longitude">Longitude:&nbsp;</label>
</div>
<div id="longitude_input_text">
<input type="text" name="longitude" id="longitude" />
</div>
</div>
<div id="submit_button" class="clear">
<input type="button" onClick="submitForm()" value=" Save ">
</div>
</form>
</section>
<section>
<div id="result_header">Results:</div>
<div id="results"></div>
</section>
<footer>
<p>Copyright 2019 - Rick Hays, All rights reserved.</p>
</footer>
</body>
</html>

37
js/system.js Normal file
View File

@@ -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');
}

23
js/utils.js Normal file
View File

@@ -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);
}

119
scss/system.scss Normal file
View File

@@ -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%;
}
}
}