For this exercise, we will create a dynamic web page. Do at least one of the following 3 options:
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.
Create a form for your to do list and style your page
You may create a form from scratchAlternatively, you may use the provided myTodo.html template
The following image shows as example screen of the to do list
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.
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.
Create a form for your zombie book and style your page
You may create a form from scratchAlternatively, you may use the provided zombie.html template
The following image shows as example screen of the zombie book
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.
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.
Released under the CC-BY-NC-SA 4.0 license.
Last updated 2022-05-28 13:10