Activity: Dynamic web page (Form handling)

(no submission)

Purpose: Hands-on experience with JS and DOM manipulation

For this exercise, we will create a dynamic web page. Do at least one of the following 3 options:


Option 1: Create a simple to do list

The todo list allows a user to add new tasks to the list, one task at a time. All interactions are processed on the client-side. No back end or server-side processing. We'll stop periodically, and do exercise one step at a time with discussion between steps.

Tasks:

  1. Create a form for your to do list and style your page

    You may create a form from scratch
    • Create an HTML file ( .html   not   .htm )
    • The form should include:
      • Task description — briefly describe the task
      • Due date — when the task must be completed by
      • Priority — indicate how urgent the task must be completed
      • A button to add task
      • An area or space where the tasks are displayed
      • (optional) An option to remove the task from the list
    • Define CSS rules and/or use bootstrap to style your page

    Alternatively, you may use the provided  myTodo.html template

    The following image shows as example screen of the to do list

    form for to do list

  2. Add dynamic behavior using JS
    • When the form is loaded, set focus on the text box (or field) that the user will enter first
      • Q: Why should you always set focus on the item that you want the user to enter?

      Note: Although an input's autofocus attribute can serve a similar purpose, to make you practice JS you are required to write your own JS code to achieve this behavior.

    • Once the add task button is clicked, access the form, retrieve the content, add the content to the to do list. Then, you should remove (or clear) the content from the form elements.
      • Q1: What would happen if the content is not removed from the form?
      • Q2: If the form elements are not entered, how should you handle the missing data?
    • Optional: once the remove button is clicked, remove the associated item from the list.

Option 2: Create a zombie book

The zombie book allows a user to add zombie information to the collection, one zombie at a time. You may make use of the zombie object you created previously, although it may not be necessary to complete this exercise. All interactions are processed on the client-side. No back end or server-side processing. We'll stop periodically, and do exercise one step at a time with discussion between steps.

Tasks:

  1. Create a form for your zombie book and style your page

    You may create a form from scratch
    • Create an HTML file ( .html   not   .htm )
    • The form should include:
      • Zombie name — the name of the zombie
      • Food — the zombie's favorite food
      • Type — the type of the zombie
      • A button to add the zombie information
      • An area or space where the list of zombies are displayed
      • (optional) An option to remove the zombie from the list
    • Define CSS rules and/or use bootstrap to style your page

    Alternatively, you may use the provided  zombie.html template

    The following image shows as example screen of the zombie book

    form for zombie book

  2. Add dynamic behavior using JS
    • When the form is loaded, set focus on the text box (or field) that the user will enter first
      • Q: Why should you always set focus on the item that you want the user to enter?

      Note: Although an input's autofocus attribute can serve a similar purpose, to make you practice JS you are required to write your own JS code to achieve this behavior.

    • Once the add task button is clicked, access the form, retrieve the content, add the content to the to do list. Then, you should remove (or clear) the content from the form elements.
      • Q1: What would happen if the content is not removed from the form?
      • Q2: If the form elements are not entered, how should you handle the missing data?
    • Optional: once the remove button is clicked, remove the associated item from the list.

Option 3: Create a "Design Your Own" theme

For this option, you will come up with a theme for your simple form written in HTML, CSS, and JS. Your form must include at least 3 different kinds of form inputs. There must be at least 2 buttons that allow users to initiate some actions. The actions must manipulate DOM and thus updating the screen (either content, style, layout) in some ways. All interactions are processed on the client-side. No back end or server-side processing.


You may modify your interface the way you like. Get creative. Feel free to add additional elements you feel should be included and have fun!

Refer to Basic web deployment (XAMPP or GCP) to deploy and test your web page.


Copyright © 2022 Upsorn Praphamontripong

Released under the Creative Commons License CC-BY-NC-SA 4.0 license.

Last updated 2022-05-28 13:10