<!-- Basic CSS styling -->
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
button { padding: 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
button:hover { background-color: #45a049; } label, input { margin-right: 10px; } #output { margin-top: 20px; font-size: 18px; }
</style>
return float(element.value) if element.value else 0.0
output = page.find("#output")[0]
output.innerHTML = ""
<!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>
<!-- Basic CSS styling -->
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
button { padding: 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
button:hover { background-color: #45a049; }
label, input { margin-right: 10px; }
#output { margin-top: 20px; font-size: 18px; }
</style>
</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="number" id="input1"><br><br>
<!-- Label and input field for the second number -->
<label for="input2">Number 2:</label>
<input type="number" 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, defaulting to 0 if empty
def value(input):
element = page.find(input)[0]
return float(element.value) if element.value else 0.0
# Define a function to handle the button click event
@when('click', '#btn')
def add():
# Clear the output div before displaying new result
output = page.find("#output")[0]
output.innerHTML = ""
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>