Breaking News: Grepper is joining You.com. Read the official announcement!

calculator in js

Add Answer

Hungry Hyena answered on January 9, 2022 Popularity 5/10 Helpfulness 6/10

answer calculator in js

related Calculator Function JS Javascript

related JavaScript Calculator

related calculator program in javascript

related creating calculator in js

related calculator javascript

related calculator in javascript

calculator in js

Comment

<title>Faluty Calculator</title>
<div id="main">
    <div id="display"><h1 id="result"></h1></div>
    <section id="key-holder">
        <button class="keys">1</button>
        <button class="keys">2</button>
        <button class="keys">3</button>
        <button class="keys">4</button>
        <button class="keys">5</button>
        <button class="keys">6</button>
        <button class="keys">7</button>
        <button class="keys">8</button>
        <button class="keys">9</button>
        <button class="keys">0</button>
        <button class="keys">.</button>
        <button class="keys" id="equals">=</button>
        <button class="keys operator">+</button>
        <button class="keys operator">/</button>
        <button class="keys operator">*</button>
        <button class="keys operator">-</button>
        <button class="keys operator" id="clear">C</button>
    </section>
</div>

</body>
<style>
#clear{margin-right: 68%;}
#display{
    display: flex;overflow:auto;
    align-items: center;
justify-content: center;font-size: 1.5;color:wheat}
h1{
    margin-bottom:0px}
*{
    font-family:'Lucida Sans'}
body{
    background:radial-gradient(black,black);
    margin:0px;padding:0pc;display: flex;flex-direction: column;align-items: center;
    height:100dvh;}
#main{
    width:30%;
    height:90%;
    margin-top:2%;
    background-image:url(GlassMorphicBackground.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    display: flex;flex-direction: column;align-items: center;}
#display{
    width:95%;
    height:25%;
    background-color: rgba(128, 128, 128, 0.4);
    margin-top:5%;
    margin-bottom:5%;}
#key-holder{
    width:95%;
    height:70%;
    display: flex;
    justify-content: center;
    gap:10px;margin-top:1%;margin-bottom:1%;
    flex-wrap: wrap;}
.keys{
    width:20%;
    background-color: rgba(255,255,255,0.2);
    color:white;font-size: 2em;
    display: flex;
    align-items: center;
    justify-content: center;border:none;
transform: all 0.2s ease;}
.operator{
    background:rgba(248, 121, 1, 0.7    )}
.keys:hover{
    scale: 1.1;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.5);
    color:black;font-weight: bold;
}.operator:hover{
    background:orange}

</style>
<script>
let buttons = document.querySelectorAll('button')  
let display = document.getElementById('result')
let equal = document.getElementById('equals')
let randomNum;
console.log(buttons);
   
buttons.forEach(element => {
    if(element.innerHTML == '='){console.log('ijikul');}
    else if(element.innerHTML == 'C'){element.addEventListener('click',()=>{result.innerHTML = ''});}
    else{
    element.addEventListener('click',()=>{result.innerText+=element.innerHTML;})}
});

equal.addEventListener('click',()=>{
    randomNum = Math.round(Math.random()*10)
    console.log(randomNum);

    
    try{
        final = eval(display.innerHTML);
        display.innerHTML = final
    }
    
    catch(error){
        display.innerText = ''
    } 
if(final=='Infinity'){display.innerText = 'Not defined'}
    if(randomNum==5 || randomNum==4){
        display.innerText = Math.round(Math.random()*final)
    }
})
</script>
</html>

Popularity 5/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: calculator javascript

Link to this answer
Share Copy Link

Contributed on Apr 05 2024

Hungry Hyena

0 Answers Avg Quality 2/10

Closely Related Answers

Calculator Function JS Javascript

Comment

function calculate(number1,number2,operator){
if (!number1 || !number2){
    return "Invalid number"
}
if (!['*','-','/','+'].includes(operator)){
    return "Invalid operator"
}
switch(operator){
  case "+":
    return number1 + number2;
  case "/":
    return number1 * number2;
  case "*":
    return number1 * number2;
  case "-":
    return number1 - number2;
 }
}
console.log(calculate(5,6,"+"))

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: calculator c

Link to this answer
Share Copy Link

Contributed on Jan 09 2022

Grumpy Grebe

0 Answers Avg Quality 2/10

JavaScript Calculator

Comment

<!-- Create a simple Program to build the Calculator in JavaScript using with HTML and CSS web languages. -->  
<!DOCTYPE html>  
<html lang = "en">  
<head>  
<title> JavaScript Calculator </title>  
  
