I am working on a javascript problem im trying to make a christmas theme javascr
ID: 3936156 • Letter: I
Question
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)
Explanation / Answer
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>
<h1>Registration Form</h1>
<p>Use tab keys to move from one input field to the next.</p>
<form name='registration'>
<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.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.