calculator in js

Comment

1

<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 6/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: calculator javascript

Share

Link to this answer
Share Copy Link

Contributed on Apr 05 2024

Hungry Hyena

0 Answers Avg Quality 2/10

Calculator Function JS Javascript

Comment

3

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

Share

Link to this answer
Share Copy Link

Contributed on Jan 09 2022

Grumpy Grebe

0 Answers Avg Quality 2/10

JavaScript Calculator

Comment

0

<!-- 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

Share

Link to this answer
Share Copy Link

Contributed on Sep 04 2022

Bruce Chigwa

0 Answers Avg Quality 2/10

calculator in javascript

Comment

0

// 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 2/10 Language javascript

Source: www.wscubetech.com

Tags: calculator javascript

Share

Link to this answer
Share Copy Link

Contributed on Mar 29 2024

Taha Bilal

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

Share

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

0

5-6=

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: calculator javascript

Share

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

0

java script calculator

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: calculator c

Share

Link to this answer
Share Copy Link

Contributed on Feb 16 2023

Rock Star

0 Answers Avg Quality 2/10

calculator javascript

Comment

0

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 9/10 Helpfulness 1/10 Language javascript

Source: freshman.tech

Tags: calculator c

Share

Link to this answer
Share Copy Link

Contributed on Aug 09 2023

Eric Raphael Khongsni

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

calculator in javascript

JavaScript Calculator

calculator program in javascript

creating calculator in js

calculator javascript

Grepper

Documentation

Social

Legal

Contact

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