JS - HTML DOM Interaction - Calculator with Form and JS #69

akash-coded · 2022-07-10T13:00:00Z

akash-coded
Jul 10, 2022
Maintainer

Basic Calculator Webpage

You have to create a calculator webpage with two input fields for two numbers, and a dropdown for the operator. When the Calculate button is clicked, the result should appear on the page.

Code for console-based menu-driven calculator

console.log("Welcome to the best calculator out there!");
let continueAgain = false;
loop: do {
  console.log("Enter two numbers for the calculation...");
  let num1 = parseInt(prompt("Enter the 1st number:"));
  let num2 = parseInt(prompt("Enter the 2nd number:"));

  console.log("Choose the operation to be performed::");
  console.log("1. Addition");
  console.log("2. Subtraction");
  console.log("3. Multiplication");
  console.log("4. Division");
  console.log("5. Modulus");
  console.log("6. Quit");
  console.log("Enter choice to continue...");
  let operation = parseInt(prompt("Enter choice[1-6]:"));

  let result = null;
  switch (operation) {
    case 1:
      result = num1 + num2;
      break;
    case 2:
      result = num1 - num2;
      break;
    case 3:
      result = num1 * num2;
      break;
    case 4:
      result = num1 / num2;
      break;
    case 5:
      result = num1 % num2;
      break;
    case 6:
      break loop;
    default:
      alert("Invalid choice!");
      break;
  }
  console.log("Result = " + result);
  console.log("Choose whether to continue...");
  continueAgain = confirm("Do you want to continue?");
} while (continueAgain);
console.log("Goodbye.");

Update parts of the above code such as the use of console.log() is eliminated and it is replaced with HTML DOM interaction via the document.write() or the document.getElementById().innerText = val operations.

Hints

Demo code for reading HTML form inputs via JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS Document Input</title>
  </head>
  <body>
    <h1>HTML Webpage with a Paragraph and a Form</h1>

    <p id="myParagraph">This is the text of my paragraph.</p>

    <form action="#" onSubmit="event.preventDefault(); calculate();">
      <input type="number" id="num1" placeholder="1st number" />
      <input type="number" id="num2" placeholder="2nd number" />
      <input type="submit" value="Calculate" />
    </form>

    <script>
      let paragraphText = document.getElementById("myParagraph").innerText;
      console.log(paragraphText);

      function calculate() {
        event.preventDefault();
        event.stopPropagation();

        let num1 = document.getElementById("num1").value;
        let num2 = document.getElementById("num2").value;

        console.log(num1 + ", " + num2);

        return false;
      }
    </script>
  </body>
</html>

Demo code for updating the HTML DOM via JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS Document Write</title>
  </head>
  <body>
    <h1 id="myHeading"></h1>

    <script>
      document.getElementById("myHeading").innerText = "Hello, world";
      document.write("<p>This is a paragraph.</p>");
    </script>
  </body>
</html>

Objective

The goal is to display the outputs on the webpage instead of the browser console.

shubhamk-coder · 2022-07-12T20:22:51Z

shubhamk-coder
Jul 12, 2022

Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <style>
      #mainContent {
        margin-bottom: 5px;
        padding-bottom: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Calculator</h1>
    <main id="mainContent"></main>
    <h3 id="result"></h3>
    <form action="#" onSubmit="event.preventDefault(); calculate();">
      <input type="number" id="num1" placeholder="1st number" />
      <input type="number" id="num2" placeholder="2nd number" />
      <input type="number" id="choice" placeholder="Enter Choice" />
      <input type="submit" value="Calculate" />
    </form>

    <script>
      document.getElementById("mainContent").innerText =
        "Welcome to the best calculator out there!";
      document.write("<p> Choose the operation[1-6] to be performed:</p>");
      document.write("<p> 1. Addition</p>");
      document.write("<p> 2. Subtraction</p>");
      document.write("<p> 3. Multiplication</p>");
      document.write("<p> 4. Division</p>");
      document.write("<p> 5. Modulus</p>");
      document.write("<p> 6. Quit</p>");
      document.write("<p> Enter choice to continue...</p>");

      function calculate() {
        event.preventDefault();
        event.stopPropagation();
        let num1 = parseInt(document.getElementById("num1").value);
        let num2 = parseInt(document.getElementById("num2").value);
        let operation = parseInt(document.getElementById("choice").value);
        let choice = null;
        switch (operation) {
          case 1:
            result = num1 + num2;
            break;
          case 2:
            result = num1 - num2;
            break;
          case 3:
            result = num1 * num2;
            break;
          case 4:
            result = num1 / num2;
            break;
          case 5:
            result = num1 % num2;
            break;
          case 6:
            alert("Good Bye!");
            break;
          default:
            alert("Invalid choice!");
            break;
        }
        if (choice < 6 || choice > 0) {
          document.getElementById("result").innerText = "Result = " + result;
        }
        document.getElementById("num1").value = "";
        document.getElementById("num2").value = "";
        document.getElementById("choice").value = "";
      }
    </script>
  </body>
</html>

Screenshots

Addition

Subtraction

Multiplication

Division

Modulo

Quit

0 replies

Neethumar · 2022-07-14T13:17:48Z

Neethumar
Jul 14, 2022

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Menu-driven Calculator</title>
</head>

<body>
    <h1 id="myHeading">Welcome to the best calculator out there!</h1>
    <form action="#" id="inp-form" onSubmit="event.preventDefault(); calculate();">
        <p id="Menu"></p>
        <input id="num1" placeholder="Enter the 1st number:" type="number">
        <input id="num2" placeholder="Enter the 2nd number:" type="number">

        <p id="Menu-options"></p>
        <p id="choice-msg"></p>

        <input id="opt" placeholder="Enter your choice" type="number">
        <input type="submit" value="Calculate" />
        
        <h2 id="result"></h2>
    </form>
    <script>
        document.getElementById("Menu").innerText = "Enter two numbers for the calculation...";
        document.getElementById("Menu-options").innerText = "Choose the operation[1-6] to be performed:\n1. Addition\n2. Subtraction\n3. Multiplication\n4. Division\n5. Modulus\n6. Quit"
        document.getElementById("choice-msg").innerText = "Enter choice to continue...";
        function calculate() {
            event.preventDefault();
            event.stopPropagation();

            let operation = parseInt(document.getElementById("opt").value);
            let num1 = parseInt(document.getElementById("num1").value);
            let num2 = parseInt(document.getElementById("num2").value);
            let result = null;

            switch (operation) {
                case 1:
                    result = num1 + num2;
                    break;
                case 2:
                    result = num1 - num2;
                    break;
                case 3:
                    result = num1 * num2;
                    break;
                case 4:
                    result = num1 / num2;
                    break;
                case 5:
                    result = num1 % num2;
                    break;
                case 6:
                    break;
                default:
                    alert("Invalid choice!");
                    break;
            }
            if (result)
                document.getElementById("result").innerText = "Result is: " + result;
            else {
                document.getElementById("result").innerText = "GoodBye!"
            }
            document.getElementById("inp-form").reset();
        }
    </script>
