Question

Type a web page with content about Internet Technologies Membership that has the following: A.Form: Use...

Type a web page with content about Internet Technologies Membership that has the following:

A.Form: Use the correct HTML tags to define aform in the HTML document that will allow auser to enter information about members of a club that learns new Internet Technologies. The form should havethe following:

1)A label for each textbox of “Full name”, “Date of birth”, and “Gender”.

2)Three text boxesof full name, date of birth and gender.

3)A text area (you can make it 10 lines and 100 character positions but different dimensions are okay)

4)Three buttons for NEXT, DISPLAY, and CLEAR

B.JavaScript: Declare an array that will store name-date-gender entries for each member.Feel free to choose a good name for your array.Write two functions as follows:

(1) A saveMember function that will get the text typed in the text boxes and assign to an array position.

(2) A displayMembers function that takes all members in the array and assign them to the text area, one at a timeusing a loop.

C.Input validation: All years should be less than 1998 (we don’t want members who are less than 18 years old)

D.Event handling –on button clickButton clicks should be handled as follows:

(1) When the NEXT button is clicked, the saveMember function should be called (invoked)

(2) When the DISPLAY button is clicked, the displayMembers function should be called (invoked)

(3) When the RESET button is clicked, the text boxes should be cleared and the array should be erased

0 0
Add a comment Improve this question Transcribed image text
Answer #1

<!doctype html>

<html>

<head>

    <title>Internet Technologies</title>

</head>

<body>

    <h1>Internet Technologies Membership</h1>

    <form id="membershipForm">

        <div>

            Full Name:<br>

            <input type="text" id="fullname">

            <br>

            Date of Birth:<br>

            <input type="date" id="dateofbirth" max="1997-12-31">

            <br>

            Gender:<br>

            <input type="text" id="gender">

            <br>

            <textarea rows="10" cols="100" id="members">

        </textarea>

            <br>

            <button type="button" onclick="saveMember()">NEXT</button>

            <button type="button" onclick="displayMembers()">DISPLAY</button>

            <button type="button" onclick="resetMembers()">CLEAR</button>

        </div>

    </form>

</body>

<script>

    var members = [];

    function saveMember() {

        var member = {};

        member.fullName = document.getElementById("fullname").value;

        member.dateOfBirth = document.getElementById("dateofbirth").value;

        member.gender = document.getElementById("gender").value;

        members.push(member);

    }

    function displayMembers() {

        var displayMembers = '';

        for (var i = 0; i < members.length; i++) {

            displayMembers = displayMembers.concat(members[i].fullName, ",", members[i].dateOfBirth, ",", members[i].gender, "\n");

        }

        document.getElementById("members").innerHTML = displayMembers;

    }

    function resetMembers() {

        document.getElementById("membershipForm").reset();

        document.getElementById("members").value = "";

        members = [];

    }

</script>

</html>

Add a comment
Know the answer?
Add Answer to:
Type a web page with content about Internet Technologies Membership that has the following: A.Form: Use...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • for Javascript, JQuery When the page is first opened a user will see the name field...

    for Javascript, JQuery When the page is first opened a user will see the name field and the three vacation images to the left of the page. The page should behave according to the following rules. 1. When a user's mouse pointer goes over any image, that image's border will change to be "outset 10px" and when the mouse pointer leaves that image it's border will change to "none". 2. When the user clicks a "Vacation" image on the left,...

  • NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There is a...

    NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There is a place in the HTML reserved for < li > elements under the heading “Shopping List” Write a javascript program that will cause whatever the user inputs to be placed in a newly -created < li > tag and the tag placed inside the < ul > element whenever the user clicks the button Your program must not create any < li > tag is...

  • In this exercise, you’ll add code to a form that converts the value the user enters...

    In this exercise, you’ll add code to a form that converts the value the user enters based on the selected conversion type. The application should handle the following conversions: 1. Open the Conversions project. Display the code for the form, and notice the rectangular array whose rows contain the value to be displayed in the combo box, the text for the labels that identify the two text boxes, and the multiplier for the conversion as shown above. Note: An array...

  • Design a program using Python and using from flask Import flask that generates a lottery number...

    Design a program using Python and using from flask Import flask that generates a lottery number but in a website.. The program should have an Integer array with 9 elements. Write a loop that steps through the array, randomly generating a number in the range of 0 through 42 for each element. (Use the random function) Then write another loop that displays the contents of the array. Each number should be displayed as a list, the numbers should be generated...

  • Create an HTML5 page that contains a form to collect the following data. The text in...

    Create an HTML5 page that contains a form to collect the following data. The text in bold indicates the id value that should be assigned to each html control: Product (drop down list) product – iPad, iPhone 6S, Galaxy 5S, Moto X, and so on Quantity (number) quantity Unit price (number) unit_price Discount (%)(number) discount_rate Date (date)   order_date First Name (text box)   first_name Last Name (text box)   last_name Payment type (drop down list)   payment_type – Visa, Master, Discover, Amex, and...

  • Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () =>...

    Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () => { console.log("You clicked?"); }); let button = document.querySelector("button"); button.addEventListener("click", () => { console.log("First Button clicked."); }); // How can we modify this so that it will occur when the 2nd button is clicked? // We need to use querySelectorAll which will produce a nodelist/array of all the buttons. Then we can reference which button we want to apply the click event using [] with...

  • Consider the attached Registration form. Use jQuery to: 1) Change the "Search" link on the left...

    Consider the attached Registration form. Use jQuery to: 1) Change the "Search" link on the left to a button that when clicked, hide all the fields on the form and display the text "This is a search feature..." 2) Display "required" in every input field upon loading the page 3) When the user fills the form and clicks "Login", the values inputted should be displayed in the empty row (under Login) of the page. The display should be in the...

  • Javascript to edit a HTML file. Where to begin? <!doctype html> <html>    <head>      <meta charset="utf-8">      <title>TODO:...

    Javascript to edit a HTML file. Where to begin? <!doctype html> <html>    <head>      <meta charset="utf-8">      <title>TODO: Change The Title</title>    </head>    <body>      <h1></h1>      <p>First paragraph.</p>      <p class="intro">Second <span>paragraph</span>.</p>      <button id="start">Start</button>      <main> </main>      <!--       Test 6: DOM Programming       You MAY consult the notes for week 7, but you MAY NOT discuss this test or       your code with any other students.  All work must be your own.       Instructions:              1. Put all solution code in a file named solution.js.  When you upload your          solution to...

  • in c++ please RFIDs and lot Internet of things lloT) is one of the hottest technologies...

    in c++ please RFIDs and lot Internet of things lloT) is one of the hottest technologies at the moment. The concept of loT is to provide objects with unique identifiers (UIDs) and the ability to transfer their date over a network without requiring human interaction. Radio frequency identification system (RFID) is a technology that aids computers to identify objects and record their metadata By connecting RFID readers to the Internet, it will be able to send objects' date over the...

  • For this program you need to take the following data and convert it into an array...

    For this program you need to take the following data and convert it into an array literal of Javascript object literals, where each object literal has three properties: a destination, a number of miles, and a number of gallons as shown below. You need to assign the array of objects to a variable, like trips, Your array of objects cannot contain the mpg value. The value for miles per gallon must be calculated by the function called when the button...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT