Consistency: use custom donation instead of other donation

fund-us/css/index.css

@@ -76,7 +76,6 @@ input[name="donationAmount"]
 }
 
 
-
 .patronageForm
 {
 	padding: 10px;
@@ -220,14 +219,14 @@ input[name="donationAmount"] + label
 	border: 2px solid #eee;
 }
 
-#otherDonationLabel
+#customDonationLabel
 {
 	font-size: 16px;
 	padding-top: 5px;
 	line-height: 30px;
 }
 
-#otherDonationLabel > input
+#customDonationLabel > input
 {
 	margin-left: 3px;
 	margin-right: 3px;
@@ -252,7 +251,7 @@ input[name="donationAmount"] + label
 }
 
 @media only screen and (min-width: 380px) {
-	#otherDonationLabel > input
+	#customDonationLabel > input
 	{
 		margin-left: 7px;
 		margin-right: 7px;

fund-us/index.html

@@ -51,7 +51,7 @@
           <input type='radio' name='donationAmount' value='50' class='hidden selectButton' id='tier6'><label class='donationTierButtonLabel unselectable' for='tier6'>€50</label>
           <input type='radio' name='donationAmount' value='100' class='hidden selectButton' id='tier7'><label class='donationTierButtonLabel unselectable' for='tier7'>€100</label>
           <!-- Unfortunately can’t use an input type='number' here because the events are not fired consistently across major browsers. -->
-          <input type='radio' name='donationAmount' value='-1' class='hidden selectButton' id='tier8'><label class='donationTierButtonLabel unselectable' id='otherDonationLabel' for='tier8'>Other<input id='otherDonationAmount' type='string' pattern='[0-9]{1,6}' title='Custom donation amount'></input></label>
+          <input type='radio' name='donationAmount' value='-1' class='hidden selectButton' id='tier8'><label class='donationTierButtonLabel unselectable' id='customDonationLabel' for='tier8'>Other<input id='customDonationAmount' type='string' pattern='[0-9]{1,6}' title='Custom donation amount'></input></label>
         </fieldset>
 
         <button type='submit' id='submitButton'>Become a patron</button>

fund-us/js/index.js

@@ -101,8 +101,8 @@ class PatronageForm {
     this.interface = {
       patronageForm: $('#patronageForm'),
       submitButton: $('#submitButton'),
-      otherDonationAmountTextInput: $('#otherDonationAmount'),
-      otherDonationAmountRadioButton: $('#tier8'),
+      customDonationAmountTextInput: $('#customDonationAmount'),
+      customDonationAmountRadioButton: $('#tier8'),
       serverError: $('#serverError'),
       errorMessage: $('#errorMessage'),
 
@@ -129,10 +129,10 @@ class PatronageForm {
 
     // Ensure that selecting either the button or the text input focuses the custom
     // amount control and that focus is not lost when person clicks on already-selected control.
-    this.interface.otherDonationAmountRadioButton.addEventListener('click', updateFormState)
-    this.interface.otherDonationAmountTextInput.addEventListener('click', updateFormState)
-    this.interface.otherDonationAmountTextInput.addEventListener('focus', updateFormState)
-    this.interface.otherDonationAmountTextInput.addEventListener('input', updateFormState)
+    this.interface.customDonationAmountRadioButton.addEventListener('click', updateFormState)
+    this.interface.customDonationAmountTextInput.addEventListener('click', updateFormState)
+    this.interface.customDonationAmountTextInput.addEventListener('focus', updateFormState)
+    this.interface.customDonationAmountTextInput.addEventListener('input', updateFormState)
 
     //
     // Handle form submit requests.
@@ -158,31 +158,31 @@ class PatronageForm {
     // Handle the label of the submit button based on the type of donation.
     this.interface.submitButton.innerHTML = this.isPatronage ? 'Become a patron' : 'Donate'
 
-    const otherDonationAmountTextInput = this.interface.otherDonationAmountTextInput
+    const customDonationAmountTextInput = this.interface.customDonationAmountTextInput
 
     // If the donation amount text input has focus, ensure that the corresponding
     // radio button is also selected.
-    if (otherDonationAmountTextInput === document.activeElement) {
-      this.interface.otherDonationAmountRadioButton.checked = true
+    if (customDonationAmountTextInput === document.activeElement) {
+      this.interface.customDonationAmountRadioButton.checked = true
     }
 
     // Handle the state of the custom donation amount control.
     if (this.interface.selectedDonationAmountButton().id === 'tier8') {
       // Custom donation is active
-      otherDonationAmountTextInput.style.opacity = 1
-      otherDonationAmountTextInput.focus()
-      let otherDonationAmountString = otherDonationAmountTextInput.value
-      otherDonationAmountString = otherDonationAmountString.slice(0,6)      // Limit to six digits.
-      let otherDonationAmountInteger = parseInt(otherDonationAmountString)  // Ensure it is a valid integer.
-      otherDonationAmountTextInput.value = isNaN(otherDonationAmountInteger) ? '' : otherDonationAmountInteger
+      customDonationAmountTextInput.style.opacity = 1
+      customDonationAmountTextInput.focus()
+      let customDonationAmountString = customDonationAmountTextInput.value
+      customDonationAmountString = customDonationAmountString.slice(0,6)      // Limit to six digits.
+      let customDonationAmountInteger = parseInt(customDonationAmountString)  // Ensure it is a valid integer.
+      customDonationAmountTextInput.value = isNaN(customDonationAmountInteger) ? '' : customDonationAmountInteger
     } else {
       // Clear the other donation amount entry if it is not valid and
       // it isn’t selected.
-      if (!this.otherDonationAmountIsValid) {
-        document.getElementById('otherDonationAmount').value = ''
+      if (!this.customDonationAmountIsValid) {
+        this.interface.customDonationAmountTextInput.value = ''
       }
       // De-emphasize the text input when the control is not in focus.
-      document.getElementById('otherDonationAmount').style.opacity = 0.5
+      this.interface.customDonationAmountTextInput.style.opacity = 0.5
     }
 
     // Enable/disable the submit button based on whether the form is valid.
@@ -238,7 +238,7 @@ class PatronageForm {
 
 
   get customDonationAmount () {
-    const amount = Number(this.interface.otherDonationAmountTextInput.value)
+    const amount = Number(this.interface.customDonationAmountTextInput.value)
     if (amount > 0) {
       return amount
     } else {
@@ -247,8 +247,8 @@ class PatronageForm {
   }
 
 
-  get otherDonationAmountIsValid () {
-    return Number(this.interface.otherDonationAmountTextInput.value) > 0
+  get customDonationAmountIsValid () {
+    return Number(this.interface.customDonationAmountTextInput.value) > 0
   }