Task - Calculator Webpage with IIFE

[akash-coded]

• Create a calculator webpage that has two input fields to take two numbers from the user, and it has a dropdown of arithmetic operators (+, -, *, /).
• When the user clicks on calculate after providing two numbers and choosing an operator, the result of the operation should be shown to the user on the same webpage without refreshing the page.
• Use Bootstrap to add styling to the page.
• Use proper coding conventions and standards.

Illustration:

[mha77]

<title>Calculator</title> <script type="module" src="app.js"></script> <script type="module" src="calc.js"></script>

<main class="col-md-5 mx-auto">
  <header>
    <h1>Simple Calculator</h1>
  </header>
  <hr />

  <section>
    <form
      action="#"
      method="get"
      id="form"
      name="form"
      class="font-weight-bold"
    >
      <div id="valuefield">
        <div class="col">
          <label for="value1">Value 1</label>
          <input
            type="number"
            id="value1"
            name="value1"
            class="form-control"
          /><br />
        </div>
        <div class="col">
          <label for="value2">Value 2</label>
          <input
            type="number"
            id="value2"
            name="value2"
            class="form-control"
          /><br />
        </div>
      </div>

      <div class="form-group">
        <select name="operator" id="operator" class="form-control">
          <option value="Add">+ Add</option>
          <option value="Subtract">- Subtract</option>
          <option value="Multiply">* Multiply</option>
          <option value="Divide">/ Divide</option>
        </select>
      </div>
    </form>
    <button id="button" class="btn btn-primary">Click</button>
  </section>
</main>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  crossorigin="anonymous"
></script>

import {calc} from './calc.js';

document.getElementById ("button").addEventListener ("click", getData, false);

function getData(){
let elements = document.getElementById("form").elements;
let value1 = Number(elements.item(0).value);
let value2 = Number(elements.item(1).value);
let select = document.getElementById('operator');
let operator = select.options[select.selectedIndex].value;
alert("Done" + value1 + " " + value2 + " " + operator);
let result = calc(value1, value2, operator)
console.log("Result: " + result);
}

export function calc(value1, value2, operator){
let result;
switch (operator){
case "Multiply":
result = value1 * value2;
break;
case "Subtract":
result = value1 - value2;
break;
case "Add":
result = value1 + value2;
break;
case "Divide":
if(0 == value2){
console.log("Division by zero forbidden");
}else{
result = value1 / value2;
}
break;
default:
console.log("No valid Operator given")
}
return result;
}

[ramprasana]

HTML

`

<title>Calculator</title>

Simple Calculator

        <span id="result"></span>
        <div class="form-group">
            <lable for="num1">Number 1</lable>
            <input class="form-control" type="text" name="num1" id="num1" placeholder="Number 1"><br>    
        </div>
        <div class="form-group">
            <lable for="num2">Number 2</lable>
            <input class="form-control" type="text" name="num2" id="num2" placeholder="Number 2"><br>    
        </div>
        <div class="form-group">
            <lable for="num2">Operation : </lable>
            <select name="operation" id="operation">
                <option value="add">Add</option>
                <option value="sub">Subtract</option>
                <option value="mul">Multiply</option>
                <option value="div">Division</option>                                    
                <option value="mod">Modulo</option>                                                
            </select>
        </div>          
        <div class="form-group">
            <span class="display-4">Result : </span>
            <span class="display-4 text-danger" id="resultspan" name="result"></span>
        </div>  
        
        <br>
            <button class="btn btn-primary" type="submit" onclick="doOperation(); return false">Submit</button>
    </form>    
    
</div>
<script src="../js/calculator.js"></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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
    crossorigin="anonymous"></script>
<script>
    var form = document.getElementById('calc');
    function handleForm(event) {
        event.preventDefault();
    }
    form.addEventListener('submit',handleForm);
</script>

`

JavaScript

function doOperation() {
console.log("in operation..");
let num1 = Number(document.calc.num1.value);
let num2 = Number(document.calc.num2.value);
let op = document.calc.operation.value;

const spanel = document.getElementById('resultspan');

if( Number.isNaN(num1) || Number.isNaN(num2)) {
    alert("Please enter the number");
    return;
} else if((num2 <= 0) && ( op === "div")) {
    alert("Number 2 can't be zero");
}
switch(op) {
    case "add":
        let sum = (function(n1,n2){
            return n1 + n2;
        })(num1, num2);
        spanel.innerHTML = sum;
        break;
    case "sub":
        let sub = (function(n1,n2){
            return n1 - n2;
        })(num1, num2);
        spanel.innerHTML = sub;
        break;
    case "mul":
        let mul = (function(n1,n2){
            return n1 * n2;
        })(num1, num2);
        spanel.innerHTML = mul;
        break;
    case "div":
        let div = (function(n1,n2){
            return n1 / n2;
        })(num1, num2);
        spanel.innerHTML.innerHTML = div;
        break;
    case "mod":
        let mod = (function(n1,n2){
            return n1 % n2;
        })(num1, num2);
        spanel.innerHTML.innerHTML = mod;
        break;
}

}

[pooja2apr]

<title>Webpage Calculator</title> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="../calc.js"></script> Value 1

Value 2

<label>Operators</label>
<select id="operators"class="form-control col-2">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="/">/</option>
    <option value="x">X</option>
</select><br><br>
<button  class="btn btn-block btn-primary mb-2" onclick="calc();">Calculate</button>


</main>

javascript calc.js

    function calc(){
      let n1= parseInt(document.getElementById('n1').value);
      let n2= parseInt(document.getElementById('n2').value);
      let opr=document.getElementById('operators').value;
       

       if(opr === '+'){
         alert(n1+n2);
       }

       if(opr === '-'){
           alert(n1-n2);
       }

       if(opr === 'x'){
           alert(n1*n2);
       }

       if(opr === '/'){
           alert(n1/n2);
       }
       
    }

[Wgjamia]

for JavaScript Code is:
unction outval(){

var vlaue1 = document.getElementById("valu1").value;
var value2 = document.getElementById("valu2").value;
var operation = document.getElementById("op").value;

console.log(`${vlaue1} == ${value2} == ${operation}`);

console.log(calc(vlaue1,value2,operation));

document.getElementById("out").value= calc(vlaue1,value2,operation);

}

function calc(val1,val2,op){
switch (op) {
case "+" :
return parseFloat(val1) + parseFloat(val2);
case "-":
return parseFloat(val1) - parseFloat(val2);
case "*":
return parseFloat(val1) * parseFloat(val2);
case "/":
if( parseFloat(val2) != 0){
return parseFloat(val1) / parseFloat(val2);
}
else{
console.log("Please Enter the Second value, not equal to Zero.");
return 0;
}
default:
return 0;
}
}

For HTML text

<style> html{ width: 100%; height: 200px; } </style> <title>calculator</title>

Fisrt Value:

Second Value:

Operation: + - * /

Get Value

                <div class="form-control border-0 alert-primary">
                    <label for="out" class="text-dark col-form-label">Output</label>
                    <input type="number" class="form-control out" name="out" id="out" value="0">    
                 </div>
            </form>
        </div>
    </section>
</main>
<script src="./bootstrap-5.1.3-dist/js/bootstrap.js"></script>

<script src="calc.js"></script>


[Wgjamia]