In: Computer Science
Build a html form with the following elements. The form must be within a table structure.
• Current date: a non-editable
textbox and should be in the format as shown (e.g.
12 October 2020 Monday 05:35 PM)
• Number of weeks till end of the year: a label showing the total
number of weeks from now till 31st Dec 2020. (e.g. 17 days is 2
weeks and 3 days)
I've used onload function, when body is loaded when you open the html page.
it displays the required data. i've used javascript.
below is the html code, javascript included inside it under <script> tag
<html>
<head>
<title>Weeks Left</title>
</head>
<body onload="myFunction()">
<form action="javascript:void(0);">
<table align="center" width="285" bgcolor="#e0e6ac"
border=1px>
<tr>
<td>Current Date: </td>
<td><input type="text" id="currDate"
readonly/></td>
</tr>
<tr>
<td>Weeks Left: </td>
<td><label
id="weeksLeft"></label></td>
</tr>
</table>
<script>
function myFunction() {
/*store todays date using new
Date()*/
var todayDate = new Date();
var today = new Date();
/*store date, month, year, day,
hours, minutes using methods getDate()...etc*/
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
var day = today.getDay();
var hours = today.getHours();
var minutes=today.getMinutes();
/*we will create the format DD
MONTH YEAR TIME as per below code.*/
/*for minutes add 0 to 1,2,3....9
to make it 01,02,...09*/
if(minutes<10){
minutes="0"+minutes;
}
/*convert it to month name as per
current month extracted in todays date*/
switch (mm) {
case 1:
mm = "January";
break;
case 2:
mm = "February";
break;
case 3:
mm = "March";
break;
case 4:
mm = "April";
break;
case 5:
mm = "May";
break;
case 6:
mm = "June";
break;
case 7:
mm = "July";
break;
case 8:
mm = "August";
break;
case 9:
mm = "September";
break;
case 10:
mm = "October";
break;
case 11:
mm = "November";
break;
case 12:
mm = "December";
break;
}
/*form the time as 06:02 PM
*/
var currTime=hours%12 + ":" + minutes + " " + ((hours>=12) ?
"PM" : "AM");
/*form the date and time */
today = dd + " " + mm + " " + yyyy+
" "+currTime;
/*now we will calculate the number
of days left till the end of this year*/
var date2=new Date("12/31/2020 23:59:59");
var diffDays=parseInt((date2 - todayDate) / (1000 * 60 * 60 * 24),
10);
/*calculate the number of weeks days divided by 7*/
var
weeks=parseInt(diffDays/7);
/*calculate the number of extra
days left -->days mod 7*/
var days=diffDays%7;
var weeksLeft=weeks+" weeks"+((days>0)?" and "+days+"
days":"");
document.getElementById('currDate').value= today;
document.getElementById('weeksLeft').innerHTML= weeksLeft;
}
</script>
</body>
</html>
when you open the above html in browser it may look like as below:
textfield is uneditable using readonly property of input text.
also label is used to display the required data.