Build interlinked four page website. use HTML, CSS and JavaScript in your codes.
ID: 3576163 • Letter: B
Question
Build interlinked four page website.
use HTML, CSS and JavaScript in your codes.
Website should have minimum 4 pages.
Each of those pages should use same or similar style, so that the pages look like they belong to the same website.
Each page should have meaningful title (using the same title for all the pages is not considered meaningful).
You should have a consistent navigation, for example if you have a menu which links to different pages, the menu should appear in the same place in all pages, so that users can easily find the menu and be able to navigate to different pages.
Your pages should be easy to read, easy to navigate. The text, border, background etc. should be contrasting, and don't use too many different colors.
You should have enough text and at least 2 images in your website. You're also encouraged to add some multi-media contents (audio, video, flash etc.) if you want.
If you're using an image or some text from somewhere else, you must clarify the origin of that resource in a comment in your HTML or CSS file, right before the resource you're using.
Each HTML page and CSS should pass the W3C validation. Use the following website:
https://validator.w3.org/
Submit all html files, CSS files, images, and screenshots for each page
You must add some (at least two) basic features of JavaScript to your pages. The more you add the more extra credits you will earn.
Explanation / Answer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name : Defrost
Description: A two-column, fixed-width design with dark color scheme.
Version : 1.0
Released : 20111121
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>AMES-Cloud: A Framework of Adaptive Mobile Video Streaming and Efficient Social Video Sharing in the Clouds</title>
<link href="http://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" src="datetimepicker.js">
//Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
//Script featured on JavaScript Kit (http://www.javascriptkit.com)
//For this script, visit http://www.javascriptkit.com
</script>
<script language="JavaScript" type="text/javascript">
function valid1()
{
var d=document.f1.mail.value;
if(d=="")
{
alert("enter ur E-Mail Id");
document.f1.mail.focus();
return false;
}
var emailfilter=/^w+[+.w-]*@([w-]+.)*w+[w-]*.([a-z]{2,4}|d+)$/i;
var m=emailfilter.test(document.f1.mail.value);
if(m==false)
{
alert("Please enter a valid Email Id. Ex(user@ymail.com)");
document.f1.mail.focus();
return false;
}
var b=document.f1.pass.value;
if(b==""){
alert("Enter password");
document.f1.pass.focus();
return false;
}
}
</script>
<script language="JavaScript" type="text/javascript">
function valid()
{
var a=document.f.fname.value;
if(a=="")
{
alert("Enter Your First Name");
document.f.fname.focus();
return false;
}
var nameMatch=/^[a-zA-Z]+$/;
if(!(a.match(nameMatch)))
{
alert("please enter valid name");
document.f.fname.focus();
return false;
}
var b=document.f.lname.value;
if(b=="")
{
alert("Enter Your Last Name");
document.f.lname.focus();
return false;
}
var nameMatch=/^[a-zA-Z]+$/;
if(!(b.match(nameMatch)))
{
alert("please enter valid name");
document.f.lname.focus();
return false;
}
var d=document.f.mail.value;
if(d=="")
{
alert("enter ur E-Mail Id");
document.f.mail.focus();
return false;
}
var emailfilter=/^w+[+.w-]*@([w-]+.)*w+[w-]*.([a-z]{2,4}|d+)$/i;
var m=emailfilter.test(document.f.mail.value);
if(m==false)
{
alert("Please enter a valid Email Id. Ex(user@ymail.com)");
document.f.mail.focus();
return false;
}
var z=document.f.pass.value;
if(z=="")
{
alert("Enter password");
document.f.pass.focus();
return false;
}
var e = document.f.mno.value;
if(e=="")
{
alert("Enter mobile number");
document.f.mno.focus();
return false;
}
if(isNaN(e))
{
alert("Enter mobile number in digits");
document.f.mno.focus();
return false;
}
if(e.length!=10)
{
alert("Enter the 10 digit number");
document.f.mno.focus();
return false;
}
if(document.f.gen[0].checked==false&&document.f.gen[1].checked==false)
{
alert("Select gender");
return false;
}
var g=document.f.dob.value;
if(g=="")
{
alert("Choose You Date Of Birth");
document.f.dob.focus();
return false;
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
</br>
<h3><font color="#FFFF00" size="+3"><span><font color="#00FFFF">AMES-Cloud:</font></span>
A Framework of Adaptive Mobile Video Streaming</font></h3>
<h2 align="right"><font color="#FFFF00">and Efficient
Social Video Sharing in the Clouds </font></h2>
<div id="logo">
</div>
</div>
</div>
<!-- end #header -->
<div id="menu">
<table align="right"><tr><td><a href="adminlogin.jsp">admin</a></td></tr></table>
<table align="right">
<form action="login1.jsp" name="f1" method="get">
<tr><td><font color="#FFFFFF" face="Times New Roman, Times, serif">Email</font></td>
<td><font color="#FFFFFF" face="Times New Roman, Times, serif">Password</font></td>
</tr>
<tr>
<td><input type="text" name="mail"> </td>
<td><input type="text" name="pass"> </td>
<td><input type="submit" value="Login"></td>
</tr>
</form>
</table>
</div>
<!-- end #menu -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content">
<div class="post"><h3><font color="#FF00FF"><strong>Connect With Friends and Share Videos</strong></font></h3>
<h2 class="title">Sign Up:</h2>
<div class="entry">
<table>
<form action="success.jsp" name="f" method="get">
<tr>
<td><p><input type="text" name="fname" placeholder="First Name" size="20">
<input type="text" name="lname" placeholder="Last Name" size="20"></p></td>
</tr>
<tr>
<td><p><input type="text" name="mail" placeholder="Your Mail" size="45"></p></td>
</tr>
<tr>
<td><p><input type="password" name="pass" placeholder="New Password" size="45"></p></td>
</tr>
<tr>
<td><p><input type="text" name="mno" placeholder="Your Number" size="45"></p></td>
</tr>
<tr>
<td><p><input id="demo1" name="dob" type="text" placeholder="Date Of Birth" size="40">
<a href="#"><img src="cal.gif" width="16" height="16" border="0" alt="Pick a date"></a></p></td>
</tr>
<tr>
<td><p><input type="file" size="33" name="file" placeholder="Your Profile Picture"></p></td>
</tr>
<tr>
<td><p> <input type="radio" name="gen" value="male">Male
<input type="radio" name="gen" value="female">Female</p>
</td>
</tr>
<tr>
<td><p> <input type="submit" value="Submit">
<input type="reset" value="Clear"></p>
</td>
</tr>
</form>
</table>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#"></a></h2>
<div class="entry">
<p></p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#"></a></h2>
<div class="entry">
<p></p>
</div>
</div>
<div> </div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li>
<h2>Popular On Our Site</h2>
<p>tsrujdtyj</p>
</li>
<li>
<h2>etuytetu</h2>
srtujj
</li>
<li>
<h2></h2>
</li>
<li>
<h2></h2>
</li>
</ul>
</div>
<!-- end #sidebar -->
<div> </div>
</div>
</div>
</div>
<!-- end #page -->
</div>
<div id="footer">
<p></p>
</div>
<!-- end #footer -->
</body>
</html>
var winCal;
var dtToday=new Date();
var Cal;
var docCal;
var MonthName=["January", "February", "March", "April", "May", "June","July",
"August", "September", "October", "November", "December"];
var WeekDayName=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var exDateTime;//Existing Date and Time
//Configurable parameters
var cnTop="200";//top coordinate of calendar window.
var cnLeft="500";//left coordinate of calendar window
var WindowTitle ="DateTime Picker";//Date Time Picker title.
var WeekChar=2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
var CellWidth=20;//Width of day cell.
var DateSeparator="-";//Date Separator, you can change it to "/" if you want.
var TimeMode=24;//default TimeMode value. 12 or 24
var ShowLongMonth=true;//Show long month name in Calendar header. example: "January".
var ShowMonthYear=true;//Show Month and Year in Calendar header.
var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header.
var WeekHeadColor="#0099CC";//Background Color in Week header.
var SundayColor="#6699FF";//Background color of Sunday.
var SaturdayColor="#CCCCFF";//Background color of Saturday.
var WeekDayColor="white";//Background color of weekdays.
var FontColor="blue";//color of font in Calendar day cell.
var TodayColor="#FFFF33";//Background color of today.
var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox.
var YrSelColor="#cc0033";//color of font of Year selector.
var ThemeBg="";//Background image of Calendar window.
//end Configurable parameters
//end Global variable
function NewCal(pCtrl,pFormat,pShowTime,pTimeMode)
{
Cal=new Calendar(dtToday);
if ((pShowTime!=null) && (pShowTime))
{
Cal.ShowTime=true;
if ((pTimeMode!=null) &&((pTimeMode=='12')||(pTimeMode=='24')))
{
TimeMode=pTimeMode;
}
}
if (pCtrl!=null)
Cal.Ctrl=pCtrl;
if (pFormat!=null)
Cal.Format=pFormat.toUpperCase();
exDateTime=document.getElementById(pCtrl).value;
if (exDateTime!="")//Parse Date String
{
var Sp1;//Index of Date Separator 1
var Sp2;//Index of Date Separator 2
var tSp1;//Index of Time Separator 1
var tSp1;//Index of Time Separator 2
var strMonth;
var strDate;
var strYear;
var intMonth;
var YearPattern;
var strHour;
var strMinute;
var strSecond;
//parse month
Sp1=exDateTime.indexOf(DateSeparator,0)
Sp2=exDateTime.indexOf(DateSeparator,(parseInt(Sp1)+1));
if ((Cal.Format.toUpperCase()=="DDMMYYYY") || (Cal.Format.toUpperCase()=="DDMMMYYYY"))
{
strMonth=exDateTime.substring(Sp1+1,Sp2);
strDate=exDateTime.substring(0,Sp1);
}
else if ((Cal.Format.toUpperCase()=="MMDDYYYY") || (Cal.Format.toUpperCase()=="MMMDDYYYY"))
{
strMonth=exDateTime.substring(0,Sp1);
strDate=exDateTime.substring(Sp1+1,Sp2);
}
if (isNaN(strMonth))
intMonth=Cal.GetMonthIndex(strMonth);
else
intMonth=parseInt(strMonth,10)-1;
if ((parseInt(intMonth,10)>=0) && (parseInt(intMonth,10)<12))
Cal.Month=intMonth;
//end parse month
//parse Date
if ((parseInt(strDate,10)<=Cal.GetMonDays()) && (parseInt(strDate,10)>=1))
Cal.Date=strDate;
//end parse Date
//parse year
strYear=exDateTime.substring(Sp2+1,Sp2+5);
YearPattern=/^d{4}$/;
if (YearPattern.test(strYear))
Cal.Year=parseInt(strYear,10);
//end parse year
//parse time
if (Cal.ShowTime==true)
{
tSp1=exDateTime.indexOf(":",0)
tSp2=exDateTime.indexOf(":",(parseInt(tSp1)+1));
strHour=exDateTime.substring(tSp1,(tSp1)-2);
Cal.SetHour(strHour);
strMinute=exDateTime.substring(tSp1+1,tSp2);
Cal.SetMinute(strMinute);
strSecond=exDateTime.substring(tSp2+1,tSp2+3);
Cal.SetSecond(strSecond);
}
}
winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,fullscreen=no,width=195,height=245,resizable=0,top="+cnTop+",left="+cnLeft);
docCal=winCal.document;
RenderCal();
}
function RenderCal()
{
var vCalHeader;
var vCalData;
var vCalTime;
var i;
var j;
var SelectStr;
var vDayCount=0;
var vFirstDay;
docCal.open();
docCal.writeln("<html><head><title>"+WindowTitle+"</title>");
docCal.writeln("<script>var winMain=window.opener;</script>");
docCal.writeln("</head><body background='"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");
vCalHeader="<table border=1 cellpadding=1 cellspacing=1 width='100%' align="center" valign="top"> ";
//Month Selector
vCalHeader+="<tr> <td colspan='7'><table border=0 width='100%' cellpadding=0 cellspacing=0><tr><td align='left'> ";
vCalHeader+="<select name="MonthSelector"> ";
for (i=0;i<12;i++)
{
if (i==Cal.Month)
SelectStr="Selected";
else
SelectStr="";
vCalHeader+="<option "+SelectStr+" value >"+MonthName[i]+" ";
}
vCalHeader+="</select></td>";
//Year selector
vCalHeader+=" <td align='right'><a href="#"><b><font color=""+YrSelColor+""><</font></b></a><font face="Verdana" color=""+YrSelColor+"" size=2><b> "+Cal.Year+" </b></font><a href="#"><b><font color=""+YrSelColor+"">></font></b></a></td></tr></table></td> ";
vCalHeader+="</tr>";
//Calendar header shows Month and Year
if (ShowMonthYear)
vCalHeader+="<tr><td colspan='7'><font face='Verdana' size='2' align='center' color='"+MonthYearColor+"'><b>"+Cal.GetMonthName(ShowLongMonth)+" "+Cal.Year+"</b></font></td></tr> ";
//Week day header
vCalHeader+="<tr bgcolor="+WeekHeadColor+">";
for (i=0;i<7;i++)
{
vCalHeader+="<td align='center'><font face='Verdana' size='2'>"+WeekDayName[i].substr(0,WeekChar)+"</font></td>";
}
vCalHeader+="</tr>";
docCal.write(vCalHeader);
//Calendar detail
CalDate=new Date(Cal.Year,Cal.Month);
CalDate.setDate(1);
vFirstDay=CalDate.getDay();
vCalData="<tr>";
for (i=0;i<vFirstDay;i++)
{
vCalData=vCalData+GenCell();
vDayCount=vDayCount+1;
}
for (j=1;j<=Cal.GetMonDays();j++)
{
var strCell;
vDayCount=vDayCount+1;
if ((j==dtToday.getDate())&&(Cal.Month==dtToday.getMonth())&&(Cal.Year==dtToday.getFullYear()))
strCell=GenCell(j,true,TodayColor);//Highlight today's date
else
{
if (j==Cal.Date)
{
strCell=GenCell(j,true,SelDateColor);
}
else
{
if (vDayCount%7==0)
strCell=GenCell(j,false,SaturdayColor);
else if ((vDayCount+6)%7==0)
strCell=GenCell(j,false,SundayColor);
else
strCell=GenCell(j,null,WeekDayColor);
}
}
vCalData=vCalData+strCell;
if((vDayCount%7==0)&&(j<Cal.GetMonDays()))
{
vCalData=vCalData+"</tr> <tr>";
}
}
docCal.writeln(vCalData);
//Time picker
if (Cal.ShowTime)
{
var showHour;
showHour=Cal.getShowHour();
vCalTime="<tr> <td colspan='7' align='center'>";
vCalTime+="<input type='text' name='hour' maxlength=2 size=1 value="+showHour+">";
vCalTime+=" : ";
vCalTime+="<input type='text' name='minute' maxlength=2 size=1 value="+Cal.Minutes+">";
vCalTime+=" : ";
vCalTime+="<input type='text' name='second' maxlength=2 size=1 value="+Cal.Seconds+">";
if (TimeMode==12)
{
var SelectAm =(parseInt(Cal.Hours,10)<12)? "Selected":"";
var SelectPm =(parseInt(Cal.Hours,10)>=12)? "Selected":"";
vCalTime+="<select name="ampm">";
vCalTime+="<option "+SelectAm+" value="AM">AM</option>";
vCalTime+="<option "+SelectPm+" value="PM">PM<option>";
vCalTime+="</select>";
}
vCalTime+=" </td> </tr>";
docCal.write(vCalTime);
}
//end time picker
docCal.writeln(" </table>");
docCal.writeln("</form></body></html>");
docCal.close();
}
function GenCell(pValue,pHighLight,pColor)//Generate table cell with value
{
var PValue;
var PCellStr;
var vColor;
var vHLstr1;//HighLight string
var vHlstr2;
var vTimeStr;
if (pValue==null)
PValue="";
else
PValue=pValue;
if (pColor!=null)
vColor="bgcolor=""+pColor+""";
else
vColor="";
if ((pHighLight!=null)&&(pHighLight))
{vHLstr1="color='red'><b>";vHLstr2="</b>";}
else
{vHLstr1=">";vHLstr2="";}
if (Cal.ShowTime)
{
vTimeStr="winMain.document.getElementById('"+Cal.Ctrl+"').value+=' '+"+"winMain.Cal.getShowHour()"+"+':'+"+"winMain.Cal.Minutes"+"+':'+"+"winMain.Cal.Seconds";
if (TimeMode==12)
vTimeStr+="+' '+winMain.Cal.AMorPM";
}
else
vTimeStr="";
PCellStr="<td "+vColor+" width="+CellWidth+" align='center'><font face='verdana' size='2'"+vHLstr1+"<a href="#"+Cal.Ctrl+"').value='"+Cal.FormatDate(PValue)+"';"+vTimeStr+";window.close();">"+PValue+"</a>"+vHLstr2+"</font></td>";
return PCellStr;
}
function Calendar(pDate,pCtrl)
{
//Properties
this.Date=pDate.getDate();//selected date
this.Month=pDate.getMonth();//selected month number
this.Year=pDate.getFullYear();//selected year in 4 digits
this.Hours=pDate.getHours();
if (pDate.getMinutes()<10)
this.Minutes="0"+pDate.getMinutes();
else
this.Minutes=pDate.getMinutes();
if (pDate.getSeconds()<10)
this.Seconds="0"+pDate.getSeconds();
else
this.Seconds=pDate.getSeconds();
this.MyWindow=winCal;
this.Ctrl=pCtrl;
this.Format="ddMMyyyy";
this.Separator=DateSeparator;
this.ShowTime=false;
if (pDate.getHours()<12)
this.AMorPM="AM";
else
this.AMorPM="PM";
}
function GetMonthIndex(shortMonthName)
{
for (i=0;i<12;i++)
{
if (MonthName[i].substring(0,3).toUpperCase()==shortMonthName.toUpperCase())
{ return i;}
}
}
Calendar.prototype.GetMonthIndex=GetMonthIndex;
function IncYear()
{ Cal.Year++;}
Calendar.prototype.IncYear=IncYear;
function DecYear()
{ Cal.Year--;}
Calendar.prototype.DecYear=DecYear;
function SwitchMth(intMth)
{ Cal.Month=intMth;}
Calendar.prototype.SwitchMth=SwitchMth;
function SetHour(intHour)
{
var MaxHour;
var MinHour;
if (TimeMode==24)
{ MaxHour=23;MinHour=0}
else if (TimeMode==12)
{ MaxHour=12;MinHour=1}
else
alert("TimeMode can only be 12 or 24");
var HourExp=new RegExp("^\d\d$");
if (HourExp.test(intHour) && (parseInt(intHour,10)<=MaxHour) && (parseInt(intHour,10)>=MinHour))
{
if ((TimeMode==12) && (Cal.AMorPM=="PM"))
{
if (parseInt(intHour,10)==12)
Cal.Hours=12;
else
Cal.Hours=parseInt(intHour,10)+12;
}
else if ((TimeMode==12) && (Cal.AMorPM=="AM"))
{
if (intHour==12)
intHour-=12;
Cal.Hours=parseInt(intHour,10);
}
else if (TimeMode==24)
Cal.Hours=parseInt(intHour,10);
}
}
Calendar.prototype.SetHour=SetHour;
function SetMinute(intMin)
{
var MinExp=new RegExp("^\d\d$");
if (MinExp.test(intMin) && (intMin<60))
Cal.Minutes=intMin;
}
Calendar.prototype.SetMinute=SetMinute;
function SetSecond(intSec)
{
var SecExp=new RegExp("^\d\d$");
if (SecExp.test(intSec) && (intSec<60))
Cal.Seconds=intSec;
}
Calendar.prototype.SetSecond=SetSecond;
function SetAmPm(pvalue)
{
this.AMorPM=pvalue;
if (pvalue=="PM")
{
this.Hours=(parseInt(this.Hours,10))+12;
if (this.Hours==24)
this.Hours=12;
}
else if (pvalue=="AM")
this.Hours-=12;
}
Calendar.prototype.SetAmPm=SetAmPm;
function getShowHour()
{
var finalHour;
if (TimeMode==12)
{
if (parseInt(this.Hours,10)==0)
{
this.AMorPM="AM";
finalHour=parseInt(this.Hours,10)+12;
}
else if (parseInt(this.Hours,10)==12)
{
this.AMorPM="PM";
finalHour=12;
}
else if (this.Hours>12)
{
this.AMorPM="PM";
if ((this.Hours-12)<10)
finalHour="0"+((parseInt(this.Hours,10))-12);
else
finalHour=parseInt(this.Hours,10)-12;
}
else
{
this.AMorPM="AM";
if (this.Hours<10)
finalHour="0"+parseInt(this.Hours,10);
else
finalHour=this.Hours;
}
}
else if (TimeMode==24)
{
if (this.Hours<10)
finalHour="0"+parseInt(this.Hours,10);
else
finalHour=this.Hours;
}
return finalHour;
}
Calendar.prototype.getShowHour=getShowHour;
function GetMonthName(IsLong)
{
var Month=MonthName[this.Month];
if (IsLong)
return Month;
else
return Month.substr(0,3);
}
Calendar.prototype.GetMonthName=GetMonthName;
function GetMonDays()//Get number of days in a month
{
var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (this.IsLeapYear())
{
DaysInMonth[1]=29;
}
return DaysInMonth[this.Month];
}
Calendar.prototype.GetMonDays=GetMonDays;
function IsLeapYear()
{
if ((this.Year%4)==0)
{
if ((this.Year%100==0) && (this.Year%400)!=0)
{
return false;
}
else
{
return true;
}
}
else
{
return false;
}
}
Calendar.prototype.IsLeapYear=IsLeapYear;
function FormatDate(pDate)
{
if (this.Format.toUpperCase()=="DDMMYYYY")
return (pDate+DateSeparator+(this.Month+1)+DateSeparator+this.Year);
else if (this.Format.toUpperCase()=="DDMMMYYYY")
return (pDate+DateSeparator+this.GetMonthName(false)+DateSeparator+this.Year);
else if (this.Format.toUpperCase()=="MMDDYYYY")
return ((this.Month+1)+DateSeparator+pDate+DateSeparator+this.Year);
else if (this.Format.toUpperCase()=="MMMDDYYYY")
return (this.GetMonthName(false)+DateSeparator+pDate+DateSeparator+this.Year);
}
Calendar.prototype.FormatDate=FormatDate;
I have more files please send mail id server not support to entire code
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.