ip-project/index.html at master · elmsln/ip-project · 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
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta name="Description" content="Put your description here.">
  <base href="/">
  <style>
    html,
    body {
      margin: 0;
      padding: 50px;
      font-family: sans-serif;
    }
    course-dates {
      background-color: white;
    }
    course-dates[load-data] {
      background-color: orange;
      transition: 1s ease-in-out background-color;
    }
  </style>
  <title>Lab 4/5</title>
</head>

<body>
  <h1>Course dates example</h1>
  <label for="select">Results count:</label>
  <div id="select"></div>
  <button id="load">Load data</button>
  <button id="reset">Reset data</button>
  <course-dates id="dates1"></course-dates>
  <course-dates id="dates2" view="list"></course-dates>
  <script type="module">
    import "./src/CourseDates.js";
    //
    document.querySelector("#load").addEventListener("click", (e) => {
      document.querySelector("#dates1").loadData = true;
      document.querySelector("#dates2").loadData = true;

    });
    document.querySelector("#reset").addEventListener("click", (e) => {
      document.querySelector("#dates1").resetData();
      document.querySelector("#dates2").resetData();
    });
    document.querySelector("course-dates").addEventListener("results-changed", (e) => {
      console.log(e.detail);
      document.querySelector("#select").innerHTML = e.detail.value.length;
    });
  </script>
</body>

</html>