Evan X. Merz

This post contains the second assignment in my free web programming course.

Project: Client-side web form

Forms are how users enter data on the web. When you register for a website, you enter your username and email into a web form. When you buy an item from a web store, you send your payment information using a web form.

Generally speaking web forms have input components on them like text boxes and dropdowns and buttons. But this isn't always the case. Web forms can be cleverly hidden using JavaScript and CSS.

Typically a web form submits data to a server, which processes that data and responds to the user with something interesting. For instance, you might submit your username and password and get back an authentication token that allows you to use the private portion of a website.

Requirements

I want you to build a single web page using html and javascript only.

It should have three things on it.

1. A page title in h1 tags.
2. A label that reads "title:".
3. An input text box.
4. A submit button.

When the button is clicked, the title of the page should change to the title entered by the user without reloading the page.

Also, the user input must validated. The user should be prevented from using dirty words like "MacOS" and "iphone". Don't let them use either of those words in any capitalization. If those words occur in the input, then a red error message should be displayed underneath the text box that reads "Please refrain from using dirty words such as 'MacOS' and 'iphone'.".

Extra credit

For extra credit, make the form beautiful using CSS. Be creative, but try to make something that a typical web user might like.