<style>  
h1 {  
    text-align: center;  
    padding: 23px;  
    background-color: skyblue;  
    color: white;  
    }  
  
#clear{  
width: 270px;  
border: 3px solid gray;  
    border-radius: 3px;  
    padding: 20px;  
    background-color: red;  
}  
  
.formstyle  
{  
width: 300px;  
height: 530px;  
margin: auto;  
border: 3px solid skyblue;  
border-radius: 5px;  
padding: 20px;  
}  
  
  
  
input  
{  
width: 20px;  
background-color: green;  
color: white;  
border: 3px solid gray;  
    border-radius: 5px;  
    padding: 26px;  
    margin: 5px;  
    font-size: 15px;  
}  
  
  
#calc{  
width: 250px;  
border: 5px solid black;  
    border-radius: 3px;  
    padding: 20px;  
    margin: auto;  
}  
  
</style>  
  
</head>  
<body>  
<h1> Calculator Program in JavaScript </h1>  
<div class= "formstyle">  
<form name = "form1">  
      
    <!-- This input box shows the button pressed by the user in calculator. -->  
  <input id = "calc" type ="text" name = "answer"> <br> <br>  
  <!-- Display the calculator button on the screen. -->  
  <!-- onclick() function display the number prsses by the user. -->  
  <input type = "button" value = "1" onclick = "form1.answer.value += '1' ">  
  <input type = "button" value = "2" onclick = "form1.answer.value += '2' ">  
  <input type = "button" value = "3" onclick = "form1.answer.value += '3' ">  
   <input type = "button" value = "+" onclick = "form1.answer.value += '+' ">  
  <br> <br>  
    
  <input type = "button" value = "4" onclick = "form1.answer.value += '4' ">  
  <input type = "button" value = "5" onclick = "form1.answer.value += '5' ">  
  <input type = "button" value = "6" onclick = "form1.answer.value += '6' ">  
  <input type = "button" value = "-" onclick = "form1.answer.value += '-' ">  
  <br> <br>  
    
  <input type = "button" value = "7" onclick = "form1.answer.value += '7' ">  
  <input type = "button" value = "8" onclick = "form1.answer.value += '8' ">  
  <input type = "button" value = "9" onclick = "form1.answer.value += '9' ">  
  <input type = "button" value = "*" onclick = "form1.answer.value += '*' ">  
  <br> <br>  
    
    
  <input type = "button" value = "/" onclick = "form1.answer.value += '/' ">  
  <input type = "button" value = "0" onclick = "form1.answer.value += '0' ">  
    <input type = "button" value = "." onclick = "form1.answer.value += '.' ">  
    <!-- When we click on the '=' button, the onclick() shows the sum results on the calculator screen. -->  
  <input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">  
  <br>   
  <!-- Display the Cancel button and erase all data entered by the user. -->  
  <input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >  
  <br>   
    
</form>  
</div>  
</body>  
</html>

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.javatpoint.com

Tags: calculator c

Link to this answer
Share Copy Link

Contributed on Sep 04 2022

Bruce Chigwa

0 Answers Avg Quality 2/10

JavaScript Calculator

Comment

-1

<!-- Create a simple Program to build the Calculator in JavaScript using with HTML and CSS web languages. -->  
<!DOCTYPE html>  
<html lang = "en">  
<head>  
<title> JavaScript Calculator </title>  
  
<style>  
h1 {  
    text-align: center;  
    padding: 23px;  
    background-color: skyblue;  
    color: white;  
    }  
  
#clear{  
width: 270px;  
border: 3px solid gray;  
    border-radius: 3px;  
    padding: 20px;  
    background-color: red;  
}  
  
.formstyle  
{  
width: 300px;  
height: 530px;  
margin: auto;  
border: 3px solid skyblue;  
border-radius: 5px;  
padding: 20px;  
}  
  
  
  
input  
{  
width: 20px;  
background-color: green;  
color: white;  
border: 3px solid gray;  
    border-radius: 5px;  
    padding: 26px;  
    margin: 5px;  
    font-size: 15px;  
}  
  
  
#calc{  
width: 250px;  
border: 5px solid black;  
    border-radius: 3px;  
    padding: 20px;  
    margin: auto;  
}  
  
</style>  
  
