Skip to content

Latest commit

 

History

History
38 lines (27 loc) · 2.41 KB

instructions.md

File metadata and controls

38 lines (27 loc) · 2.41 KB

Here's a coding challenge that covers the concepts of

  • creating form elements,
  • using labels and placeholders,
  • form validation, and
  • handling form data using HTML attributes and JavaScript.

Using the details below, code to get the job done! This is your first ever real coding challenge - no line by line instructions, just a list of features that need coding, and this lovely web-hosted IDE! It's a big day, congrats!

If you need some hints, check out the HINTS.md for some best practices to help you get going, but don't miss the notes at the bottom of this file, either.

Exercise:

Create a web page that contains a form with the following fields:

  1. A text field for entering a username.
  2. Three checkboxes for selecting favorite fruits (Apple, Banana, Orange).
  3. Radio buttons for selecting a gender (Male, Female, Other).
  4. A dropdown menu for selecting a country (USA, Canada, UK).
  5. A submit button.

Apply the following requirements to the form:

  1. Add appropriate labels for each form element.
  2. Use placeholders for the username field and provide the text "Enter your username".
  3. Add validation to the form fields as follows:
    • The username field is required.
    • One gender radio button must be selected.
    • The country dropdown menu must have a selected option.
  4. Handle the form submission using JavaScript. When the form is submitted, display an alert with the values of the selected fields (username, fruits, gender, country).

Note: You can use inline JavaScript or an external script to handle the form submission. Don't worry about anything fancier than what you've learned in the curriculum so far - feel free to fake things out wherever the curriculum has left you high and dry. This is an important skill as well - recognizing where your "technical debt" is. Don't remember any? Don't sweat it! The JS is BONUS POINTS ONLY. We'll learn plenty of JavaScript soon enough!

You'll also want to start with creating a boilerplate HTML using the ! emmet abbreviation auto-completion. If you don't remember how, just go to the html file and on the first line, type an exclamation point and hit enter. This will auto-fill the html file with the basic necessities for a simple html file. Don't forget to first use the exclamation point, and then click the first drop down that appears to autocomplete the Emmet abbreviation to populate your boilerplate html before moving on to your coding challenge.

Good luck!