[SOLVED] Cpsc1520 – javascript 4 exercise: making decisions and forms

Validation of forms is everywhere when you create a JavaScript application and a web application in
general. You want to ensure that you’re getting correct and valid information from your users so that
you can (for us in the future) save this information.
Exercise Step 1 – Adding a new Item to our Order
1. Link your JavaScript file in the HTML, do not change any HTML otherwise.
2. Select the form with the class “new-order-form”
3. Add an event listener on the form that will handle the “submit” event.
4. Using the event object, prevent the default action from happening
5. Assign the form elements from using the “elements” property on the “event.target” to variables
with appropriate names.
6. Pass the form input values to the “addOrderItem” function given.
a. If you’re ever confused about a specific variable, you can always use the console to print
out the variables. The output should look something like this once you click the “Add to
Order” button:
Exercise Step 2 – Validating Elements of the Form
1. There’s a bug in our application. We get a blank row to our order if we submit our form with
nothing in it. We only want populated rows because that is what we expect in our application.
2. Create a variable named “isFormValid” that will be assigned a Boolean. Using this variable you,
either execute or do not execute the “addOrderItem” with the values from the form.
3. In the following steps, use the “isFormValid” with the validation functions “isValueNotEmpty”
and “isGreaterThanFive”.
4. Validate the order item name.
a. If the order item name is not an empty string, then the item name is valid.
i. Remove the “is-invalid” class on the order item name using the elements’
“classList.remove” function.
b. If the order item name is an empty string, then the item name is invalid.
i. Add the “is-invalid” class on the order item name using the elements’
“classList.add” function.
ii. Set the “isFormValid” to false.
5. Validate the order item price.
a. If the order item price is not an empty string, and if it’s greater than five then the item
price is valid.
i. Remove the “is-invalid” class on the order item price using the elements’
“classList.remove” function.
b. If the order item price is an empty string, or if the price is less than five or if then the
item price is invalid.
i. Add the “is-invalid” class on the order item name using the elements’
“classList.add” function.
ii. Set the “isFormValid” to false.
6. Validate the order size.
a. If the order size is not an empty string, then it’s in valid.
i. Remove the “is-invalid” class on the order item size using the elements’
“classList.remove” function.
b. If the order size is an empty string, then it’s invalid.
i. Add the “is-invalid” class on the order item size using the elements’
“classList.add” function.
ii. Set the “isFormValid” to false
7. Execute the “addOrderItem” function only if “isFormValid” is true. There are a couple of ways to
do this, and either works.
8. You reset the values of each input on a successful form submission.
9. The functionality should look like the following result.
a. Successful result
b. Invalid result with all of the inputs invalid.
Test Cases
You might need clarification and need to know what values to test here to help you out.
• Test case: form invalid
o Item Name: Burger
o Price:
o Size:
• test case: form invalid
o Item Name:
o Price: 18
o Size:
• test case: form invalid
o Item Name: pop
o Price: 4
o Size: small
• test case: form invalid
o Item Name:
o Price:
o Size: Small
• Test case: valid form
o Item Name: pop
o Price: 6
o Size: small
Exercise Step 4 – Push up your code to github (accepting this assignment)
1. Open the link given and accept the assignment. Your link should look something like this.
Note the image will be different because you’ll accept the assignment specified.
You’ll see a page like this.
One you’re repo is ready the page should look like the following.
2. You should see the page below once you click on the link highlighted in blue. Click the button
that says “Code.” You’ll need to select “HTTPS” unless you’ve set up “SSH” (you can also set up
GitHub CLI”. Click on the copy icon once you’ve selected the proper icon.
3. Clone the repository in your console (or if you’re using GitHub Desktop) using the “git clone
REPO_URL” command.
And go into this folder.
4. Make your changes, then add them to staging (using “git add .”) and commit them (using “git
commit -m “CHANGE THIS MESSAGE”). Once committed, push them up to GitHup (using “git
push”) it should look like below.
5. If you click “Pull Requests” and then the first item called “Feedback” you should see your
commit (seen at the bottom).
6. Upload the link of your repository to Moodle.
Grading
I’ll give full marks if:
• All of the test cases pass.
• The form validates each input element separately.
• An invalid form submission should look like this:
• A valid form submission should look this:
If you don’t follow the instructions specified you’ll get a zero. There are no marks in between.