</body>
</html>

Screenshots

Addition

Subtraction

Multiplication

Division

Modulus

Quit

0 replies

Divyam-09 · 2022-07-15T13:18:25Z

Divyam-09
Jul 15, 2022

Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Menu driven Calculator</title>
  </head>
  <body>
    <h1>Welcome to the best calculator out there!</h1>
      <form action="#" id = "Calculatorform" onSubmit="event.preventDefault(); calculate();">
        
      <p id="inputs"></p>
        <label><b>Enter First number</b></label>
        <input type="number" id="num1"></input><br><br>
        <label><b>Enter second number</b></label>
        <input type="number" id="num2"></input>
        <p id="operationtype"></p>
        <p id="choice"></p>
        <input type="number" id="operation" placeholder="Enter your choice"></input>
        <input type="submit" value="Calculate" />
       <h3 id="result"></h3>
        
      <script>
        document.getElementById("inputs").innerText="Enter two numbers to calculation"
        document.write("<p> <b>Choose the operation[1-6] to be performed:</b></p>");
        document.write("<p>1. Addition</p>");
        document.write("<p>2. Subtraction</p>");
        document.write("<p>3. Multiplication</p>");
        document.write("<p>4. Division</p>");
        document.write("<p>5. Modulus</p>");
        document.write("<p>6. Exit</p>");

        document.getElementById("choice").innerText = "Enter choice to continue...";
       

        function calculate() {
            event.preventDefault();
            event.stopPropagation();

            let operation = parseInt(document.getElementById("operation").value);
            let num1=parseInt(document.getElementById("num1").value);
            let num2=parseInt(document.getElementById("num2").value);

            let result=null;

            switch (operation) {
    case 1:
      result = num1 + num2;
      break;
    case 2:
      result = num1 - num2;
      break;
    case 3:
      result = num1 * num2;
      break;
    case 4:
      result = num1 / num2;
      break;
    case 5:
      result = num1 % num2;
      break;
    case 6:
      break;
    default:
      alert("Invalid choice!");
      break;
            }

      if(result)
           document.getElementById("result").innerText = "result is: " + result
           else{
            document.getElementById("result").innerText="Good bye"
           }
           document.getElementById("Calculatorform").reset();
 }
      </script>
      </body>
      </html>

Screenshot

1.Addition

2.Subtraction

Multiplication

Division

Modulus

Quit

0 replies

Amrita-12345 · 2022-07-18T08:04:45Z

Amrita-12345
Jul 18, 2022

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous"
  />
</head>
<body>
    
        <div class="container  py-5">
            <div class="row d-flex justify-content-center align-items-center ">
                <div class="col-12 col-md-8 col-lg-6 col-xl-5
                 bg-primary text-white p-3 text-center" 
                 style="border-radius: 1rem; ">
       <h2 class="fw-bold mb-2 mt-2 text-uppercase">Calculator</h2>
                
       <form action="#" onSubmit="event.preventDefault(); ">
       <div class="form-inline d-flex justify-content-center align-items-center">
       <div class="form-group my-2 ">
        <label class="h4">Value-1</label>
        <input style="margin-left:25px" type="number" class="form-control" id="val1"  name="val1">
      </div>
      <div class="form-group my-2 ">
        <label class="h4">Value-2</label>
        <input  style="margin-left:25px" type="number" class="form-control" id="val2"  name="val2">
      </div>
     <div class="form-group text-center my-2">
        <label for="choose" class="h4">Operators : </label>
        <select id="choose" class="form-control" style="margin-left:10px">
          <option style="display: none;">choose</option>
          <option>+</option>
          <option>-</option>
          <option>*</option>
          <option>/</option>
      </select>
      </div>
       <div class="form-group my-2 ">
       <label class="h4">Result<label> 
     <input  style="margin-left:40px" type="number" class="form-control" readonly 
      id="result"  name="result"> 
      </div> 
      <div class="form-group my-2 ">
      <button onclick="calculate()" class="btn btn-outline-light btn-lg px-5 mb-4 form-control" >Calculate</button>
      <button style="margin-left:40px"  class="btn btn-outline-light btn-lg px-5 mb-4 form-control" 
      type="reset" id="reset" value="Reset" name="reset">Reset</button>
     </div>
       </div>
       </form>
  </div>
</div> 
 </div> 
<script>
    function calculate() 
    {
        event.preventDefault();
        event.stopPropagation();
        let num1 = parseInt(document.getElementById("val1").value);
        let num2 = parseInt(document.getElementById("val2").value);
        let operation = document.getElementById("choose").value;
        let choose = null;
        switch(operation)
        {
          case "+":
            let add = (function (a, b) {
              return a + b;
            })(num1, num2);
            var txt=document.getElementById("result").value;
            txt=txt+add;
            document.getElementById("result").value = txt;
              
            break;
          case "-":
            let sub = (function (a, b) {
              return a - b;
            })(num1, num2);
            var txt=document.getElementById("result").value;
            txt=txt+sub;
            document.getElementById("result").value = txt;
            break;
          case "*":
            let mul = (function (a, b) {
              return a * b;
            })(num1, num2);
            var txt=document.getElementById("result").value;
            txt=txt+mul;
            document.getElementById("result").value = txt;
            break;
          case "/":
            let div = (function (a, b) {
              return a / b;
            })(num1, num2);
            var txt=document.getElementById("result").value;
            txt=txt+div;
            document.getElementById("result").value = txt;
            break;
          default:
            alert("Invalid choice");
            break;   
            }
      }
