HomeworkLib
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...

  • write an html file and a JavaScript file to show the due date of a book...

    write an html file and a JavaScript file to show the due date of a book checked out from a library. The html file should contain necessary elements to work with the JavaScript file described as follow. The JavaScript file needs to meet the following requirements: 1. It needs to have an object called “book” that have attributes called name, title, author and price. The values of these attributes are then written to the html file using JavaScript statements. 2....

  • 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...

  • A Simple Calculator Summary: Write a console program (character based) to do simple calculations (addition, subtraction,...

    A Simple Calculator Summary: Write a console program (character based) to do simple calculations (addition, subtraction, multiplication and division) of two numbers, using your understanding of Java. Description: You need to write a program that will display a menu when it is run. The menu gives five choices of operation: addition, subtraction, multiplication, division, and a last choice to exit the program. It then prompts the user to make a choice of the calculation they want to do. Once the...

  • I am working on a normal javascript program where i have to take two names and...

    I am working on a normal javascript program where i have to take two names and put them in array and print out in sorted order.But,when the user clicks the print button it should show the output,but if user clicks second time,it should start again(basically reload the page).I have done the part about userinput and sorting and printing,but couldn't get the function of when user clicks button second time. <!DOCTYPE html> <html> <body> <input type="text" id="Name1" value=""><br> <input type="text" id="Name2"...

  • 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...

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