Registration

Readme

• Team Treehouse Project: Unit-3
• https://github.com/jcruzaxaeon/registration.git
• Create HTML, JavaScript for a registration form
• Indicate real-time errors for inputs: name, email, CC, Zip, CVV
• Create a universal listener callback function ( createListenerCb({validatorCb}) )
  • validatorCb ( e.g. isValidName(name) ) returns bool. Callback functions that check for valid input.
• Create one validator for each input
• Create input-listeners: {input}.addEventListener("input", createListenerCb({validatorCb}) )
  • nameInput.addEventListener( "input", createListenerCb(isValidName) )
• Show email-input-errors for:
  • empty-field
  • bad-format

Lead Task Roster

• Lorem

Development

• JavaScript, HTML (No: CSS)

Deployment

• Central GitHub Repo
• WSL2 > Debian 10 > Linux CLI
• GreenGeeks Hosting

Data

• note: merge into axaeon.com
• detail: git submodule for axaeon.com
• code: 3t
• description: Practice HTML-form creation, input-validation
• author: jcruz
• centralRepo: https://github.com/jcruzaxaeon/registration.git
• branch: main
• org: Team Treehouse
• orgType: Code Academy
• certification: Fullstack JavaScript Techdegree
• lesson: Unit Project 3
• topics: JavaScript, HTML
• text: Team Treehouse Unit Project 3. JavaScript, HTML practice.

Table of Contents

1. Externalities
2. Task Roster
3. Devlog
4. Reference
5. Text
6. Archive
7. Auto-Generated Markdown: jsdoc-to-markdown

Externalities

• Lorem

ToC

Task Roster

• Lorem

ToC

Devlog

• November 27, 2023: Modify readme. Push from host.
• Month DD, YYYY
  • Lorem
  • Ipsum

ToC

Reference

Reference Table

first	second
Lorem	Ipsum

ToC

Text

ToC

Archive

Lorem

Auto-Generated Markdown

The markdown below was automatically generated using JSDoc 3, and jsdoc-to-markdown.

Members

i : Number

Integer index

Constants

emailError : Object

Track email-input error-type using blankMsg, formatMsg strings

blankMsg : String

Error message for email-input error: blank entry

formatMsg : String

Error message for email-input error: bad format

otherJobInput : HTMLInputElement

Text-input: Optional, custom job title input

titleSelect : HTMLSelectElement

Job title select

colorSelect : HTMLSelectElement

Color select

designSelect : HTMLSelectElement

T-Shirt design select

activityFieldset : HTMLFieldSetElement

Activity fieldset

activityDiv : HTMLDivElement

Activity container-div: Contains all activity elements

activityCollection : HTMLCollection.<HTMLLabelElement>

Each label holds one activity, i.e. all elements associated with one activity, notably, the checkbox-inputs

paySelect : HTMLSelectElement

Payment select

form : HTMLFormElement

Form

nameInput : HTMLInputElement

Text-input: Name

emailInput : HTMLInputElement

Email-input

ccInput : HTMLInputElement

Text-input: Credit card

zipInput : HTMLInputElement

Text-input: Zip code

cvvInput : HTMLInputElement

Text-input: CVV

pay : Array.<HTMLDivElement>

Each container-div holds one payment option, i.e. all elements associated with one payment option. (index. option):

1. Credit Card
2. Paypal
3. Bitcoin

Functions

titleSelectListener(titleSelectChange)

If 'other' job-title is selected, show and focus() on 'other-job-role' text-input element, else keep it hidden

designSelectListener(designSelectChange)

If a design select option is set:

1. Change color-select dispalyed message (option[0].textContent) to "Select color:"
2. Focus() on color-select
3. Enable color options available for selected t-shirt design

activityListener(activityChange)

If change (check or uncheck) occurs on any activity checkbox-input:

1. Re-initialize: (1) Reset total cost to $0, (2) Enable all checkbox-inputs
2. Find a checked input: (1) Add price to total cost, (2) Disable other activities if time-conflicting

paySelectListener(paySelectChange)

1. Hide all payment containers
2. Show selected type