</script>
  <script
    src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"
  ></script>
  </body>
</html>

Screenshots

0 replies

jo300 · 2022-07-22T19:10:04Z

jo300
Jul 22, 2022

let operation = 0;
do {
  let num1 = parseInt(prompt("enter num1"));
  let num2 = parseInt(prompt("enter num2"));

  operation = parseInt(
    prompt(
      ` Choose the operation[1-6] to be performed:
  1. Addition
  2. Subtraction
  3. Multiplication
  4. Division
  5. Modulus
  6. Quit
  Enter choice to continue... `
    )
  );

  switch (operation) {
    case 1:
      result = num1 + num2;
      break;
    case 2:
      result = num1 - num2;
      break;
    case 3:
      result = num1 * num2;
      break;
    case 4:
      result = num1 / num2;
      break;
    case 5:
      result = num1 % num2;
      break;
    case 6:
      alert("Good Bye!");
      break;
    default:
      alert("it is an invalid choice");
      break;
  }
  if (operation > 0 && operation < 6) {
    alert(result);
  }
} while (operation < 6);

0 replies

uzma23 · 2022-07-27T04:21:18Z

uzma23
Jul 27, 2022

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
  </head>
  <body>
    <h1 id="myHeading"></h1>
    <h5 id="operationList"></h5>
    <h3 id="result"></h3>
    <form action="#" onSubmit="event.preventDefault(); calculate();">
      <input type="number" id="num1" placeholder="1st number" />
      <input type="number" id="num2" placeholder="2nd number" />
      <input type="number" id="choice" placeholder="Enter Choice" />
      <input type="submit" value="Calculate" />
    </form>

    <script>
      document.getElementById("myHeading").innerText =
        "Welcome to the best calculator out there!";
      document.getElementById("operationList").innerText =
        "1. Addition \n 2. Subtraction \n 3. Multiplication\n 4. Division \n5. Modulus \n6. Quit \nEnter choice";

      function calculate() {
        event.preventDefault();
        event.stopPropagation();
        let num1 = parseInt(document.getElementById("num1").value);
        let num2 = parseInt(document.getElementById("num2").value);
        let operation = parseInt(document.getElementById("choice").value);
        let choice = null;
        switch (operation) {
          case 1:
            result = num1 + num2;
            break;
          case 2:
            result = num1 - num2;
            break;
          case 3:
            result = num1 * num2;
            break;
          case 4:
            result = num1 / num2;
            break;
          case 5:
            result = num1 % num2;
            break;
          case 6:
            alert("Goodbye.");
            break;
          default:
            alert("Invalid choice!");
            break;
        }
        if (choice < 6 || choice > 0) {
          document.getElementById("result").innerText = "Result = " + result;
        }
      }
    </script>
  </body>
</html>

SCREENSHOT

0 replies

meghvi-raj · 2022-07-27T04:24:10Z

meghvi-raj
Jul 27, 2022

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Calculator</title>
  </head>
  <body>
    <h1>Welcome to my Calculator!</h1>
      <form action="#" id = "Calculatorform" onSubmit="event.preventDefault(); calculate();">
        
      <p id="inputs"></p>
        <label><b>Enter the first number</b></label>
        <input type="number" id="num1"></input><br><br>
        <label><b>Enter the second number</b></label>
        <input type="number" id="num2"></input>
        <p id="operationtype"></p>
        <p id="choice"></p>
        <input type="number" id="operation" placeholder="Enter your choice"></input>
        <input type="submit" value="Calculate" />
       <h3 id="result"></h3>
        
      <script>
        document.getElementById("inputs").innerText="Enter two numbers for calculation"
        document.write("<p> <b>Choose the operation[1-6] you wish to perform:</b></p>");
        document.write("<p>1. Addition((+)</p>");
        document.write("<p>2. Subtraction(-)</p>");
        document.write("<p>3. Multiplication(*)</p>");
        document.write("<p>4. Division(/)</p>");
        document.write("<p>5. Modulus(%)</p>");
        document.write("<p>6. Exit Calculator</p>");

        document.getElementById("choice").innerText = "Please enter your choice here!!";
       

        function calculate() {
            event.preventDefault();
            event.stopPropagation();

            let operation = parseInt(document.getElementById("operation").value);
            let num1=parseInt(document.getElementById("num1").value);
            let num2=parseInt(document.getElementById("num2").value);

            let result=null;

            switch (operation) {
    case 1:
      result = num1 + num2;
      break;
    case 2:
      result = num1 - num2;
      break;
    case 3:
      result = num1 * num2;
      break;
    case 4:
      result = num1 / num2;
      break;
    case 5:
      result = num1 % num2;
      break;
    case 6:
      break;
    default:
      alert("Invalid choice!");
      break;
            }

      if(result)
           document.getElementById("result").innerText = "Result : " + result
           else{
            document.getElementById("result").innerText="Thankyou for Visiting!!"
           }
           document.getElementById("Calculatorform").reset();
 }
      </script>
      </body>
      </html>

0 replies

ghost · 2022-07-27T04:31:44Z

ghost
Jul 27, 2022

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JavaScript Calculator</title>
</head>

<body>
  <h1>CALCULATOR</h1>
  <form action="#" id="reset1" onSubmit="event.preventDefault(); calculate();">
    <h2>Enter the numbers:</h2>
    <div>
      <input type="number" id="n1" placeholder="1st number" />
      <input type="number" id="n2" placeholder="2nd number" />
    </div> 
    <div id="Menu1"></div>
    <div id="Menu2"></div>          
    <div> 
      <input type="number" id="option" placeholder="Choose the operation " />
    </div>
    <hr>
    <div> <input type="submit" value="Calculate" />
      <input type="reset" id="reset2" value="Clear" />  
    </div>
      <h2 id="displayResult"></h2>
  </form>

  <script>
        document.getElementById("Menu1").innerHTML = "<h2>Choose the operation to be performed:[1-6]:</h2>";
        document.getElementById("Menu2").innerHTML ="1. Addition<br/>2. Substraction <br/>3. Multiplicaton<br/>4. Division<br/>5. Modulus<br/>6. Quit </br>";

        function calculate() {
        event.preventDefault();
        event.stopPropagation();
        
        let num1 = parseInt(document.getElementById("n1").value);
        let num2 = parseInt(document.getElementById("n2").value);
        let operation = parseInt(document.getElementById("option").value);
        let result = null;
        switch (operation) {
          case 1:
            result = num1+ num2;
            break;
          case 2:
            result = num1 - num2;
            break;
          case 3:
            result = num1 * num2;
            break;
          case 4:
            result = num1 / num2;
            break;
          case 5:
          result = num1 % num2;
           break;
           case 6:
           break;
           default:
            alert("Invalid input!");
            break;
        }
        if(operation<6)
        {
         document.getElementById("displayResult").innerHTML="Result is" + result;
        }
        else {
                document.getElementById("displayResult").innerText = "GoodBye!"
            }
            document.getElementById("reset1").reset();
      }    
  </script>
