I am working on a javascript problem im trying to make a chr

I am working on a javascript problem im trying to make a christmas theme javascript page that asks the user some questions :

one enter your name , enter if your a male or female , ask if you have been naughty or nice , if the user enters nice you configure from now to christmas how many days christmas is then you are taken to a page that uses a GIF of santa have a merry christmas , if naughty you are taken to a page with a naughty GIF image with

a description of some sorts why you have been naughty .

this javascript assignment needs At least one form with at least three different types of controls on the form (textbox, radio buttons, check boxes, submit/reset button).

Data validation for the form (Chapter 11)

Three or more functions (Chapter 7)

Cookies - Select three items on the form and build cookies that will last for 7 months (Chapter 16)

Some of the date methods from Chapter 9

The project must be uploaded to the SWIC server

Some animation would be nice (Chapter 10 setInterval() or setTimeout() functions could be used to satisfy this)

Solution

I try to give you most of code that can be use in this assigment :-

Code for UI

1) test.html

<!DOCTYPE html>
<html lang=\"en\"><head>
<meta charset=\"utf-8\">
<title>JavaScript christmas theme</title>
<link rel=\'stylesheet\' href=\'js-form-validation.css\' type=\'text/css\' />
<script src=\"sample-registration-form-validation.js\"></script>
</head>
<body onload=\"document.registration.username.focus();\">
<h1>Registration Form</h1>
<p>Use tab keys to move from one input field to the next.</p>
<form name=\'registration\' onSubmit=\"return formValidation();\">
<ul>
<li><label for=\"Name\">Name:</label></li>
<li><input type=\"text\" name=\"username\" size=\"50\" /></li>
<li><label id=\"gender\">Sex:</label></li>
<li><input type=\"radio\" name=\"msex\" value=\"Male\" /><span>Male</span></li>
<li><input type=\"radio\" name=\"fsex\" value=\"Female\" /><span>Female</span></li>
<li><label>You are naughty or nice:</label></li>
<li><input type=\"checkbox\" name=\"en\" value=\"naughty\" checked /><span>Naughty</span></li>
<li><input type=\"checkbox\" name=\"nonen\" value=\"nice\" /><span>Nice</span></li>
<li><input type=\"submit\" name=\"submit\" value=\"Submit\" /></li>
</ul>
</form>
</body>
</html>

This is code to validate user input fileds

2) sample-registration-form-validation.js

function formValidation()
{
var uname = document.registration.username;
var ucountry = document.registration.country;
var umsex = document.registration.msex;
var ufsex = document.registration.fsex;
   if(allLetter(uname))
   {
       if(validsex(umsex,ufsex))
       {
       }
   }
return false;

}

function allLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert(\'Name must have alphabet characters only\');
uname.focus();
return false;
}
}

function countryselect(ucountry)
{
if(ucountry.value == \"Default\")
{
alert(\'Select your country from the list\');
ucountry.focus();
return false;
}
else
{
return true;
}
}

function ValidateEmail(uemail)
{
var mailformat = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert(\"You have entered an invalid email address!\");
uemail.focus();
return false;
}
} function validsex(umsex,ufsex)
{
x=0;

if(umsex.checked)
{
x++;
} if(ufsex.checked)
{
x++;
}
if(x==0)
{
alert(\'Select Male/Female\');
umsex.focus();
return false;
}
else
{
alert(\'Form Succesfully Submitted\');
window.location.reload()
return true;
}
}

3) js-form-validation.css

Code to show data on UI

h1 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}

form ul li label{
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

form ul li input, select, span {
float: left;
margin-bottom: 10px;
}

form textarea {
float: left;
width: 350px;
height: 150px;
}

[type=\"submit\"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}

p {
margin-left: 70px;
font-weight: bold;
}

Funtion to redirect user after click on nice or naughty

<script>
jQuery(document).ready(function($) {
$(\'#idfornaughty\').click(function(e) {

window.open(naughtygifURL);

}

$(\'#idfornice\').click(function(e) {

window.open(nicegifURL);

}

}

Above code is also contain some additional validation field if you want to add some more information. Please let me know if you have any difficulty.

I am working on a javascript problem im trying to make a christmas theme javascript page that asks the user some questions : one enter your name , enter if your
I am working on a javascript problem im trying to make a christmas theme javascript page that asks the user some questions : one enter your name , enter if your
I am working on a javascript problem im trying to make a christmas theme javascript page that asks the user some questions : one enter your name , enter if your
I am working on a javascript problem im trying to make a christmas theme javascript page that asks the user some questions : one enter your name , enter if your

Get Help Now

Submit a Take Down Notice

Tutor
Tutor: Dr Jack
Most rated tutor on our site