decision-maker/index.html at main · DaveEveritt/decision-maker · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <title>Decision-maker</title>
	<link rel="stylesheet" href="styles.css">
  <!-- FAVICON links -->
  <link rel="icon" type="image/png" href="./favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/svg+xml" href="./favicon.svg">
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
  <link rel="manifest" href="./site.webmanifest">
  <!-- OGP data -->
  <meta property="og:title" content="Decision-maker!">
  <meta property="og:type" content="webapp">
  <meta property="og:url" content="http://daveeveritt.github.io/decision-maker/">
  <meta property="og:image" content="http://daveeveritt.github.io/decision-maker/decision-maker-1200x630.png">
  <!-- OGP optional data -->
  <meta property="og:image:alt" content="Example of the decision-maker in use for buying an electric vehicle">
  <meta property="og:description" content="A minimal aid to making decisions, based on two sets of choices, each with adjustable sliders for priority, and a final result"><!-- 155-160 chars -->
  <meta property="og:locale" content="en_UK">
</head>

<body>

<h1 id="question">Decision-maker</h1>

<form action="#" method="#" id="reasons" class="reasons">
  <fieldset class="reason-header">
  <legend>PROS</legend>
    <label for="for"></label>
    <input id="for" type="text" maxlength="110" enterkeyhint="done" placeholder="Pros: add reason">
  </fieldset>

  <fieldset class="reason-header">
  <legend>CONS</legend>
    <label for="not"></label>
    <input id="not" type="text" maxlength="110" enterkeyhint="done" placeholder="Cons: add reason">
  </fieldset>
</form>

<p class="instruction">Rate each Pro and Con…</p>

<form action="#" method="#" id="choices" class="choices">
  <fieldset id="forReasons">
    <legend>Average pros: <span id="choiceY"></span>%</legend>
  </fieldset>

  <fieldset id="notReasons">
    <legend>Average cons: <span id="choiceN"></span>%</legend>
  </fieldset>
</form>

<h2 id="decision" aria-live="polite"></h2>

<script src="javascript/javascript.js"></script>

</body>
</html>