Question
JAVASCRIPT


Write a GUI application that has three labels, two text fields, and two buttons (with the titles Name and Age). When the prog
0 0
Add a comment Improve this question Transcribed image text
Answer #1

Ans)As ,it is given in the question javascript so Minimalistic UI is used,The main focus is on the code in javascript.Consider the below code and the correspond output are shown in the images attached.I have used three labels and 2 buttons and with the use of two text fields input is taken and with the help of function in the third label corresponding output is shown

//code starts

<!DOCTYPE html>
<html>
<head>
   <title>Student</title>
</head>
<body>
<label>Name: <input type="text" id="name"></label><br><br>
<label>Age: <input type="text" id="age"></label><br><br>
<label id="output"></label><br><br>
<button onclick="displayName()">Name</button>
<button onclick="displayAge()">Age</button>
   <script>
           const name = document.getElementById('name');
           const age = document.getElementById('age');
           const output = document.getElementById('output');
   function displayName() {
               output.innerText = 'CSC210 Student: ' + name.value;
   }
   function displayAge() {
   if (age.value > 60){
   output.innerText = 'Old';
   } else {
   output.innerText = 'Young';
   }
   }
   </script>
</body>
</html>

Output:

Name: Xyz Age: 56 CSC210 Student: Xyz Name AgeName: Xyz Age: 56 Young Name AgeName: Xyz Age: 65 CSC210 Student: Xyz Name AgeName: Xyz Age: 65 Old Name AgePlease upvote if you liked my answer

Add a comment
Know the answer?
Add Answer to:
JAVASCRIPT Write a GUI application that has three labels, two text fields, and two buttons (with...
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
  • Create a GUI or JavaFX application with two buttons and two labels. Add an Image Icon of your choice to the first button...

    Create a GUI or JavaFX application with two buttons and two labels. Add an Image Icon of your choice to the first button and the first label.

  • Develop a C# UWP application that would have: a text block that reads Enter Current Temperature:...

    Develop a C# UWP application that would have: a text block that reads Enter Current Temperature: the text box would follow the text block. 4 buttons:              One that reads Convert to Celsius              One that reads Convert to Fahrenheit              One that reads Clear              One that reads: Exit If the user clicks Convert to Celsius button, the temperature entered would be converted to Celsius and the converted temperature would be displayed. If the user clicks Convert to Fahrenheit...

  • Develop a temperature converter GUI JavaFX application that consists of two labels and two text fields....

    Develop a temperature converter GUI JavaFX application that consists of two labels and two text fields. Typing a temperature into the Celsius field and then pressing the "Enter" key causes the equivalent Fahrenheit temperature to appear in the Fahrenheit field and vice versa. Typing a non-numeric value into either field causes the following error dialog to appear: Formulas are simple:Celsius to Fahrenheit° F = 9/5 ( ° C) + 32Fahrenheit to Celsius° C = 5/9 (° F - 32). O®...

  • In Java please Create a GUI application that accepts student registration data. The GUI with valid...

    In Java please Create a GUI application that accepts student registration data. The GUI with valid data Shudent Fagtrtion x Rt Name Haold Moore Lst Name Yar of Brth 2001 Temporary PesowordHal200 Wlcome Harald Moore! RegsterEt The GUI with invalid data Shudent Fegtrtion DX Fect Name Haold Last Name ar of Brth 2001 Tempoay Pawod Haold 200 Pesse eer St and lact name and ye of bith Regster Et Specifications Use FXML to create the GUI The text box that...

  • Hello I just need the code for this GUI thanks Also computer screenshot of the code...

    Hello I just need the code for this GUI thanks Also computer screenshot of the code will be helpful Attached is an incomplete Python template file. button_multi_colour_changer_Q.py Download this file and complete it to solve the following problem. Consider the GUI below (4 Labels, 4 colour Buttons and a "RESET" Button) which has been produced with a Python program using the Tkinter library. MULTI Button Colour - a X MULTI Button Colour - O X Violet Purple Blue | Green...

  • Write a GUI-based Java application that implements the "Math Game" shown below. The program asks the...

    Write a GUI-based Java application that implements the "Math Game" shown below. The program asks the user to enter the answer of multiplying two one-digit random integers.  If the user enters a correct answer, a message will be displayed at the bottom of the frame, and the text field will be cleared.  If the user enters a wrong answer, a message will be displayed at the bottom of the frame asking for another answer.  If the user...

  • In Java. Write a GUI contact list application. The program should allow you to input names...

    In Java. Write a GUI contact list application. The program should allow you to input names and phone numbers. You should also be able to input a name and have it display the previously entered phone number. The GUI should look something like the following, although you are welcome to format it in any way that works. This should be a GUI application with a JFrame. The program should contain two arrays of Strings. One array will contain a list...

  • I. User Interface Create a JavaFX application with a graphical user interface (GUI) based on the...

    I. User Interface Create a JavaFX application with a graphical user interface (GUI) based on the attached “GUI Mock-Up”. Write code to display each of the following screens in the GUI: A. A main screen, showing the following controls: • buttons for “Add”, “Modify”, “Delete”, “Search” for parts and products, and “Exit” • lists for parts and products • text boxes for searching for parts and products • title labels for parts, products, and the application title B. An add...

  • Convert Project #1 into a GUI program, following the following requirements: Provide two text fields: one...

    Convert Project #1 into a GUI program, following the following requirements: Provide two text fields: one receives the length of the sequence, and the second receive the sequence (each number separated by a comma). There may, or may not, be space in between the comma and the number element. Provide a clear button that has an event listener attached to it. When pressed, the two text fields are emptied. The event listener should be defined and implemented as an anonymous...

  • GUI Programming Creating a Kilometer to Miles Converter Lab Assignment Objectives Understand the basics of tkinter...

    GUI Programming Creating a Kilometer to Miles Converter Lab Assignment Objectives Understand the basics of tkinter GUI development. Based on an informal application specification be able to develop a tkinter GUI program that contains one or more Label widgets. Be able to prompt user for input to a GUI application using a messagebox. Obtain user input into a GUI application that can be used for event driven selection. Be able to develop a tkinter GUI program that supports event-based widgets....

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