</body>
</html>

0 replies

vshvandana · 2022-07-27T04:32:20Z

vshvandana
Jul 27, 2022

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <style>
        #Content {
            margin-bottom: 5px;
            padding-bottom: 5px;
        }
    </style>
</head>

<body>
    <h1>
        <center>Calculator</center>
    </h1>
    <main id="Content"></main>
    <h3 id="result"></h3>
    <form action="#" onSubmit="event.preventDefault(); calculate();">
        <input type="number" id="num1" placeholder="1st number" />
        <input type="number" id="num2" placeholder="2nd number" />
        <input type="number" id="choice" placeholder="Choose the Operation" />
        <input type="submit" value="Calculate" />
    </form>

    <script>
        document.getElementById("Content").innerText =
            "Welcome!";
        document.write("<p> Choose the operation[1-6] to be performed:</p>");
        document.write("<p> 1. Addition</p>");
        document.write("<p> 2. Subtraction</p>");
        document.write("<p> 3. Multiplication</p>");
        document.write("<p> 4. Division</p>");
        document.write("<p> 5. Modulus</p>");
        document.write("<p> 6. Quit</p>");
        document.write("<p> Enter choice to continue...</p>");

        function calculate() {
            event.preventDefault();
            event.stopPropagation();
            let num1 = parseInt(document.getElementById("num1").value);
            let num2 = parseInt(document.getElementById("num2").value);
            let option = parseInt(document.getElementById("choice").value);
            let choice = null;
            switch (option) {
                case 1:
                    result = num1 + num2;
                    break;
                case 2:
                    result = num1 - num2;
                    break;
                case 3:
                    result = num1 * num2;
                    break;
                case 4:
                    result = num1 / num2;
                    break;
                case 5:
                    result = num1 % num2;
                    break;
                case 6:
                    alert("GoodBye!");
                    break;
                default:
                    alert("Invalid input");
                    break;
            }
            if (choice > 0 || choice < 6) {
                document.getElementById("result").innerText = "Result = " + result;
            }
        }
    </script>
</body>

</html>

0 replies

ghost · 2022-07-27T04:37:24Z

ghost
Jul 27, 2022

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
  </head>
  <body>
    <h1>Calculator</h1>
    <main id="welcome"></main>
    <h3 id="result"></h3>
    <form action="#" onSubmit="event.preventDefault(); calculate();">
      <label><b>Enter First number</b></label>
      <input type="number" id="num1" placeholder="" />
      <br />
      <br />
      <label><b>Enter second number</b></label>
      <input type="number" id="num2" placeholder="" />
      <br />
      <br />
      <label><b>Enter your choice</b></label>
      <input type="number" id="choice" placeholder="Enter Choice" />

      <input type="submit" value="Calculate" />
    </form>

    <script>
      document.getElementById("welcome").innerText =
        "Hello! You can perform basic arithemtic operations by giving two numbers.";
      document.write(
        "Choose the operation to be performed in the range of 1-6:"
      );
      document.write("<p> 1. Addition</p>");
      document.write("<p> 2. Subtraction</p>");
      document.write("<p> 3. Multiplication</p>");
      document.write("<p> 4. Division</p>");
      document.write("<p> 5. Modulus</p>");
      document.write("<p> 6. Quit</p>");

      function calculate() {
        event.preventDefault();
        event.stopPropagation();
        let num1 = parseInt(document.getElementById("num1").value);
        let num2 = parseInt(document.getElementById("num2").value);
        let operation = parseInt(document.getElementById("choice").value);
        let choice = null;
        switch (operation) {
          case 1:
            result = num1 + num2;
            break;
          case 2:
            result = num1 - num2;
            break;
          case 3:
            result = num1 * num2;
            break;
          case 4:
            result = num1 / num2;
            break;
          case 5:
            result = num1 % num2;
            break;
          case 6:
            alert("Good Bye!");
            break;
          default:
            alert("Invalid choice!");
            break;
        }

        document.getElementById("result").innerText = "Result = " + result;

        document.getElementById("num1").value = "";
        document.getElementById("num2").value = "";
        document.getElementById("choice").value = "";
      }
    </script>
  </body>
</html>

0 replies

Coder-093 · 2022-07-27T04:38:33Z

Coder-093
Jul 27, 2022

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
  </head>
  <body>
    <h1>Calculator</h1>
    <p id="func"></p>
    <h3 id="oper"></h3>
    <h3 id="result"></h3>
    <form action="#" onSubmit="event.preventDefault(); calculate();">
      <input type="number" id="num1" placeholder="1st number" />
      <input type="number" id="num2" placeholder="2nd number" />
      <input type="number" id="choice" placeholder="Enter Choice" />
      <input type="submit" value="Calculate" />
    </form>

    <script>
      document.getElementById("oper").innerText =
        "Welcome to the best calculator out there!";
      document.getElementById("func").innerText =
        "1. Addition \n 2. Subtraction \n 3. Multiplication\n 4. Division \n5. Modulus \n6. Quit \nEnter choice";

      function calculate() {
        event.preventDefault();
        event.stopPropagation();
        let num1 = parseInt(document.getElementById("num1").value);
        let num2 = parseInt(document.getElementById("num2").value);
        let operation = parseInt(document.getElementById("choice").value);
        let choice = null;
        switch (operation) {
          case 1:
            result = num1 + num2;
            break;
          case 2:
            result = num1 - num2;
            break;
          case 3:
            result = num1 * num2;
            break;
          case 4:
            result = num1 / num2;
            break;
          case 5:
            result = num1 % num2;
            break;
          case 6:
            alert("Goodbye!");
            break;
          default:
            alert("Invalid choice!");
            break;
        }
        if (choice < 6 || choice > 0) {
          document.getElementById("result").innerText = "Result = " + result;
        }
        document.getElementById("num1").value = "";
        document.getElementById("num2").value = "";
        document.getElementById("choice").value = "";
      }
    </script>
  </body>
