Design a Square Root Calculator in Tailwind CSS

subramanya m
1d
187
0
1

Article

The Square Root Calculator is a web application designed to calculate the square root of given number. It provides users with a user-friendly interface to input a number calculate its square root and view the result.

Approach / Functionalities:

Input Field: Users can enter a number into input field.
Calculate Button: When clicked, calculates the square root of entered number and displays the result.
Clear Button: Resets the input field and result.
Error Handling: Displays an error message if the input is invalid.

Example :

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Square Root Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center items-center h-screen">
    <div class="bg-white p-8 rounded shadow-md w-80 border border-green-500">
        <h1 class="text-3xl font-bold text-center mb-4">Square Root Calculator</h1>
        <div class="mb-4">
            <label for="number" class="block text-gray-700">Enter a number:</label>
            <input type="number" id="number" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500" placeholder="Enter a number">
        </div>
        <div class="flex justify-between">
            <button id="calculateButton" class="bg-blue-500 text-white rounded-md py-2 px-4 hover:bg-blue-600 focus:outline-none">Calculate</button>
            <button id="clearButton" class="bg-red-500 text-white rounded-md py-2 px-4 hover:bg-red-600 focus:outline-none">Clear</button>
        </div>
        <div id="result" class="text-lg font-semibold text-center mt-4"></div>
        <div id="errorMessage" class="text-red-500 text-sm mt-2 hidden">Please enter a valid number.</div>
    </div>
    <script>
        document.getElementById('calculateButton').addEventListener('click', () => {
            const number = parseFloat(document.getElementById('number').value);
            const result = document.getElementById('result');
            const errorMessage = document.getElementById('errorMessage');
            if (isNaN(number)) {
                errorMessage.classList.remove('hidden');
                result.textContent = '';
            } else {
                errorMessage.classList.add('hidden');
                result.textContent = `Square Root: ${Math.sqrt(number).toFixed(4)}`;
            }
        });
        document.getElementById('clearButton').addEventListener('click', () => {
            document.getElementById('number').value = '';
            document.getElementById('result').textContent = '';
            document.getElementById('errorMessage').classList.add('hidden');
        });
    </script>
</body>
</html>

output: