Skip to main content

Day 7 - Conditionals and form controls

Housekeeping

1. Forms and Javascript

Slides - Forms and Javascript

Demo: Adding Machine

Activity: Creating forms

In groups of 2-3:

  • Pick one of the functions included in this Activity;
  • Follow the provided instructions to:
    • In the HTML:
      1. Create a <form> element that contains the required fields for the user to enter the function inputs;
      2. Create a <p> that will store the form output after submission;
    • In the Javascript:
      1. Create variables for form and output (the paragraph);
      2. Add a submit event listener that invokes your chosen function;
      3. Replace the hard-coded input variables with ones entered in the form;
      4. Output the result to the output element (the paragraph) instead of logging it to the console.

2. Booleans and conditional code

Demo: Refactor temperature calculator

Using booleans and conditional statements convert the toCelcius function so that it works both ways:

  1. Add <select> menu to select to-celcius or to-fahrenheit;
  2. Refactor function to make the correct calculation, based on the menu selection.

3. Lab Time

Prep

Forms

Conditional code