dsa-intro/script.js at main · petlatkea/dsa-intro · 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
"use strict";

window.addEventListener("DOMContentLoaded", start);

function start() {
  console.log("JavaScript kører");
  hideAll();
  askAboutName();
}

function hideAll() {
  document.querySelector("#ask-name").classList.add("hide");
  document.querySelector("#ask-age").classList.add("hide");
  document.querySelector("#ask-birthyear").classList.add("hide");
  document.querySelector("#success").classList.add("hide");
  document.querySelector("#failure").classList.add("hide");
}

function fillInFields(fieldname, value) {
  document.querySelectorAll(`[data-field=${fieldname}]`).forEach(element => (element.textContent = value));
}

function askAboutName() {
  const form = document.querySelector("#ask-name");
  form.addEventListener("submit", answeredName);
  form.classList.remove("hide");
}

function answeredName(event) {
  event.preventDefault();

  const form = event.target;
  form.removeEventListener("submit", answeredName);
  form.querySelector("button").disabled = true;

  const firstname = form.firstname.value;
  console.log("Answered name: " + firstname);

  fillInFields("firstname", firstname);

  askAboutAge();
}

function askAboutAge() {
  const form = document.querySelector("#ask-age");
  form.addEventListener("submit", answeredAge);
  form.classList.remove("hide");
}

function answeredAge(event) {
  event.preventDefault();

  const form = event.target;
  form.removeEventListener("submit", answeredAge);
  form.querySelector("button").disabled = true;

  const age = form.age.valueAsNumber;
  console.log("Answered age: " + age);

  fillInFields("age", age);

  askAboutBirthYear(age);
}

function askAboutBirthYear(age) {
  // calculate birthyear - expect that the person HASN'T had their birthday yet this year
  const birthyear = 2024 - 1 - age;

  fillInFields("birthyear", birthyear);

  const form = document.querySelector("#ask-birthyear");
  form.addEventListener("submit", answeredBirthyear);
  form.classList.remove("hide");
}

function answeredBirthyear(event) {
  event.preventDefault();

  const form = event.target;
  form.removeEventListener("submit", answeredBirthyear);
  form.querySelector("button").disabled = true;

  const correct = form.correct.value;
  console.log("Answered correct: " + correct);

  if (correct === "yes") {
    showSuccess();
  } else {
    showFailure();
  }
}

function showSuccess() {
  document.querySelector("#success").classList.remove("hide");
}

function showFailure() {
  document.querySelector("#failure").classList.remove("hide");
}