<!DOCTYPE html><html lang="en"><head> <!-- Specifies the document type as HTML5 --> <meta charset="UTF-8"> <!-- Ensures proper rendering and touch zooming on mobile devices --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Link to the PyScript CSS for styling --> <link rel="stylesheet" href="https://pyscript.net/releases/2025.2.3/core.css" /> <!-- Imports the PyScript JavaScript module --> <script type="module" src="https://pyscript.net/releases/2025.2.3/core.js"></script> <!-- Sets the title of the webpage --> <title>Add Two Numbers</title></head><body> <!-- Main heading of the webpage --> <h1>Add Two Numbers</h1>
<!-- Label and input field for the first number --> <label for="input1">Number 1:</label> <input type="text" id="input1"><br><br>
<!-- Label and input field for the second number --> <label for="input2">Number 2:</label> <input type="text" id="input2"><br><br>
<!-- Button to trigger the calculation --> <button type="button" id="btn">Calculate</button>
<!-- Div to display the output result --> <div id="output"></div>
<script type="mpy"> # Import necessary functions from PyScript from pyscript import when, display from pyscript.web import page
# Helper function to get the float value of an input element def value(input): return float(page.find(input)[0].value)
# Define a function to handle the button click event @when('click', '#btn') def add(): try: # Use the helper function to get the input values number1 = value("#input1") number2 = value("#input2") # Calculate the sum result = number1 + number2 # Display the result in the output div display(f"The result is: {result}", target="output") except ValueError: # Handle the case where the input is not a valid number display("Please enter valid numbers.", target="output") </script></body></html>