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

Source: Grepper

Tags: calculator c

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

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

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

Source: www.wscubetech.com

Tags: calculator javascript j

Link to this answer
Share Copy Link

Contributed on Mar 29 2024

Taha Bilal

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

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 9/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

creating calculator in js

Contents

More Related Answers