</html>

0 replies

ApoorvaSinha · 2022-07-27T04:43:16Z

ApoorvaSinha
Jul 27, 2022

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <style>
      #mainContent {
        margin-bottom: 5px;
        padding-bottom: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Calculator</h1>
    <main id="mainContent"></main>
    <h3 id="result"></h3>
    <form action="#" onSubmit="event.preventDefault(); calculate();">
      <input type="number" id="num1" placeholder="1st number" />
      <input type="number" id="num2" placeholder="2nd number" />
      <input type="number" id="choice" placeholder="Enter Choice" />
      <input type="submit" value="Calculate" />
    </form>

    <script>
      document.getElementById("mainContent").innerText =
        "Welcome to the best calculator out there!";
      document.write("<p> Choose the operation[1-6] to be performed:</p>");
      document.write("<p> 1. Addition</p>");
      document.write("<p> 2. Subtraction</p>");
      document.write("<p> 3. Multiplication</p>");
      document.write("<p> 4. Division</p>");
      document.write("<p> 5. Modulus</p>");
      document.write("<p> 6. Quit</p>");
      document.write("<p> Enter choice to continue...</p>");

      function calculate() {
        event.preventDefault();
        event.stopPropagation();
        let num1 = parseInt(document.getElementById("num1").value);
        let num2 = parseInt(document.getElementById("num2").value);
        let operation = parseInt(document.getElementById("choice").value);
        let choice = null;
        switch (operation) {
          case 1:
            result = num1 + num2;
            break;
          case 2:
            result = num1 - num2;
            break;
          case 3:
            result = num1 * num2;
            break;
          case 4:
            result = num1 / num2;
            break;
          case 5:
            result = num1 % num2;
            break;
          case 6:
            alert("Good Bye!");
            break;
          default:
            alert("Invalid choice!");
            break;
        }
        if (choice < 6 || choice > 0) {
          document.getElementById("result").innerText = "Result = " + result;
        }
        document.getElementById("num1").value = "";
        document.getElementById("num2").value = "";
        document.getElementById("choice").value = "";
      }
    </script>
  </body>
</html>

0 replies

gayatribabar · 2022-07-27T04:51:48Z

gayatribabar
Jul 27, 2022

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
  </head>
  <body>
    <h1>Calculator</h1>
    <p id="func"></p>
    <h3 id="oper"></h3>
    <h3 id="result"></h3>
    <form action="#" onSubmit="event.preventDefault(); calculate();">
      <input type="number" id="num1" placeholder="1st number" />
      <input type="number" id="num2" placeholder="2nd number" />
      <input type="number" id="choice" placeholder="Enter Choice" />
      <input type="submit" value="Calculate" />
    </form>

    <script>
      document.getElementById("oper").innerText =
        "Welcome to the best calculator out there!";
      document.getElementById("func").innerText =
        "1. Addition \n 2. Subtraction \n 3. Multiplication\n 4. Division \n5. Modulus \n6. Quit \nEnter choice";

      function calculate() {
        event.preventDefault();
        event.stopPropagation();
        let num1 = parseInt(document.getElementById("num1").value);
        let num2 = parseInt(document.getElementById("num2").value);
        let operation = parseInt(document.getElementById("choice").value);
        let choice = null;
        switch (operation) {
          case 1:
            result = num1 + num2;
            break;
          case 2:
            result = num1 - num2;
            break;
          case 3:
            result = num1 * num2;
            break;
          case 4:
            result = num1 / num2;
            break;
          case 5:
            result = num1 % num2;
            break;
          case 6:
            alert("Goodbye!");
            break;
          default:
            alert("Invalid choice!");
            break;
        }
        if (choice < 6 || choice > 0) {
          document.getElementById("result").innerText = "Result = " + result;
        }
        document.getElementById("num1").value = "";
        document.getElementById("num2").value = "";
        document.getElementById("choice").value = "";
      }
    </script>
  </body>
</html>

0 replies

Kuntapaliwal · 2022-07-27T05:29:56Z

Kuntapaliwal
Jul 27, 2022

Html code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS Document Input</title>
</head>

<body>
    <h1>Calculator with Html & Js</h1>

    <p id="myParagraph">Welcome to the calculator World</p>

    <form action="#" onSubmit="event.preventDefault(); calculate();">
        <input type="number" id="num1" placeholder="1st number" />
        <select name="operators" id="operators">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
            <option value="%">%</option>
        </select>
        <input type="number" id="num2" placeholder="2nd number" />
        <input type="submit" value="Calculate" />
    </form>
    <h3 id="result"></h3>
    <script src="Calculator.js"></script>
</body>

</html>

JS Code

  function calculate() {
  let num1=parseInt(document.getElementById("num1").value);
  let num2 =parseInt(document.getElementById("num2").value);



  let operation = document.getElementById("operators").value;
//document.write(operation);
  let result = null;
  switch (operation) {
    case '+':
      result = num1 + num2;
      break;
    case '-':
      result = num1 - num2;
      break;
    case '*':
      result = num1 * num2;
      break;
    case '/':
      result = num1 / num2;
      break;
    case '%':
      result = num1 % num2;
      break;
    default:
      alert("Invalid choice!");
      break;
  }

  //document.write(result);

  document.getElementById("result").innerText = "Result = " + result;
}

Output

0 replies

KunwarAnimesh · 2022-07-28T14:05:15Z

KunwarAnimesh
Jul 28, 2022

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Menu-driven Calculator</title>
    <link rel="stylesheet" type="text/css" href="ext.css">
</head>

<body>
    <h1 id="myHeading">Welcome to my calculater
