public/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<!DOCTYPE html>
<html lang='en-US'>
  <head>
    <meta charset='utf-8'/>
    <title>Alonzo's Mood</title>
    <link rel='stylesheet' type='text/css' href='face.css'/>
  </head>

  <body>
    <div id='text'>
      <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&pct;</code>, then enter <code>-1</code>.
      </p>

      <p id='controls'>
        <label for='rate'>Stock Price Change (Percent):</label><br/>
        <input
          type='number'
          id='rate'
          value='0'
          title='Enter the percent change in stock price for the day.'
        />

        <button
          class='set-rate'
          data-val='-10'
          title='Set change to minimum.'
        >
          Min
        </button>

        <button
          class='set-rate'
          data-val='0'
          title='Set change to zero.'
        >
          Clear
        </button>

        <button
          class='set-rate'
          data-val='10'
          title='Set change to maximum.'
        >
          Max
        </button>

        <button
          class='set-rate'
          data-val='current'
          title='Set to today&apos; price.'
        >
          Current
        </button>
      </p>
    </div>

    <div id='face'></div>

    <script type='text/javascript' src='jquery-3.4.1.min.js'></script>
    <script type='text/javascript' src='face.js'></script>
  </body>
</html>