• Select Option --- paySelect.value/pay[i].id --- i --- Type
• 1 --------------- credit-card ----------------- 0 --- Credit Card
• 2 --------------- paypal ---------------------- 1 --- Paypal
• 3 --------------- bitcoin --------------------- 2 --- Bitcoin

createListener(validator)

Generalized 'input'-Listener Callback

1. If input is not valid: Flag parent container as invalid
2. [NOTE]: Show hints, Modify messages for specific email errors
3. Else: hide hints, reset messages, reset flags

nameInputListener(nameEInput)

Name text-input event listener

emailInputListener(emailEInput)

Email-input event listener

ccInputListener(ccEInput)

Credit card text-input event listener

zipInputListener(zipEInput)

Credit card text-input event listener

cvvInputListener(cvvEInput)

Credit card text-input event listener

isValidName(name) ⇒ bool

Name validator: Argument for createListener()

isValidEmail(email) ⇒ bool

Email validator: Argument for createListener()

isValidCc(cc) ⇒ bool

Credit card validator: Argument for createListener()

isValidZip(zip) ⇒ bool

Zip code validator: Argument for createListener()

isValidCvv(cvv) ⇒ bool

CVV validator: Argument for createListener()

formSubmitListener(formSubmit)

Form submit event listener: Verify valid form completion

failure(e, elem)

Submit Event Failure Protocol

isValidActivitySelection() ⇒ bool

Verify that at least 1 activity is selected

Events

"titleSelectChange"

Change in title select element

"designSelectChange"

Change in design select element

"activityChange"

Change in activity fieldset

"paySelectChange"

Change in payment select element

"nameEInput"

User input for name text-input element

"emailEInput"

User input for email-input element

"ccEInput"

User input for credit card text-input element

"zipEInput"

User input for zip code text-input element

"cvvEInput"

User input for CVV text-input element

"formSubmit"

User submit event for form element

i : Number

Integer index

Kind: global variable

emailError : Object

Track email-input error-type using blankMsg, formatMsg strings

Kind: global constant

blankMsg : String

Error message for email-input error: blank entry

Kind: global constant

formatMsg : String

Error message for email-input error: bad format

Kind: global constant

otherJobInput : HTMLInputElement

Text-input: Optional, custom job title input

Kind: global constant

titleSelect : HTMLSelectElement

Job title select

Kind: global constant
Emits: titleSelectChange

colorSelect : HTMLSelectElement

Color select

Kind: global constant

designSelect : HTMLSelectElement

T-Shirt design select

Kind: global constant
Emits: designSelectChange

activityFieldset : HTMLFieldSetElement

Activity fieldset

Kind: global constant
Emits: activityChange

activityDiv : HTMLDivElement

Activity container-div: Contains all activity elements

Kind: global constant

activityCollection : HTMLCollection.<HTMLLabelElement>

Each label holds one activity, i.e. all elements associated with one activity, notably, the checkbox-inputs

Kind: global constant

paySelect : HTMLSelectElement

Payment select

Kind: global constant
Emits: paySelectChange

form : HTMLFormElement

Form

Kind: global constant

nameInput : HTMLInputElement

Text-input: Name

Kind: global constant

emailInput : HTMLInputElement

Email-input

Kind: global constant

ccInput : HTMLInputElement

Text-input: Credit card

Kind: global constant

zipInput : HTMLInputElement

Text-input: Zip code

Kind: global constant

cvvInput : HTMLInputElement

Text-input: CVV

Kind: global constant

pay : Array.<HTMLDivElement>

Each container-div holds one payment option, i.e. all elements associated with one payment option. (index. option):

1. Credit Card
2. Paypal
3. Bitcoin

Kind: global constant

titleSelectListener(titleSelectChange)

If 'other' job-title is selected, show and focus() on 'other-job-role' text-input element, else keep it hidden

Kind: global function

Param	Type
titleSelectChange	Event

designSelectListener(designSelectChange)

If a design select option is set:

1. Change color-select dispalyed message (option[0].textContent) to "Select color:"
2. Focus() on color-select
3. Enable color options available for selected t-shirt design

Kind: global function

Param	Type
designSelectChange	Event

activityListener(activityChange)

If change (check or uncheck) occurs on any activity checkbox-input:

