How to Make A Square Root Calculator in Html

This guide will walk you through creating a simple square root calculator using HTML, CSS, and JavaScript. The calculator will allow users to input a number and see its square root, with proper error handling for invalid inputs.

HTML Structure

The HTML structure provides the basic layout for our calculator. We'll create a form with an input field for the number and buttons for calculation and reset.

Basic HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>Square Root Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <h1>Square Root Calculator</h1>
        <form id="calculator-form">
            <label for="number-input">Enter a number:</label>
            <input type="number" id="number-input" required>
            <button type="button" id="calculate-btn">Calculate</button>
            <button type="reset" id="reset-btn">Reset</button>
        </form>
        <div id="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

The HTML includes:

A heading for the calculator
A form with a number input field
Calculate and Reset buttons
A div to display the result

CSS Styling

Basic CSS styling will make our calculator look presentable. We'll style the form elements, buttons, and result display area.

Basic CSS Styles

body {
    font-family: Arial, sans-serif;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

.calculator {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

label {
    font-weight: bold;
}

input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#calculate-btn {
    background-color: #4CAF50;
    color: white;
}

#reset-btn {
    background-color: #f44336;
    color: white;
}

#result {
    margin-top: 20px;
    padding: 10px;
    background-color: #e9f7ef;
    border-radius: 4px;
    display: none;
}

The CSS includes:

Basic layout and spacing
Styling for form elements
Different colors for the buttons
Styling for the result display area

JavaScript Functionality

The JavaScript will handle the calculation and display of results. We'll add event listeners to the buttons and implement the square root calculation.

JavaScript Code

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('calculator-form');
    const numberInput = document.getElementById('number-input');
    const calculateBtn = document.getElementById('calculate-btn');
    const resetBtn = document.getElementById('reset-btn');
    const resultDiv = document.getElementById('result');

    calculateBtn.addEventListener('click', function() {
        const number = parseFloat(numberInput.value);

        if (isNaN(number) || number < 0) {
            resultDiv.textContent = 'Please enter a valid positive number';
            resultDiv.style.color = 'red';
            resultDiv.style.display = 'block';
            return;
        }

        const squareRoot = Math.sqrt(number);
        resultDiv.innerHTML = `The square root of ${number} is ${squareRoot.toFixed(4)}`;
        resultDiv.style.color = 'green';
        resultDiv.style.display = 'block';
    });

    resetBtn.addEventListener('click', function() {
        resultDiv.style.display = 'none';
    });
});

The JavaScript includes:

Event listeners for the buttons
Input validation to ensure positive numbers
Square root calculation using Math.sqrt()
Result display with formatted output
Reset functionality to clear the result

Note: The square root calculation uses JavaScript's built-in Math.sqrt() function, which returns the principal (non-negative) square root of a number.

Complete Code Example

Here's the complete code for our square root calculator, combining all the parts we've discussed:

Complete HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Square Root Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
        }

        .calculator {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            text-align: center;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        label {
            font-weight: bold;
        }

        input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #calculate-btn {
            background-color: #4CAF50;
            color: white;
        }

        #reset-btn {
            background-color: #f44336;
            color: white;
        }

        #result {
            margin-top: 20px;
            padding: 10px;
            background-color: #e9f7ef;
            border-radius: 4px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1>Square Root Calculator</h1>
        <form id="calculator-form">
            <label for="number-input">Enter a number:</label>
            <input type="number" id="number-input" required>
            <button type="button" id="calculate-btn">Calculate</button>
            <button type="reset" id="reset-btn">Reset</button>
        </form>
        <div id="result"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('calculator-form');
            const numberInput = document.getElementById('number-input');
            const calculateBtn = document.getElementById('calculate-btn');
            const resetBtn = document.getElementById('reset-btn');
            const resultDiv = document.getElementById('result');

            calculateBtn.addEventListener('click', function() {
                const number = parseFloat(numberInput.value);

                if (isNaN(number) || number < 0) {
                    resultDiv.textContent = 'Please enter a valid positive number';
                    resultDiv.style.color = 'red';
                    resultDiv.style.display = 'block';
                    return;
                }

                const squareRoot = Math.sqrt(number);
                resultDiv.innerHTML = `The square root of ${number} is <strong>${squareRoot.toFixed(4)}</strong>`;
                resultDiv.style.color = 'green';
                resultDiv.style.display = 'block';
            });

            resetBtn.addEventListener('click', function() {
                resultDiv.style.display = 'none';
            });
        });
    </script>
</body>
</html>

This complete code includes all the HTML, CSS, and JavaScript we've discussed, packaged into a single file that you can save and run in any web browser.

Frequently Asked Questions

What is the formula for calculating square roots?

The square root of a number x is a value y such that y² = x. In JavaScript, we use the Math.sqrt() function to calculate this.

Can I calculate square roots of negative numbers?

No, the square root of a negative number is not a real number. Our calculator only accepts positive numbers.

How accurate are the results?

The results are accurate to 4 decimal places, which is sufficient for most practical purposes.

Can I use this calculator for complex numbers?

No, this calculator only handles real numbers. For complex numbers, you would need a more advanced calculator.

Is this code compatible with all browsers?

Yes, this code uses standard HTML, CSS, and JavaScript that should work in all modern browsers.