Question

In HTML and Javacript: Create three columns. Column #1: Include input fields for the following... Text...

  • In HTML and Javacript: Create three columns.
    • Column #1: Include input fields for the following...
      • Text field (with labelling) to retrieve a student's FIRST name
      • Text field (with labelling) to retrieve a student's last name
      • Text field (with labelling) to retrieve a student's id (number)
      • A checkbox for country designation with no check designating a "Domestic" student and checked designating an "International" student. A text field should be placed beside or under the check box with the text field containing either "Domestic" or "International" depending on the state of the checkbox. Must be set on load and changed whenever the checkbox is selected.
  • Column #2: Include buttons for the following...
    • An image button to save data to local storage:
      • First name storage that includes the data entered in the first name input field
      • Last name storage that includes the data entered in the last name input field
      • ID storage that includes the data entered in the ID input field
      • Based on the checkbox state, save either "Domestic" or "International" into storage (your choice of key name)
    • An image button to retrieve data from local storage and place data retrieved in Column #3 (see below for output formatting); Must include an alert box to inform the user the image button was selected.
    • An image button to selectively clear the country designation key/value pair in local storage. Must include an alert box to inform the user the button was selected.
  • Column #3: Include output areas for the following that are filled in when retrieve button is selected from Column #2...
    • An output area for name; Must use ES6 to include: Student Name: last name, first name
    • An output area for student id (number); Must use ES6 to include: Student Number: student id
    • An output area for country designation; Must use ES6 to include: Domestic OR International (based on value from local storage) Student
Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

<!DOCTYPE html>

<head>

    <title></title>

    <style>

    .row {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    padding: 0%;

}

    .row::after{

    display: table;

    clear: both;

    content: "";

}

    .col-12{

    width: 100%;

    margin-bottom: 10px;

}

    </style>

</head>

<body>

    <div class="row">

    <div class="col-12">

    <form>

    First Name:<input id="fName" type="text" placeholder="Enter your first name">

    <br>

    Last Name:<input id="lName" type="text" placeholder="Enter your lirst name">

    <br>

    Students id:<input id="stuId" type="number" placeholder="Enter your student id">

    <br>

    Country Designation:

    International student<input id="cDesig" type="checkbox" >

    </form>

    </div>

    <div class="col-12">

        <form>

            <input type="image" src="fName.jpg" value="First Name" onclick="FANME()"><br>

            <input type="image" src="lName.jpg" value="Last Name" onclick="LNAME()"><br>

            <input type="image" src="stuId.jpg" value="Student's Id" onclick="STUID"><br>

            <input type="image" src="countrydesig.jpg" value="Country Designation" onclick="CDESIG()">

            <br><br><button onclick="Output()">RETRIEVE</button>

        </form>

    </div>

    <div class="col-12">

        <form>

         <h2 id="output">

            

         </h2>

        </form>

    </div>

    </div>

    <script>

        function FNAME(){

        var fName=document.getElementById('fName');

        document.write(fName.value);

        event.preventDefault();

        }

        function LNAME(){

        var lName=document.getElementById('lName');

        }

        function STUID(){

        var sId=document.getElementById('stuId');

        }

        function CDESIG(){

            var temp=document.getElementById('cDesig');

            var cDesig="";

            if(temp.checked){

                cDesig="International Student";

            }

            else{

                cDesig="Domestic Student";

            }

        }

        function Output(){

            var out=document.getElementById('output');

            var fName=document.getElementById('fName');

            var lName=document.getElementById('lName');

            var sId=document.getElementById('stuId');

            var temp=document.getElementById('cDesig');

            var cDesig="";

            if(temp.checked){

                cDesig="International Student";

            }

            else{

                cDesig="Domestic Student";

            }

            out.innerText="First Name:"+fName.value+"\nLast Name:"+lName.value+"\nStudent Id:"+sId.value+"\nCountry Designation:"+cDesig;

            event.preventDefault();

        }

    </script>

</body>

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
Use the Donor database attached to the assignment answer the following: Question 1: Create a block...
Use the Donor database attached to the assignment answer the following: Question 1: Create a block to retrieve and display pledge and payment information for a specific donor. For each pledge payment from the donor, display the pledge ID, pledge amount, number of monthly payments, payment date, and payment amount. The list should be sorted by pledge ID and then by payment date. For the first payment made for each pledge, display “first payment” on that output row. 2 marks...
Part A. Input Validation (Name your C program yourLastName_yourFirstName_Lab4a.c) 1. Place the code you developed in...
Part A. Input Validation (Name your C program yourLastName_yourFirstName_Lab4a.c) 1. Place the code you developed in Lab 2 to obtain a diameter value from the user and compute the volume of a sphere (we assumed that to be the shape of a balloon) in a new program, and implement the following restriction on the user’s input: the user should enter a value for the diameter which is at least 8 inches but not larger than 60 inches. Using an if-else...
Write a 4-6 sentence summary explaining how you can use STL templates to create real world...
Write a 4-6 sentence summary explaining how you can use STL templates to create real world applications. In your summary, provide an example of a software project that you can create using STL templates and provide a brief explanation of the STL templates you will use to create this project. After that you will implement the software project you described . Your application must be a unique project and must incorporate the use of an STL container and/or iterator and...
Please answer the following Case analysis questions 1-How is New Balance performing compared to its primary...
Please answer the following Case analysis questions 1-How is New Balance performing compared to its primary rivals? How will the acquisition of Reebok by Adidas impact the structure of the athletic shoe industry? Is this likely to be favorable or unfavorable for New Balance? 2- What issues does New Balance management need to address? 3-What recommendations would you make to New Balance Management? What does New Balance need to do to continue to be successful? Should management continue to invest...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT