7GUIs/flight_booker.html at main · marshallworks/7GUIs · 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>
<style>
input:invalid {
  background-color: #f00;
}
</style>
<select id="one-two-way" oninput="updateState()">
  <option value="one-way">one-way flight</option>
  <option value="return">return flight</option>
</select><br>
<input id="startInput" type="date" oninput="updateState()" /><br>
<input id="returnInput" type="date" oninput="updateState()" /><br>
<button id="book" onclick="book()">Book</button>
<script>
const oneTwoWay = document.getElementById('one-two-way');
const startInput = document.getElementById('startInput');
const returnInput = document.getElementById('returnInput');
const bookButton = document.getElementById('book');

function getDateString(date) { return date.toISOString().split('T')[0]; }

function updateState() {
  const isOneWay = oneTwoWay.value === 'one-way';
  const departureDate = startInput.value ? new Date(startInput.value) : new Date();
  let returnDate = returnInput.value ? new Date(returnInput.value) : new Date();

  startInput.setCustomValidity('');
  returnInput.disabled = undefined;
  bookButton.disabled = undefined;

  if (isOneWay) {
    returnInput.disabled = 'disabled';
    returnDate = departureDate;
  } else {
    if (returnDate < departureDate) {
      bookButton.disabled = 'disabled';
      startInput.setCustomValidity('Departure date must be before return date.');
    }
  }

  startInput.value = getDateString(departureDate);
  returnInput.value = getDateString(returnDate);
}

function book() {
  if (oneTwoWay.value === 'one-way') {
    alert(`You booked a one-way flight on ${startInput.value}.`);
  } else {
    alert(`You booked a return flight on ${startInput.value} to ${returnInput.value}.`);
  }
}

updateState();
</script>