ZuoTi.Pro
Question

Write a calculator program using JavaScript in HTML in the same HTML file. (There will only...

Write a calculator program using JavaScript in HTML in the same HTML file. (There will only be 1 HTML file containing everything that you use for this program.)

*************JavaScript Functions should be written in the HTML <head> .............. </head> tag, ****************

(Please be mindful of the formatting of the text of your program. Meaning that do not copy paste everything in a single line. Add clear comments for a better understanding of your program)

as follows

Assignment: create a form that will hold the entire calculator with the following fields. Where:

  1. An input text that is used to hold the value.
  2. Ten buttons, the first one for '0', the second for '1', the third for '2' and so on, with the last being '9'. When any of these buttions is pressed, the value in the input text should be updated and shown.
  3. Four more buttons '+', '-', '*' and '/' for addition, subtraction, multiplication and division. These should be used for the addition, subtraction, multiplication and division operations, respectively.
  4. A button "." that is used to create a decimal value.
    Note: The user should be able to use a button only once for any number. That is, something "3.4.5" is an invalid number and should not be allowed.
  5. A button "+/-" that is supposed to toggle the value of the current number from positive to negative and negative to positive.
  6. A button '=' that should show the updated value (result) in the input text.
    Note: You can use eval function on the input text value to find the result
  7. A button called 'C' that is used to clear the value in the input text.

Helpful Notes to keep in mind while writing your program:

  1. You can add two numbers (e.g., 25.34 + 30.12) at a time or multiple numbers (25.34 + 30.12 + 11.9 + 36 + ..) at a time.
  2. If you are adding multiple numbers at a time, you need to show all the numbers in the input box (25.34 + 30.12 + 11.9 + 36 + ..) and only the result after the "=" is pressed.
  3. If you are adding two numbers at a time, you can show both the numbers (e.g. 25.34 + 20.12) on the screen or one at a time (e.g., show 25.34 first, then show only 30.12 after the "+" symbols is pressed). Show the result after the "=" is showed.
  4. You can store the numbers in a local variable or evaluate them from the text input field using "eval" function.
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

<html>
<head>
   <script>
       //function that display value
       function disply(val)
       {
           if (val=="+/-") {
               let a = document.getElementById("result").value
               let b = -(a)
               document.getElementById("result").value=b
           }
           else {
               document.getElementById("result").value+=val  
           }
       }
      
       //function that evaluates the digit and return result
       function solve()
       {
           let x = document.getElementById("result").value
           let y = eval(x)
           document.getElementById("result").value = y
       }
      
       //function that clear the display
       function cler()
       {
           document.getElementById("result").value = ""
       }
   </script>
   <!-- for styling -->
   <style>
       .title{
       margin-bottom: 10px;
       text-align:center;
       width: 210px;
       border: solid black 2px;
       }

       input[type="button"]
       {
       color: black;
       border: solid black 2px;
       width:100%
       }

       input[type="text"]
       {
       background-color:white;
       border: solid black 2px;
       width:100%
       }
   </style>
</head>
<!-- create table -->
<body>

   <table border="1">
       <tr>
           <td colspan="3"><input type="text" id="result"/></td>
           <!-- cler() function will call cler to clear all value -->
           <td><input type="button" value="c" onclick="cler()"/> </td>
       </tr>
       <tr>
           <!-- create button and assign value to each button -->
           <!-- disply("1") will call function disply to display value -->
           <td><input type="button" value="1" onclick="disply('1')"/> </td>
           <td><input type="button" value="2" onclick="disply('2')"/> </td>
           <td><input type="button" value="3" onclick="disply('3')"/> </td>
           <td><input type="button" value="/" onclick="disply('/')"/> </td>
       </tr>
       <tr>
           <td><input type="button" value="4" onclick="disply('4')"/> </td>
           <td><input type="button" value="5" onclick="disply('5')"/> </td>
           <td><input type="button" value="6" onclick="disply('6')"/> </td>
           <td><input type="button" value="-" onclick="disply('-')"/> </td>
       </tr>
       <tr>
           <td><input type="button" value="7" onclick="disply('7')"/> </td>
           <td><input type="button" value="8" onclick="disply('8')"/> </td>
           <td><input type="button" value="9" onclick="disply('9')"/> </td>
           <td><input type="button" value="+" onclick="disply('+')"/> </td>
       </tr>
       <tr>
           <td><input type="button" value="." onclick="disply('.')"/> </td>
           <td><input type="button" value="0" onclick="disply('0')"/> </td>
           <!-- solve function call function solve to evaluate value -->
           <td><input type="button" value="=" onclick="solve()"/> </td>
           <td><input type="button" value="*" onclick="disply('*')"/> </td>
       </tr>
       <tr>
           <td colspan="4"><input type="button" value="+/-" onclick="disply('+/-')"/> </td>      
       </tr>
   </table>
</body>
</html>

output:

0 0
Add a comment
Know the answer?
Add Answer to:
Write a calculator program using JavaScript in HTML in the same HTML file. (There will only...
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. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Write a html javascript program to do the following: the user inputs a number, for example,...

    Write a html javascript program to do the following: the user inputs a number, for example, 50 user presses a button, labeled START the program creates 50 random buttons around the browser window each button should be placed at a random location each button should be labeled with a random number between 1 and 50 add the following features every 2 seconds, move each button around by increment or decrementing its location if the user clicks on a button, change...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • Using HTML and JavaScript. For this assignment you should submit a single zip file that contains...

    Using HTML and JavaScript. For this assignment you should submit a single zip file that contains the following two files: index.html script.js index.html should be a skeleton HTML page. So it should have the following tags: doctype html head meta title body script If you were to open index.html without including the associated JavaScript it should be entirely blank. You should then use JavaScript to create all of the content of this page and append it to the body of...

  • javascript

    In this project you will write the JavaScript code to create a calculator. Good thing is that everyone knows how the calculator works. It is a challenging project, give yourself lots of time to complete it.1. You are provided with an HTML, and CSS files.. Look at these files to understandhow to use them and modify them if needed based on your code. (Note: You can adddifferent selector (id, class) in HTML ONLY and cannot make any changes to CSS.)Create...

  • Calculator = 0.01 Calculate . Add O subtract O Multiply ODvide uttons on the right determine the operation that is perf...

    Calculator = 0.01 Calculate . Add O subtract O Multiply ODvide uttons on the right determine the operation that is performed on the numbers. For example, the following image shows values 12 and 3 are entered in the ion in selected. When the Calculate button is pressed, the result of the addition operation is shown after the equal sign ( In this example, the result is 1 Calculator 12 .15.01 Calculate | ⓔAdd subtract。Multiply O Divide g images show the...

  • Write a C++ Program that simulates a basic calculator using functions which performs the operations of...

    Write a C++ Program that simulates a basic calculator using functions which performs the operations of Addition, Subtraction, multiplication, and Division. ( make sure you cover the case to avoid division by a zero) Display a menu for list of operations that can be calculated and get the input from user about his choice of calculation. Based on user choice of operation, take the input of number/numbers from user. Assume all input values are of type double. Calculations must be...

  • Write a C++ Program that simulates a basic calculator using functions which performs the operations of...

    Write a C++ Program that simulates a basic calculator using functions which performs the operations of Addition, Subtraction, multiplication, and Division. ( make sure you cover the case to avoid division by a zero) Display a menu for the list of operations that can be calculated and get the input from the user about his choice of calculation. Based on user choice of operation, take the input of number/numbers from user. Assume all input values are of type double. Calculations...

  • Write a simple JavaScript program that will recursively walk the DOM for an associated HTML file ...

    write a simple JavaScript program that will recursively walk the DOM for an associated HTML file and print the types of the elements encountered (embedded data need not be printed, we are just interested in the structure), each preceded by an integer reflecting the element’s nesting level within the hierarchical structure of the HTML document. Thus,<HEAD>and <BODY> would be at the second level (‘2’) while <HTML>, would naturally be at the first level (‘1’). You should also print the closing...

  • Hello, Using HTML/Javascript, can somebody help me create an array and fill with random numbers 1-100,...

    Hello, Using HTML/Javascript, can somebody help me create an array and fill with random numbers 1-100, per the number entered in the "Create Array" box of my html, and have it display when the "Create Array" box is clicked? Here is the HTML for this portion: Thank you! <table style="width: 850px; height: 154px;" border="0"> <tbody> <tr> <td>Enter Array Size:<input style="width: 50px;" type="textbox" value="100" /><input type="button" value="Create Array" /></td> </tr> This is what the HTML looks like: Enter Array Size:100 Create...

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