Untitled

avatar
unknown
plain_text
a year ago
2.5 kB
3
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Result Display</title>
    <!-- Include Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1>Result Display</h1>
        <form id="inputForm" class="mb-4">
            <div class="mb-3">
                <label for="inputN" class="form-label">Enter n:</label>
                <input type="number" class="form-control" id="inputN" required>
            </div>
            <div class="mb-3">
                <label for="inputP" class="form-label">Enter p:</label>
                <input type="number" class="form-control" id="inputP" required>
            </div>
            <div class="mb-3">
                <label for="inputK" class="form-label">Enter k:</label>
                <input type="number" class="form-control" id="inputK" required>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <div id="result" class="alert" style="display: none;"></div>
    </div>

    <!-- Include Bootstrap JS and jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/js/bootstrap.min.js"></script>

    <script>
        // Add event listener to the form
        document.getElementById('inputForm').addEventListener('submit', function (event) {
            event.preventDefault(); // Prevent form submission

            // Get the input values
            const n = parseFloat(document.getElementById('inputN').value);
            const p = parseFloat(document.getElementById('inputP').value);
            const k = parseFloat(document.getElementById('inputK').value);

            // Check if the conditions are met
            if (n === 90 && p === 42 && k === 43) {
                displayResult("Rice", "success");
            } else {
                displayResult("Some other text", "danger");
            }
        });

        // Function to display the result message
        function displayResult(message, alertType) {
            const resultElement = document.getElementById('result');
            resultElement.textContent = message;
            resultElement.classList.add(`alert-${alertType}`);
            resultElement.style.display = 'block';
        }
    </script>
</body>
</html>
Editor is loading...