ui cleanup

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>