Development: The Third Chapter

Almost There

Under 1 week until the deadline and the creation of the website about myself has almost come to a finish, every webpage I wanted has been layed out, full of content and colour and even some javascript has been thrown in too!

Sneak Peek

Below is the image when accessing the Fun! webpage. It gives the user instructions to enter some details about themselves and anything random that comes to mind. Some questions from my website include:

Name

Location

Best Friend

Favourite Animal

Which political party do you dislike most?

There are many more questions the user will have to answer in order to access the webpage. Once the user has completed this, the webpage will display a random story I have created and whatever they inputted into the alert boxes will fill the gaps within the story

Once the user types in all the details here is the final result: The Story/'madlib'

Note:Story has not been 100% completed but javascript has been completed :)

Here are the variables I have created for the Fun! webpage story.

I have used these variable prompts to store the items of information in which the user enters into the alert boxes.

Below is the development of the 'document.writeln' after the variable prompts which basically reads the items of information on the webpage to the user. Whatever they enter into the alert boxes during this basically fills in the gaps of the variables completing the story or 'madlib'.

Contact Form Javascript

Plan

The form needs to be designed so users will be able to see clearly the information that they are inputting and it will need to ensure them that their information will not be used by third parties. It needs to be created using Javascript functions using code which will validate the form as the user clicks the 'Send' button.

Building the Javascript from scratch using a Javascript (.js) file in Dreamweaver will make the 'product' easier to understand when it comes to fixing any problems which may arise. The 'Form Tags' (Form) will be made within the Html of the webpage and this will display:

Name

Age

Email

Comment

Once the user enters the correct information and clicks a submit button, the information will send to: http://www.sam-i-am.com/cgi-bin/echoform.cgi and will display the information from there.

I will need to make the Javascript code validate so the user cannot miss out any information that is important when contacting me (or when submitting to the sam-i-am site.) I will need to create variables which will be designed to interdict what the user inputs. So if they entered nothing in at all, then an alert will tell them to enter the information. If they enter the wrong information such as an Email address, then they will be instructed to use a valid email address.

Javascript

Here in the Javascript (.js) page, I have basically established variables for every element within the form such as Name, Age, Email and Opinion. I have then created the if statement which explains that valid is true but if the Name (for example) hasn't been entered in the text box then an alert will be displayed telling the owner to enter their name. The 'return validate_Name = false;' function stops the Javascript from executing the rest of the script until the text boxes are filled.

Form

The form is established on the Html, using input types such as buttons and text boxes to option values with drop-down boxes, it is ideal to use in form making as it's clear, simple and presentable to all user groups. Each input and select tag has a selected name which relates to the Javascript page I have created. So when executed online or in preview mode, it appears as text boxes and drop-down boxes on the screen. Each tag name in the Javascript executes along with this, working together to help the user enter the information and to correct information which is invalid.

Finished Javascript Validation Form Design

The finished design of the validated form below shows each text box filled with information. When the Send Details button is clicked, it will link to the sam-i-am website.

However if I miss out some of the information, then the Javascript will kick into gear and will alert me, prompting me to fill in all the missing text boxes.

If I do not fill in all of the text boxes, then the Javascript will also kick into gear and alert me to fill in each of the text boxes. It will go through a cycle of alert messages from Name to Age to Email to Opinion until I fill in all the text boxes.

Adding in Facebook

Facebook is one of the most popular social networking site on the planet. Why don't we add it to the site?

Here's some of the code to display a list of friends from my Facebook

The issue with the source code is that it Fails Validation. So I have decided to add it into an Iframe (impractical but useful to avoid the failure of validation).

Not very neat is it? But it's the best thing that I can do to contain the code without failing validation.