Skip to main content

✏️ Practice: Calculator and More

Goal: Explore using a variety of form input types, branching, and event listeners by completing the exercises listed below.

Warm Up​

  • How do we gather form input from a select (i.e.: dropdown) box? How does this differ from a basic input (i.e.: text) field?
  • What does :checked refer to when gathering input from radio buttons?
  • If we include type="number" in an HTML form field, do we still need to use parseInt() when retrieving the value (assuming we need a number)?

Code​

Meet the goal by completing one of the practice prompts below. Your project must use:

  • event listeners
  • function declarations
  • new form input types
  • branching

If you are feeling less comfortable with these topics, you should choose the "calculator from scratch" project. If you are feeling more comfortable with these topics or want to stretch your comfort zone, build the "character builder" project.

Make sure to budget time for any remaining lessons or practice prompts listed for this class session.

Calculator From Scratch​

Rebuild the calculator project from scratch without referencing the previous lesson "Calculator with Forms and Branching". You may reference the lessons on branching, event listening, and form input types as needed. This prompt is meant to be a safe option to practice the new topics from today.

If you really get stuck, you still should not reference the "Calculator with Forms and Branching" lesson. Instead, make use of the debugging tools you've learned about so far: reading console errors and using console.log(). Or, review previous lessons, research online, and ask for help from a peer or instructor.

Character Builder​

Create a webpage that helps users create a character for a game — any game! Ask the user to fill in a form with their character's name, and any information you feel like is relevant to the game. Use branching to determine some aspect of the character, like their personality or their strength.

Make sure to:

  • Include all form input types we've covered so far (except checkboxes)
  • Use event listeners with function declarations
  • Use branching — note that your branching logic to determine the result does not need to be complicated.

When you run into an bug, review your console for any errors and use console.log() to log any values. If you are still stuck after that, consider reviewing lessons, researching online, or asking for help from another pair or your instructor.