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

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

Signed-off-by: Rick Hays <rhays@haysgang.com>
master
Rick Hays 6 years ago
parent
1178328186
commit
1c2488c808
7 changed files with 297 additions and 85 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      css/system-min.css
  2. 61
      css/system.css
  3. 85
      index.html
  4. 56
      index.php
  5. 37
      js/system.js
  6. 23
      js/utils.js
  7. 119
      scss/system.scss

1
css/system-min.css
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
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
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
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
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
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%;
}
}
}
Write Preview
Loading…
Cancel
Save