Build a html form with the following elements. The form must be within a table structure....

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)

Expert Solution

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.

venereology answered 2 months ago

Build a html form (making use of CSS and Javascript) with the following elements. The form...

Build a html form (making use of CSS and Javascript) with the following elements. The form must have validations and within a table format. • Name: a text box where the content must start with 1 upper case characters and no special character (i.e. !, @, #, $, %, &, *). Number is not allowed. The text box must not be empty. • Module code: a text box where the content must start with 3 lower case alphabets and follows...

Create a form using the following HTML elements at a minimum. Style the form in your...

Create a form using the following HTML elements at a minimum. Style the form in your CSS. You do not need to include a form action (i.e. the form doesn't have to do anything - we're designing the front end of the form). textarea textbox input type of "email" select radio button checkbox submit button style at least three elements of your form in your stylesheet, including your submit button Use a comment to delineate the beginning and end of...

Question Block elements v.s. inline elements. <!DOCTYPE html> <html> <head> <style> body{ text-

Question Block elements v.s. inline elements. <!DOCTYPE html> <html> <head> <style> body{ text-align: center; } .textdiv { background-color: LightSlateGrey; width: 50%; } .imgdiv { background-color: PapayaWhip; width: 30%; } </style> </head> <body> <h2>Center Me</h2> <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p> <div class="textdiv"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...

Write a html program that containing at least the following elements: A heading A paragraph An...

Write a html program that containing at least the following elements: A heading A paragraph An ordinary image with link An imagemap with two clickable areas/hotsppots, link one to asignment1 and link the other to any available picture. USE INSTAGRAM WITH THE LINK FOR ONE

Create a website with html about raccons, just a simple html model to build off of...

Create a website with html about raccons, just a simple html model to build off of including multiple pages including a home, about us, and learn more page. Text filler not needed. Just the html structure.

Topic: HTML Styling Elements - CSS3 Write some HTML code that includes three Semantic HTML tags....

Topic: HTML Styling Elements - CSS3 Write some HTML code that includes three Semantic HTML tags. Describe the semantic meaning of each one you choose.

Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration"...

Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial value 0 A <button> tag labeled "Start" Script: When the user presses the button (1b), a function will begin that does the following: Reads the value from the input field (1a) Removes the <input> and <button> tags (1a & 1b) Creates a new <p> tag, initialized to show the input value Starts a timer that ticks down to zero. For every...

Create, test, and validate an HTML document that has a form with the following controls: a....

Create, test, and validate an HTML document that has a form with the following controls: a. A text box to collect the user's name b. Four checkboxes, one for each of the following items: i. Four 25-watt light bulbs for $2.39 ii. Eight 25-watt light bulbs for $4.29 iii. Four 25-watt long-life light bulbs for $3.95 iv. Eight 25-watt long-life light bulbs for $7.49 c. A collection of three radio buttons that are labeled as follows: i. Visa ii. Master...

Decide whether each pair of elements in the table below will form an ionic compound.

Decide whether each pair of elements in the table below will form an ionic compound. If they will write the empirical formula and name of the compound formed in the spaces provided.

Decide whether each pair of elements in the table below will form an ionic compound. If...

Decide whether each pair of elements in the table below will form an ionic compound. If they will, write the empirical formula and name of the compound formed in the spaces provided. element #1 element #2 Forms ionic compound? empirical formula of ionic compound name of ionic compound sodium iodine yes no barium oxygen yes no chlorine oxygen yes no oxygen rubidium yes no

Question