a2-shortstack/test.html at main · zsarrett/a2-shortstack · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CS4241 Assignment 2</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <form action="">
      <input type="text" id="yourname" placeholder="your name here" />
      <input
        type="num"
        id="yourgradyear"
        placeholder="your graduation year here"
      />
      <select name="foodoptions" id="food">
        <option value="DAKA">DAKA</option>
        <option value="CC">CC</option>
        <option value="Joy Empanadas">Joy Empanadas</option>
        <option value="Goat's head">Goat's Head</option>
        <option value="Dunks">Dunkin Donuts</option>
        <option value="Starbucks">Starbucks</option>
        <option value="South Village">South Village</option>
      </select>
      <button>submit</button>
    </form>
    <table id="resulttable">
      <tr>
        <th>Name</th>
        <th>Graduation Year</th>
        <th>Food Choice</th>
        <th>Class</th>
      </tr>
    </table>
    <table id="actualResultTable"></table>
  </body>
  <script>

    const submit = function (e) {
      // prevent default form action from being carried out
      e.preventDefault();

      let name = document.querySelector("#yourname");
      let yourgradyear = document.querySelector("#yourgradyear");
      let food = document.querySelector("#food");

      if (yourgradyear.value >= 2023 & yourgradyear.value <= 2026) {

      } else {
        alert("Not a valid graduation year!")
        return;
      }


      let json = {
        name: yourname.value,
        yourgradyear: yourgradyear.value,
        food: food.value,
        class: ""
      };

      let body = JSON.stringify(json);

      fetch('/submit', {
        method: 'POST',
        body,
      }).then(async function (response) {
        // do something with the reponse
        let newTableInfo = await response.json();
        updateTable(newTableInfo);

        console.log(response);
      });

      return false;
    };

    function updateTable(newTableInfo) {
      const table = document.getElementById("actualResultTable");
      table.innerHTML = "";

      newTableInfo.forEach((element, index) => {
        table.innerHTML +=
          "<tr><td>" +
          element.name +
          "</td><td>" +
          element.yourgradyear +
          "</td><td>" +
          element.food +
          "</td><td>" +
          element.class +
          "</td></tr>"
      });
    }

    window.onload = function () {
      const button = document.querySelector("button");
      button.onclick = submit;
    };
  </script>
</html>