![2022-07-28 (1)](https://user-images.githubusercontent.com/104262628/181524008-94f43a44-07ec-452c-b7f0-bc73b2086e69.png)
e to the best calculator out there!</h1>
    <form action="#" id="inp-form" onSubmit="event.preventDefault(); calculate();">
        <p id="Menu"></p>
        <input id="num1" placeholder="Enter the 1st number:" type="number">
        <input id="num2" placeholder="Enter the 2nd number:" type="number">
![2022-07-28 (2)](https://user-images.githubusercontent.com/104262628/181524026-3f9483a0-20e0-4c20-bc8b-491c72976d8c.png)

        <p id="Menu-options"></p>
        <p id="choice-msg"></p>

        <input id="opt" placeholder="Enter your choice" type="number">
        <input type="submit" value="Calculate" />
        
        <h2 id="result"></h2>
    </form>
    <script>
        document.getElementById("Menu").innerText = "Enter two numbers for the calculation...";
        document.getElementById("Menu-options").innerText = "Choose the operation[1-6] to be performed:\n1. Addition\n2. Subtraction\n3. Multiplication\n4. Division\n5. Modulus\n6. Quit"
        document.getElementById("choice-msg").innerText = "Enter choice to continue...";
        function calculate() {
            event.preventDefault();
            event.stopPropagation();

            let operation = parseInt(document.getElementById("opt").value);
            let num1 = parseInt(document.getElementById("num1").value);
            let num2 = parseInt(document.getElementById("num2").value);
            let result = null;

            switch (operation) {
                case 1:
                    result = num1 + num2;
                    break;
                case 2:
                    result = num1 - num2;
                    break;
                case 3:
                    result = num1 * num2;
                    break;
                case 4:
                    result = num1 / num2;
                    break;
                case 5:
                    result = num1 % num2;
                    break;
                case 6:
                    break;
                default:
                    alert("Invalid choice!");
                    break;
            }
            if (result)
                document.getElementById("result").innerText = "Result is: " + result;
            else {
                document.getElementById("result").innerText = "GoodBye!"
            }
            document.getElementById("inp-form").reset();
        }
    </script>

</body>
</html>

0 replies

SumaGayathri-999 · 2022-07-30T17:02:59Z

SumaGayathri-999
Jul 30, 2022

CODE

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>MY CALCULATOR</h1>
    <h4>The Best Calculator Ever</h4>
    <form action="#" onSubmit="event.preventDefault(); calculate();">
      <input type="number" id="num1" placeholder="Enter first number:" />
      <input type="number" id="num2" placeholder="Enter second number:" />
      <input type="number" id="choice" placeholder="enter your choice" />
      <input type="submit" value="calculate" />
      <h3 id="result"></h3>
    </form>
    <script>
      document.write("<br>choose the operation you want to perrform</br>");
      document.write("1.Addition<br>");
      document.write("2.substraction<br>");
      document.write("3.Mutiplication<br>");
      document.write("4.division<br>");
      document.write("5.Module<br>");
      document.write("6.Quit<br>");

      function calculate() {
        event.preventDefault();
        event.stopPropagation();
        let n1 = parseInt(document.getElementById("num1").value);
        let n2 = parseInt(document.getElementById("num2").value);
        let n3 = parseInt(document.getElementById("choice").value);

        switch (n3) {
          case 1:
            result = n1 + n2;
            break;
          case 2:
            result = n1 - n2;
            break;
          case 3:
            result = n1 * n2;
            break;
          case 4:
            result = n1 / n2;
            break;
          case 5:
            result = n1 % n2;
            break;
          case 6:
            alert("goodbye!!!");
            break;
          default:
            alert("Invalid choice!");
            break;
        }
        if (n3 >= 0 && n3 < 6) {
          document.getElementById("result").innerText = `Result=${result}`;
        }

        // document.getElementById("num1").value = "";
        // document.getElementById("num2").value = "";
        // document.getElementById("choice").value = "";
      }
    </script>
  </body>
</html>

SCREENSHOTS

1)Addition

1)Addition

2)Substraction

3)Multiplication

4)Division

5)Modulo

6)QUit

0 replies

Ramgopalpatel · 2022-07-30T17:56:29Z

Ramgopalpatel
Jul 30, 2022

HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    
  </head>
  <body>
    <h1>Calculator</h1>
    <main id="mainContent"></main>
    <h3 id="result"></h3>
    <form action="#" onSubmit="event.preventDefault(); calculate();">
      <input type="number" id="num1" placeholder="First number" />
      <input type="number" id="num2" placeholder="second number" />
      <input type="number" id="choice" placeholder="Enter Choice" />
      <input type="submit" value="Calculate" />
    </form>
  </body>
</html>

js code

document.getElementById("mainContent").innerText =
        "Welcome to the our calculator !";
      document.write("<p> Choose the operation[1-6] to be performed:</p>");
      document.write("<p> 1. Addition</p>");
      document.write("<p> 2. Subtraction</p>");
      document.write("<p> 3. Multiplication</p>");
      document.write("<p> 4. Division</p>");
      document.write("<p> 5. Modulus</p>");
      document.write("<p> 6. Quit</p>");
      document.write("<p> Enter choice to continue...</p>");

      function calculate() {
        event.preventDefault();
        event.stopPropagation();
        let num1 = parseInt(document.getElementById("num1").value);
        let num2 = parseInt(document.getElementById("num2").value);
        let operation = parseInt(document.getElementById("choice").value);
        let choice = null;
        switch (operation) {
          case 1:
            result = num1 + num2;
            break;
          case 2:
            result = num1 - num2;
            break;
          case 3:
            result = num1 * num2;
            break;
          case 4:
            result = num1 / num2;
            break;
          case 5:
            result = num1 % num2;
            break;
          case 6:
            alert("Good Bye!");
            break;
          default:
            alert("Invalid choice!");
            break;
        }
        if (choice < 6 || choice > 0) {
          document.getElementById("result").innerText = "Result = " + result;
        }
        document.getElementById("num1").value = "";
        document.getElementById("num2").value = "";
        document.getElementById("choice").value = "";
      }

0 replies

Nikhi54 · 2022-07-31T16:25:26Z

Nikhi54
Jul 31, 2022

Code

