UFO_Battle-v1-/preferences.html at main · ignaciogomezoliva/UFO_Battle-v1- · 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
<!DOCTYPE html>
<html>
  <head>
    <title>UFO BATTLE</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.cdnfonts.com/css/picksuhl" rel="stylesheet">
  </head>
  <body>

    <div class="header">
      <h1>PREFERENCES</h1>
    </div>

    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a class="active" href="preferences.html">Preferences</a></li>
      <li><a href="records.html">Records</a></li>
    </ul>

    <div style="padding: 60px;">
      <label for="UFOs">How many UFOs do you want?</label>
      <br>
      <select id="number" name="numberOptions" form="UFOs">
        <option value="1">Just one</option>
        <option value="2">A couple would be nice</option>
        <option value="3">I want three!</option>
        <option value="4">Four or nothing...</option>
        <option value="5">I want to beat them all!</option>
      </select>
      <br>
      <br>
      <label for="UFOs" style="padding: 20px;">How much time (seconds) do you want?</label>
      <br>
      <select id="time" name="timeOptions" form="UFOs">
        <option value="60">60s is more then enough</option>
        <option value="120">I can do it in 120s</option>
        <option value="180">I need 180s...</option>
      </select>
      <br>
      <br>
      <form id="UFOs">
        <input id = "play" class = "button-33" type="button" value="Accept">
      </form>
    </div>

    <script type="text/JavaScript">
      window.onload = function (){
        document.getElementById("play").onclick = function () {
          const form = document.getElementById("UFOs");
          sessionStorage.setItem("number", form.elements["number"].value);
          sessionStorage.setItem("time", form.elements["time"].value);
          window.location.replace("play.html");
        }
      }
    </script>
  </body>
</html>