</head>  
<body>  
<h1> Calculator Program in JavaScript </h1>  
<div class= "formstyle">  
<form name = "form1">  
      
    <!-- This input box shows the button pressed by the user in calculator. -->  
  <input id = "calc" type ="text" name = "answer"> <br> <br>  
  <!-- Display the calculator button on the screen. -->  
  <!-- onclick() function display the number prsses by the user. -->  
  <input type = "button" value = "1" onclick = "form1.answer.value += '1' ">  
  <input type = "button" value = "2" onclick = "form1.answer.value += '2' ">  
  <input type = "button" value = "3" onclick = "form1.answer.value += '3' ">  
   <input type = "button" value = "+" onclick = "form1.answer.value += '+' ">  
  <br> <br>  
    
  <input type = "button" value = "4" onclick = "form1.answer.value += '4' ">  
  <input type = "button" value = "5" onclick = "form1.answer.value += '5' ">  
  <input type = "button" value = "6" onclick = "form1.answer.value += '6' ">  
  <input type = "button" value = "-" onclick = "form1.answer.value += '-' ">  
  <br> <br>  
    
  <input type = "button" value = "7" onclick = "form1.answer.value += '7' ">  
  <input type = "button" value = "8" onclick = "form1.answer.value += '8' ">  
  <input type = "button" value = "9" onclick = "form1.answer.value += '9' ">  
  <input type = "button" value = "*" onclick = "form1.answer.value += '*' ">  
  <br> <br>  
    
    
  <input type = "button" value = "/" onclick = "form1.answer.value += '/' ">  
  <input type = "button" value = "0" onclick = "form1.answer.value += '0' ">  
    <input type = "button" value = "." onclick = "form1.answer.value += '.' ">  
    <!-- When we click on the '=' button, the onclick() shows the sum results on the calculator screen. -->  
  <input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">  
  <br>   
  <!-- Display the Cancel button and erase all data entered by the user. -->  
  <input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >  
  <br>   
    
</form>  
</div>  
</body>  
</html>

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.javatpoint.com

Tags: calculator c

Link to this answer
Share Copy Link

Contributed on Sep 04 2022

Bruce Chigwa

0 Answers Avg Quality 2/10

calculator program in javascript

Comment

5-6=

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: calculator javascript

Link to this answer
Share Copy Link

Contributed on Oct 10 2022

vijay r

0 Answers Avg Quality 2/10

creating calculator in js

Comment

java script calculator

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: calculator c

Link to this answer
Share Copy Link

Contributed on Feb 16 2023

Rock Star

0 Answers Avg Quality 2/10

calculator javascript

Comment

const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
  // Access the clicked element
  const { target } = event;

  // Check if the clicked element is a button.
  // If not, exit from the function
  if (!target.matches('button')) {
    return;
  }

  if (target.classList.contains('operator')) {
    console.log('operator', target.value);
    return;
  }

  if (target.classList.contains('decimal')) {
    console.log('decimal', target.value);
    return;
  }

  if (target.classList.contains('all-clear')) {
    console.log('clear', target.value);
    return;
  }

  console.log('digit', target.value);
});

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: freshman.tech

Tags: calculator c

Link to this answer
Share Copy Link

Contributed on Aug 09 2023

Eric Raphael Khongsni

0 Answers Avg Quality 2/10

calculator in javascript

Comment

// Function to ask for the operation

function getOperation() {

  const operation = prompt("Choose an operation: +, -, *, /");

  return operation;

}

// Function to ask for numbers

function getNumbers() {

  const num1 = parseFloat(prompt("Enter first number:"));

  const num2 = parseFloat(prompt("Enter second number:"));

  return { num1, num2 };

}

// Perform the calculation based on the operation

function calculate(operation, num1, num2) {

  switch (operation) {

    case '+':

      return num1 + num2;

    case '-':

      return num1 - num2;

    case '*':

      return num1 * num2;

    case '/':

      // Check for division by zero

      if (num2 === 0) {

        return "Cannot divide by zero";

      }

      return num1 / num2;

    default:

      return "Invalid operation";

  }

}

// Main function to run the calculator

function runCalculator() {

  const operation = getOperation();

  const { num1, num2 } = getNumbers();

  const result = calculate(operation, num1, num2);

  alert(`Result: ${result}`);

}

// Run the calculator

runCalculator();

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: www.wscubetech.com

Tags: calculator javascript

Link to this answer
Share Copy Link

Contributed on Mar 29 2024

Taha Bilal

0 Answers Avg Quality 2/10

calculator in js

Contents

More Related Answers

calculator in js

Closely Related Answers

Calculator Function JS Javascript

JavaScript Calculator

JavaScript Calculator

calculator program in javascript

creating calculator in js

calculator javascript

calculator in javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.