<!DOCTYPE html>
<br lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smart Calculator</title>
</head>
<br>
  <h1>Welcome to Smart Calculator!</h1>

  <form action="#" id="clearForm" onSubmit="event.preventDefault(); calculate();">
    <p id="inputs"></p>
    <label for="num1"><b>Enter First Number:</b></label>
    <input type="number" id="num1"></br>

    <label><br for="num2"><b>Enter second Number:</b></label>
    <input type="number" id="num2"></br>
    
    <p id="operationtype"></p>
    <p id="choice"></p>
    <input type="number" id="operation" placeholder="Enter your choice"></input>
    <input type="submit" value="Calculate">
    <h3 id="result"></h3>
  </form>

  <script>
       document.getElementById('inputs').innerText = "Enter Two Number to calculation";
       document.write("<p> <b>choose the operation to performed:<b> <p>");
       document.write("<p>1.Addition");
       document.write("<p>2.Subtract");
       document.write("<p>3.Multiply");
       document.write("<p>4.Divided");
       document.write("<p>5.modules");
       document.write("<p>6.Exit");

      document.getElementById('choice').innerText="Enter choice to continue....";
      
      function calculate()
      {
        event.preventDefault();
        event.stopPropagation();

        let operation = parseInt(document.getElementById("operation").value);
        let num1 = parseInt(document.getElementById("num1").value);
        let num2 = parseInt(document.getElementById("num2").value);

        let result = null;
        switch(operation)
        {
          case 1:
            result = num1+num2;
            break;
          case 2:
            result = num1-num2;
            break;
          case 3:
            result = num1*num2;
            break;
          case 4:
            result = num1/num2;
            break;
          case 5:
            result = num1%num2;
            break;
          default:
            alert("Invalid choice");
            break;
        }
        if(result){
          document.getElementById("result").innerText="Result is :" +result
        }
        else{
          document.getElementById("result").innerText="GoodBye!"
        }
        document.getElementById("clearForm").reset();
      }
  </script>
</body>
</html>

0 replies

Thharshita · 2022-10-09T19:19:07Z

Thharshita
Oct 9, 2022


    <style>
      #mainContent {
        margin-bottom: 5px;
        padding-bottom: 5px;
      }
    </style>
  </head>



  <body>
   <h1>Calculator</h1>
   <main id="mainContent"></main>
   
   <form action="#" onSubmit="event.preventDefault(); calculate();">
      <input type="number" id="num1" placeholder="1st number" />
      <input type="number" id="num2" placeholder="2nd number" />
      <input type="number" id="choice" placeholder="Enter Choice" />
      <input type="submit" value="Calculate" />
    </form>

    <script>
      document.getElementById("mainContent").innerText ="Welcome to the best calculator out there!";
      document.write("<p> Choose the operation[1-6] to be performed:</p>");
      document.write("<p> 1. Addition</p>");
      document.write("<p> 2. Subtraction</p>");
      document.write("<p> 3. Multiplication</p>");
      document.write("<p> 4. Division</p>
  <h1>Welcome to Smart Calculator!</h1>

  <form action="#" id="clearForm" onSubmit="event.preventDefault(); calculate();">
    <p id="inputs"></p>
    <label for="num1"><b>Enter First Number:</b></label>
    <input type="number" id="num1"></br>

    <label><br for="num2"><b>Enter second Number:</b></label>
    <input type="number" id="num2"></br>
    
 
    <p id="choice"></p>
    <input type="number" id="operation" placeholder="Enter your choice"></input>
    <input type="submit" value="Calculate">
    <h3 id="result"></h3>
  </form>

  <script>
       document.getElementById('inputs').innerText = "Enter Two Number to calculation";
       document.write("<p> <b>choose the operation to performed:<b> <p>");
       document.write("<p>1.Addition");
       document.write("<p>2.Subtract");
       document.write("<p>3.Multiply");
       document.write("<p>4.Divided");
       document.write("<p>5.modules");
       document.write("<p>6.Exit");

      document.getElementById('choice').innerText="Enter choice to continue....";
      
      function calculate()
      {
        event.preventDefault();
        event.stopPropagation();

        let operation = parseInt(document.getElementById("operation").value);
        let num1 = parseInt(document.getElementById("num1").value);
        let num2 = parseInt(document.getElementById("num2").value);

        let result = null;
        switch(operation)
        {
          case 1:
            result = num1+num2;
            break;
          case 2:
            result = num1-num2;
            break;
          case 3:
            result = num1*num2;
            break;
          case 4:
            result = num1/num2;
            break;
          case 5:
            result = num1%num2;
            break;
          default:
            alert("Invalid choice");
            break;
        }
        if(result){
          document.getElementById("result").innerText="Result is :" +result
        }
        else{
          document.getElementById("result").innerText="GoodBye!"
        }
        document.getElementById("clearForm").reset();
      }
  </script>
</body>
</html>");
      document.write("<p> 5. Modulus</p>");
      document.write("<p> 6. Quit</p>");
      document.write("<p> Enter choice to continue...</p>");

      function calculate() {
        event.preventDefault();
        event.stopPropagation();
        let num1 = parseInt(document.getElementById("num1").value);
        let num2 = parseInt(document.getElementById("num2").value);
        let operation = parseInt(document.getElementById("choice").value);
        let choice = null;
        switch (operation) {
          case 1:
            result = num1 + num2;
            break;
          case 2:
            result = num1 - num2;
            break;
          case 3:
            result = num1 * num2;
            break;
          case 4:
            result = num1 / num2;
            break;
          case 5:
            result = num1 % num2;
            break;
          case 6:
            alert("Good Bye!");
            break;
          default:
            alert("Invalid choice!");
            break;
        }
        if (choice < 6 || choice > 0) {
          document.getElementById("result").innerText = "Result = " + result;
        }
        document.getElementById("num1").value = "";
        document.getElementById("num2").value = "";
        document.getElementById("choice").value = "";
      }
    </script>
  </body>
</html>

0 replies

NavneetBais · 2022-10-14T06:34:34Z

NavneetBais
Oct 14, 2022

<div class="col-lg-4 offset-4 border border-primary mt-5">
    <div class="form-group">
        <label for="fNumber">Enter First Number</label>
        <input #fname type="number" class="form-control" id="fNumber" aria-describedby="emailHelp" placeholder="First Number">
        
      </div>
      <div class="form-group">
        <label for="sNumber">Enter Second Number</label>
        <input #sname type="number" class="form-control" id="sNumber" placeholder="Second Number">
      </div>
      <div class="form-check">
        <select #operation name="operation" id="operation">
            <option value="*">*</option>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="/">/</option>
        </select>
      </div>
      <div>
        Result : {{result}}
      </div>
      <button class="btn btn-primary" (click) = "calculate(sname.value , fname.value , operation.value);" >Calculate</button>
</div>

Output Ts File

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  
   result:number   = 0;
   num1: number = 0 ;
   num2 : number = 0 ;
   calculate (fname: string , sname:string , operation:string){
    this.num1 = Number(fname) ;
    this.num2 = Number(sname)
      switch(operation){
        case "*" :
          this.result = this.num1 * this.num2 ;
          break ;
        case "-" : 
        this.result  = this.num1 - this.num2 ;
          break ;
        case "+" : 
        this.result  =this.num1  + this.num2 ;
          break ;
        case "/" : 
        this.result  = this.num1 / this.num2 ;
          break ;
      }
  }


}

