Calculator with Square Root Button

Basic Calculator with Square Root Function

Welcome to our interactive basic calculator, designed to help you perform everyday arithmetic operations quickly and efficiently, including the useful square root function. Whether you're balancing your budget, doing homework, or just need to quickly calculate a value, this tool is here to assist.

How to Use the Calculator

Using this calculator is straightforward. Simply click the buttons to input numbers and operations, just like a physical calculator.

  • Entering Numbers: Click the number buttons (0-9) to input your desired digits.
  • Decimal Point: Use the '.' button to add a decimal point for non-integer numbers.
  • Basic Operations: Click '+', '-', '*', or '/' for addition, subtraction, multiplication, and division, respectively.
  • Square Root (√): To find the square root of a number, first enter the number, then click the '√' button. The result will immediately appear. Note that you cannot take the square root of a negative number.
  • Equals (=): After entering your numbers and an operation, click the '=' button to see the final result.
  • Clear (C): To clear the display and reset the calculator for a new calculation, click the 'C' button.

Examples

Let's walk through a few examples to demonstrate the calculator's functionality:

  1. Simple Addition:
    • Enter 15
    • Click +
    • Enter 7
    • Click =
    • Result: 22
  2. Multiplication:
    • Enter 12
    • Click *
    • Enter 5
    • Click =
    • Result: 60
  3. Square Root:
    • Enter 81
    • Click
    • Result: 9
  4. Combined Operation (Chaining):
    • Enter 5
    • Click +
    • Enter 3
    • Click * (The calculator first computes 5+3=8, then prepares for multiplication)
    • Enter 4
    • Click =
    • Result: 32
  5. Square Root in a Sequence:
    • Enter 100
    • Click /
    • Enter 4
    • Click = (Result: 25)
    • Now, with 25 on display, click
    • Result: 5

This calculator is a handy tool for quick calculations, making complex numbers and operations more accessible. Enjoy using it for all your mathematical needs!

.calculator-wrapper { font-family: 'Arial', sans-serif; max-width: 400px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); background-color: #f9f9f9; } .calculator-wrapper h2, .calculator-wrapper h3 { color: #333; text-align: center; margin-bottom: 15px; } .calculator-wrapper p, .calculator-wrapper ul, .calculator-wrapper ol { color: #555; line-height: 1.6; margin-bottom: 10px; } .calculator-wrapper ul, .calculator-wrapper ol { margin-left: 20px; } .calculator-wrapper li { margin-bottom: 5px; } .calculator-container { background-color: #333; border-radius: 5px; padding: 15px; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); margin-top: 20px; } #display { width: calc(100% – 20px); height: 60px; background-color: #222; color: #0f0; font-size: 2.5em; text-align: right; padding: 0 10px; margin-bottom: 15px; border: none; border-radius: 5px; box-sizing: border-box; overflow: hidden; white-space: nowrap; } .calculator-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .calculator-buttons button { background-color: #555; color: #fff; border: none; padding: 20px 0; font-size: 1.5em; border-radius: 5px; cursor: pointer; transition: background-color 0.2s ease; } .calculator-buttons button:hover { background-color: #777; } .calculator-buttons button:active { background-color: #444; } .calculator-buttons .equals-button { background-color: #f09b00; grid-row: span 2; height: auto; } .calculator-buttons .equals-button:hover { background-color: #e08b00; } .calculator-buttons .zero-button { grid-column: span 2; } /* Specific colors for operators and clear */ .calculator-buttons button:nth-child(1), /* C */ .calculator-buttons button:nth-child(2), /* √ */ .calculator-buttons button:nth-child(3), /* / */ .calculator-buttons button:nth-child(4), /* * */ .calculator-buttons button:nth-child(8), /* – */ .calculator-buttons button:nth-child(12) /* + */ { background-color: #f09b00; } .calculator-buttons button:nth-child(1):hover, .calculator-buttons button:nth-child(2):hover, .calculator-buttons button:nth-child(3):hover, .calculator-buttons button:nth-child(4):hover, .calculator-buttons button:nth-child(8):hover, .calculator-buttons button:nth-child(12):hover { background-color: #e08b00; } var currentInput = '0'; var operator = null; var previousInput = null; var resetDisplay = false; function updateDisplay() { document.getElementById('display').value = currentInput; } function appendDigit(digit) { if (resetDisplay) { currentInput = digit; resetDisplay = false; } else { if (currentInput === '0' && digit !== '.') { currentInput = digit; } else { currentInput += digit; } } updateDisplay(); } function appendDecimal() { if (resetDisplay) { currentInput = '0.'; resetDisplay = false; } else if (!currentInput.includes('.')) { currentInput += '.'; } updateDisplay(); } function setOperator(op) { if (operator && !resetDisplay) { calculateResult(); previousInput = parseFloat(currentInput); } else if (previousInput === null || resetDisplay) { previousInput = parseFloat(currentInput); } operator = op; resetDisplay = true; } function calculateResult() { if (operator === null || previousInput === null) { return; } var currentNum = parseFloat(currentInput); var prevNum = parseFloat(previousInput); var result; if (isNaN(prevNum) || isNaN(currentNum)) { currentInput = 'Error: Invalid input'; operator = null; previousInput = null; resetDisplay = true; updateDisplay(); return; } switch (operator) { case '+': result = prevNum + currentNum; break; case '-': result = prevNum – currentNum; break; case '*': result = prevNum * currentNum; break; case '/': if (currentNum === 0) { currentInput = 'Error: Div by 0'; operator = null; previousInput = null; resetDisplay = true; updateDisplay(); return; } result = prevNum / currentNum; break; default: return; } currentInput = result.toString(); operator = null; previousInput = null; resetDisplay = true; updateDisplay(); } function performSquareRoot() { var num = parseFloat(currentInput); if (isNaN(num) || num < 0) { currentInput = 'Error: Invalid input'; } else { currentInput = Math.sqrt(num).toString(); } resetDisplay = true; updateDisplay(); } function clearCalculator() { currentInput = '0'; operator = null; previousInput = null; resetDisplay = false; updateDisplay(); } updateDisplay();

Leave a Reply

Your email address will not be published. Required fields are marked *