LabsWeek4/TreeOrderForm.html at master · azhdrake/LabsWeek4 · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Tree Order Form</title>

  <style>

      input, select {
          width: 100%;
          padding: 5px;
          margin: 5px 5px 5px 0px;
          box-sizing: border-box;
      }
  </style>

</head>
<body>

    <h1>Minnesota Tree Order Form</h1>

    <p>Enter information to order your tree. All fields are required.</p>

    <h2>Order Information</h2>

    <label for="homeowner-name">Homeowner Name</label><input id="homeowner-name" name="homeowner-name">
    <br>
    <label for="homeowner-house-number">House Number</label><input id="homeowner-house-number" name="homeowner-house-number">
    <br>
    <label for="homeowner-street-name">Street Name</label><input id="homeowner-street-name" name="homeowner-street-name">
    <br>
    <label for="city">City</label><input id="city" name="city">
    <br>
    <!-- All orders must be for Minnesota, so this input is not editable -->
    <label for="state">State</label><input id="state" name="state" value="Minnesota" disabled>
    <br>
    <label for="zipcode">Zip Code</label><input id="zipcode" name="zipcode">
    <br>

    <label for="tree-type">Tree Type</label>
    <select id="tree-type">
        <option disabled selected value=""> Select a tree </option>  <!-- Unselectable message shown. Since this will be required, it forces the user to actually pick a tree, not just click submit for the default first option -->
        <option name="tree-type" type="radio">Lilac</option>
        <option name="tree-type" type="radio">Maple</option>
        <option name="tree-type" type="radio">Oak</option>
    </select>
    <br>

    <button id="submit-order">Submit Order</button>

    <h2>Order Summary</h2>

    <p id="order-summary">
        <!-- Use JavaScript to display the order information,
            if all the required information is entered  -->
    </p>


<script>
    let homeownerNameInput = document.querySelector('#homeowner-name')
    let homeownerHouseNumberInput = document.querySelector('#homeowner-house-number')
    let homeownerStreetNameInput = document.querySelector('#homeowner-street-name')
    let treeTypeSelect = document.querySelector('#tree-type')

	let city = document.querySelector("#city")
	let zipCode = document.querySelector("#zipcode")
	// TODO create a variable for city input element
    // TODO create a variable for zip code input element

    let submitButton = document.querySelector('#submit-order')
    let orderSummaryParagraph = document.querySelector('#order-summary')
    submitButton.addEventListener('click', function() {
        let name = homeownerNameInput.value
        let houseNumber = homeownerHouseNumberInput.value
        let streetName = homeownerStreetNameInput.value
        let treeType = treeTypeSelect.value
		let cityText = city.value
		let zipCodeText = zipCode.value

		let errors = []
		let nameError = "Please enter your name."
		let houseError = "Please enter your house number."
		let streetError = "Please enter your street name."
		let treeError = "Please enter your desired tree type."
		let cityError = "Please enter your city."
		let zipError = "Please enter your zip code."

		if (name === ""){
			errors.push(nameError)
		} if (houseNumber === ""){
			errors.push(houseError)
		} if (streetName === ""){
			errors.push(streetError)
		} if (treeType === ""){
			errors.push(treeError)
		} if (cityText === ""){
			errors.push(cityError)
		} if (zipCodeText === "" && (zipCodeText < 55001 || zipCodeText > 56763)){
			errors.push(zipError)
		}

		if (errors.length != 0){
			alert(errors.join("\n"))
			} else {
				orderSummaryText = `${name}'s Order.<br>${houseNumber} ${streetName} ${cityText}<br>${treeType} tree`
				orderSummaryParagraph.innerHTML = orderSummaryText
			}
	 })
        // TODO get the value from the input#city
        // TODO get the value from the input#zipcode
        // TODO Validate that all six input and select elements have been completed
        // TODO Validate the zipcode is in the range 55001 and 56763 (which checks that the zip code is in Minnesota)

        // If a form element has not been completed, add an error message to the errors array (use push)

        // TODO - If there are any errors after checking all of the elements,
        // display an alert with all of the error messages (use join)
        // and then return from this function to prevent further processing
        // TODO - If there are no errors, use a template string to display an order summary in the order summary paragraph


</script>

</body>
</html>