Skip to content

Week 13 Coding Practice

Purpose

Practice creating Regular Expressions (RegEx) with title attributes and testing

Textbook Reference

There is no textbook reading for this practice

Instructions

Directory Structure

  1. Download the practice13 and save it into your practice folder for this course.
  2. Open the webpage, index.html in VS Code, and the browser.
  3. Familiarize yourself with the HTML and CSS already present

Add the pattern attribute

For each requirement, there is a list of items you can/should test for. You should also be testing for other variations other than what is listed, the suggested test items are just to get you started.

  1. The "How many flowers?" input must accept any two digits from 0-99.
    • Test letters, can you enter letters?
    • Test 1 digit, can you order just 1 flower?
  2. The "Phone" input must only accept the pattern: ###-###-#### (3 digits, a dash, 3 digits, a dash, 4 digits)
    • Test letters, can you enter letters?
    • Test dashes, what happens if you don’t use them?
  3. The "State" input must only accept 2 letters.
    • Test numbers
    • Test uppercase / lowercase as needed
  4. The "Zip" input must only accept 5 digits.
    • Test for letters
    • What happens if you enter 3 or 7 numbers?

Add the title attribute

  1. Create customized error messages for the above input elements.
    • Remember – be detailed, specific, and helpful for the end user

HTML Validation

  1. Go to https://validator.w3.org/
  2. Click on the Validate by File Upload
  3. Click on the Choose file button and navigate to the location of your HTML document.
  4. Click the Check button
  5. Print it as a PDF and save it into a folder named validations in your practice13 folder
    • Name the PDF indexValidation.pdf.

CSS Validation

You will not need a CSS validation for this practice.

Grading Criteria

  • The correct file directory structure exists in the practice13 folder along with the HTML validation.
  • All course coding standards have been followed.
  • Working regular expressions are present for the four form fields listed in the instructions.
  • Descriptive error messages (title attributes) have been added for each of the four form fields.
  • Reflection questions are answered honestly and thoroughly.

Submission

Part 1: Reflection

  1. Locate the submission link for Practice 13 in Brightspace (Unit 4 > Week 13 > Week 13 Coding Practice).
  2. Copy the below text (there is a copy icon in the upper-right of the textarea) and paste it into the Comments section.
  3. Answer the questions in the Brightspace.
1. How are you doing? Are you encountering any issues preventing you from completing this week's assignments? What can I do to better support you this week?


2. Describe one moment in this week’s coding practice that made you say “Oh!” or changed how you understood something. What clicked?


3. What challenges (if any) did you encounter in your learning this week? To help, try using this sentence format: This week, I struggled with ________. I think this challenge came up because ________. To work through it, I ________.


4. What questions (if any) do you have about the material covered this week?

Part 2: Upload .zip

  1. Compress your entire practice13 folder to a .zip (zipped) file.

  2. Do not zip the practice or Web Development folders. You should have the following files/folder in the zip file:

    • images (folder)
      • with images
    • stylesheets (folder)
      • index.css
    • validations (folder)
      • 1 HTML validation file
    • index.html

  3. Click on "Upload" to upload your .zip file or you can drag and drop it into the submission window.

  4. Click "Submit"