1. Re-initialize: (1) Reset total cost to $0, (2) Enable all checkbox-inputs
2. Find a checked input: (1) Add price to total cost, (2) Disable other activities if time-conflicting

Kind: global function

Param	Type
activityChange	Event

paySelectListener(paySelectChange)

1. Hide all payment containers
2. Show selected type

• Select Option --- paySelect.value/pay[i].id --- i --- Type
• 1 --------------- credit-card ----------------- 0 --- Credit Card
• 2 --------------- paypal ---------------------- 1 --- Paypal
• 3 --------------- bitcoin --------------------- 2 --- Bitcoin

Kind: global function

Param	Type
paySelectChange	Event

createListener(validator)

Generalized 'input'-Listener Callback

1. If input is not valid: Flag parent container as invalid
2. [NOTE]: Show hints, Modify messages for specific email errors
3. Else: hide hints, reset messages, reset flags

Kind: global function

Param	Type	Description
validator	callback	{bool} = validator({string})

nameInputListener(nameEInput)

Name text-input event listener

Kind: global function

Param	Type
nameEInput	Event

emailInputListener(emailEInput)

Email-input event listener

Kind: global function

Param	Type
emailEInput	Event

ccInputListener(ccEInput)

Credit card text-input event listener

Kind: global function

Param	Type
ccEInput	Event

zipInputListener(zipEInput)

Credit card text-input event listener

Kind: global function

Param	Type
zipEInput	Event

cvvInputListener(cvvEInput)

Credit card text-input event listener

Kind: global function

Param	Type
cvvEInput	Event

isValidName(name) ⇒ bool

Name validator: Argument for createListener()

Kind: global function

Param	Type
name	string

isValidEmail(email) ⇒ bool

Email validator: Argument for createListener()

Kind: global function

Param	Type
email	string

isValidCc(cc) ⇒ bool

Credit card validator: Argument for createListener()

Kind: global function

Param	Type
cc	string

isValidZip(zip) ⇒ bool

Zip code validator: Argument for createListener()

Kind: global function

Param	Type
zip	string

isValidCvv(cvv) ⇒ bool

CVV validator: Argument for createListener()

Kind: global function

Param	Type
cvv	string

formSubmitListener(formSubmit)

Form submit event listener: Verify valid form completion

Kind: global function

Param	Type
formSubmit	Event

failure(e, elem)

Submit Event Failure Protocol

Kind: global function

Param	Type	Description
e	formSubmit	Prevent default submission behavior
elem	HTMLInputElement	input that failed validator test

• failure(e, elem)
  • ~inputContainer : HTMLInputElement
  • ~hint : HTMLParagraphElement

failure~inputContainer : HTMLInputElement

• Input that failed validator test

Kind: inner constant of failure

failure~hint : HTMLParagraphElement

hint - Holds invalid 'input' message

Kind: inner constant of failure

isValidActivitySelection() ⇒ bool

Verify that at least 1 activity is selected

Kind: global function

• isValidActivitySelection() ⇒ bool
  • ~activityInput : HTMLInputElement
  • ~activityLabel : HTMLLabelElement
  • ~activityInput : HTMLInputElement

isValidActivitySelection~activityInput : HTMLInputElement

activityInput - Activity checkbox-input

Kind: inner property of isValidActivitySelection

isValidActivitySelection~activityLabel : HTMLLabelElement

activityLabel - activityInput container

Kind: inner property of isValidActivitySelection

isValidActivitySelection~activityInput : HTMLInputElement

activityInput - checkbox-input

Kind: inner property of isValidActivitySelection

"titleSelectChange"

Change in title select element

Kind: event emitted

"designSelectChange"

Change in design select element

Kind: event emitted

"activityChange"

Change in activity fieldset

Kind: event emitted

"paySelectChange"

Change in payment select element

Kind: event emitted

"nameEInput"

User input for name text-input element

Kind: event emitted

"emailEInput"

User input for email-input element

Kind: event emitted

"ccEInput"

User input for credit card text-input element

Kind: event emitted

"zipEInput"

User input for zip code text-input element

Kind: event emitted

"cvvEInput"

User input for CVV text-input element

Kind: event emitted

"formSubmit"

User submit event for form element

Kind: event emitted