0 replies

Indukuri-Bhargavi · 2022-12-14T02:24:57Z

Indukuri-Bhargavi
Dec 14, 2022

<!--Disscussion Number 69 : https://github.com/akash-coded/mern/discussions/69-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CalculatorPage</title>
</head>
<h2>Welcome to CalculatorPage</h2>
<form action="#" onSubmit="event.preventDefault(); calculate();">
  Enter Number1: <input type="number" id="num1" name="num1" value><br><br>
  Enter Number2: <input type="number" id="num2" name="num2" value><br><br>
  Choose Option : <select id="choice" name="menu">
    <option selected>...</option>
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
    <option value="%">%</option>
  </select><br><br>
  <input type="submit" value="Calculate">
  <input type="reset" value="Clear">
  <br><br>

</form>
<h3 id="result"></h3>

<script>
  function calculate() {
    event.preventDefault();
    event.stopPropagation();
    let num1 = parseInt(document.getElementById("num1").value);
    let num2 = parseInt(document.getElementById("num2").value);
    let operation = (document.getElementById("choice").value);
    let choice = null;
    switch (operation) {
      case "+":
        result = num1 + num2;
        break;
      case "-":
        result = num1 - num2;
        break;
      case "*":
        result = num1 * num2;
        break;
      case "/":
        result = num1 / num2;
        break;
      case "%":
        result = num1 % num2;
        break;
    }

    document.getElementById("result").innerText = "Result = " + result;
  }
</script>
</body>

</html>

0 replies

brawnybytes · 2024-06-04T05:49:29Z

brawnybytes
Jun 4, 2024

0 replies

brawnybytes · 2024-06-04T05:52:01Z

brawnybytes
Jun 4, 2024

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
</head>

<body>
    <h1>Calculator</h1>
    <ol>
        <li>
            Addition
        </li>
        <li>
            Subtraction
        </li>
        <li>
            Multiplication
        </li>
        <li>
            Division
        </li>
        <li>
            Modulus
        </li>
    </ol>

    <form id="calculatorForm" action="#" onSubmit="event.preventDefault(); calculate();">
        <input type="number" id="operation" placeholder="Choose Option" />
        <input type="number" id="num1" placeholder="1st number" />
        <input type="number" id="num2" placeholder="2nd number" />
        <input type="submit" value="Calculate" />
    </form>
    <p id="result"></p>

    <script>

        function calculate() {
            event.preventDefault();

            let num1 = parseFloat(document.getElementById("num1").value);
            let num2 = parseFloat(document.getElementById("num2").value);
            let operation = parseInt(document.getElementById("operation").value);

            let result = null;
            switch (operation) {
                case 1:
                    result = num1 + num2;
                    break;
                case 2:
                    result = num1 - num2;
                    break;
                case 3:
                    result = num1 * num2;
                    break;
                case 4:
                    result = num1 / num2;
                    break;
                case 5:
                    result = num1 % num2;
                    break;
                default:
                    result = "Invalid operation";
                    break;
            }

            document.getElementById("result").innerText = "Result = " + result;
        };
    </script>
</body>

</html>

0 replies

hiteshbics1 · 2024-06-04T06:11:02Z

hiteshbics1
Jun 4, 2024

`

<title>Calculator</title>

Calculator

Enter first number

Enter second number

Select operation Addition Subtraction Multiplication Division

Total : 0

Submit

  function calculateInputs(event) {
    let num1 = parseInt(document.getElementById('number1').value);
    let num2 = parseInt(document.getElementById('number2').value);
    let opeator = document.getElementById('operation').value;
    if (num1 && num2) {
      let total = processCalculations(num1,num2,opeator);
      document.getElementById('total').innerText = total;
    }
  }

  function processCalculations(num1,num2,opeator)
  {
    switch(opeator) {
      case '*':
        return num1 * num2;

      case '/':
        return num1 / num2;

      case '-':
        return num1 - num2;

      case '+':
        return num1 + num2;

      default :
        return '';
    }
  }
</script>

`

0 replies

hiteshbics1 · 2024-06-04T06:12:06Z

hiteshbics1
Jun 4, 2024

0 replies

akashchaudhuri20 · 2024-06-11T14:41:08Z

akashchaudhuri20
Jun 11, 2024

0 replies

JS - HTML DOM Interaction - Calculator with Form and JS #69

Uh oh!

Uh oh!

akash-coded Jul 10, 2022 Maintainer

Basic Calculator Webpage

Code for console-based menu-driven calculator

Hints

Demo code for reading HTML form inputs via JS

Demo code for updating the HTML DOM via JS

Objective

Replies: 26 comments

Uh oh!

Code

Screenshots

Addition

Subtraction

Multiplication

Division

Modulo

Quit

Uh oh!

Uh oh!

Code

Screenshots

Addition

Subtraction

Multiplication

Division

Modulus

Quit

Uh oh!

Uh oh!

Code

Screenshot

1.Addition

2.Subtraction

Multiplication

Division

Modulus

Quit

Uh oh!

Uh oh!

Code

Screenshots

Uh oh!

Uh oh!

Uh oh!

SCREENSHOT

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Html code

JS Code

Output

Uh oh!

Uh oh!

CODE

SCREENSHOTS

Uh oh!

Uh oh!

Uh oh!

Code

akash-coded
Jul 10, 2022
Maintainer