aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
authorPaul Duncan <pabs@pablotron.org>2020-03-06 21:01:40 -0500
committerPaul Duncan <pabs@pablotron.org>2020-03-06 21:01:40 -0500
commit2ac74dc3448e4c799351ed60241848e286239836 (patch)
tree5e4e12f373d0948ac75ed1131c1525ede565980b /public
parentc922baf33c15fed5877f49484f4c43911d81b0c3 (diff)
downloadalonzo-mood-calculator-2ac74dc3448e4c799351ed60241848e286239836.tar.bz2
alonzo-mood-calculator-2ac74dc3448e4c799351ed60241848e286239836.zip
ui cleanup
Diffstat (limited to 'public')
-rw-r--r--public/face.css10
-rw-r--r--public/face.js22
-rw-r--r--public/index.html60
3 files changed, 75 insertions, 17 deletions
diff --git a/public/face.css b/public/face.css
index d0e2913..8ef6e85 100644
--- a/public/face.css
+++ b/public/face.css
@@ -4,6 +4,10 @@ body {
font-family: arial, verdana, helvetica, sans-serif;
}
+#help-toggle {
+ color: #ddd;
+}
+
#text {
width: 50%;
margin: 20px auto 20px auto;
@@ -17,7 +21,7 @@ body {
width: 6em;
}
-#controls {
+.controls {
zoom: 200%;
}
@@ -26,3 +30,7 @@ body {
margin: 10px auto 10px auto;
zoom: 800%;
}
+
+.hidden {
+ display: none;
+}
diff --git a/public/face.js b/public/face.js
index cb10e0b..1e8e2ad 100644
--- a/public/face.js
+++ b/public/face.js
@@ -3,7 +3,11 @@ jQuery(function($) {
// default base price
var BASE_PRICE = 55.73;
+
+ // current price (fetched below from current.json)
var CURRENT = 0;
+
+ // path to JSON data
var DATA_URL = './current.json';
/**
@@ -218,6 +222,21 @@ jQuery(function($) {
return false;
});
+ // set base price
+ $('#base').text(BASE_PRICE);
+
+ $('#help-toggle').click(function() {
+ // toggle help visibility
+ $('#help').toggleClass('hidden');
+
+ // update text
+ var text = $('#help').hasClass('hidden') ? 'Show Help' : 'Hide Help';
+ $(this).text(text);
+
+ // stop event
+ return false;
+ });
+
// fetch current price as percent and populate #rate
$.ajax({
method: 'GET',
@@ -226,7 +245,10 @@ jQuery(function($) {
}).fail(function(r) {
alert("Couldn't fetch current data.");
}).done(function(r) {
+ // cache current price
CURRENT = to_percent(r.ask);
+
+ // update field
$('#rate').val(CURRENT);
});
});
diff --git a/public/index.html b/public/index.html
index 90bcd48..eefcf1b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,24 +11,60 @@
<h1>Alonzo Mood Calculator</h1>
<p>
- Enter the change in the change in the stock price for the day as
- a percentage in the field below. For example, if the stock
- price is down <code>1%</code>, then enter <code>-1</code>.
+ Calculate Alonzo's mood with pinpoint accuracy by leveraging the
+ latest synergy of advanced technology and cross-platform
+ initiatives.
</p>
- <p id='controls'>
- <label for='rate'>Stock Price Change (Percent):</label><br/>
+ <div id='help' class='hidden'>
+ <p>
+ Enter the percent change in the ORCL stock price relative to
+ $<span id='base'>55.73</span> as numeric value in the field
+ below.
+ </p>
+
+ <p>
+ For example, if the stock price is down <code>1%</code>, then
+ enter <code>-1</code> in the field.
+ </p>
+
+ <p>
+ The default value of the field is the current value according to
+ Yahoo Finance.
+ </p>
+ </div>
+
+ <p>
+ <a
+ id='help-toggle'
+ href='#'
+ title='Toggle help visibility.'
+ >Show Help</a>
+ </p>
+
+ <p class='controls'>
<input
type='number'
id='rate'
value='0'
+ min='-100'
+ step='10'
+ placeholder='enter percent'
title='Enter the percent change in stock price for the day.'
/>
<button
class='set-rate'
+ data-val='current'
+ title='Reset to current value.'
+ >
+ Reset
+ </button>
+
+ <button
+ class='set-rate'
data-val='-10000'
- title='Set change to minimum.'
+ title='Set to minimum.'
>
Min
</button>
@@ -36,7 +72,7 @@
<button
class='set-rate'
data-val='0'
- title='Set change to zero.'
+ title='Set to zero.'
>
Clear
</button>
@@ -44,18 +80,10 @@
<button
class='set-rate'
data-val='10000'
- title='Set change to maximum.'
+ title='Set to maximum.'
>
Max
</button>
-
- <button
- class='set-rate'
- data-val='current'
- title='Set to today&apos; price.'
- >
- Current
- </button>
</p>
</div>