To create an "Add" program in HTML, you can use HTML for the structure, CSS for styling, and JavaScript for functionality. Here is a simple example of an addition calculator:
### HTML
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Addition Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
}
.container {
max-width: 300px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
p {
font-size: 1.2em;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>Addition Calculator</h2>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<button onclick="addNumbers()">Add</button>
<p id="result"></p>
</div>
<script>
function addNumbers() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var sum = num1 + num2;
document.getElementById('result').textContent = "Result: " + sum;
}
</script>
</body>
</html>
```
### Explanation
1. **HTML Structure**:
- A basic HTML structure is created with a title and body content.
- Inside the body, a `div` container with a class of `container` holds the calculator elements.
- Two input fields for the numbers to be added.
- A button that triggers the `addNumbers` function when clicked.
- A paragraph to display the result.
2. **CSS Styling**:
- Basic styling for the body, container, input fields, button, and result paragraph.
3. **JavaScript Function**:
- The `addNumbers` function retrieves the values from the input fields, converts them to floating-point numbers, adds them, and displays the result in the paragraph.
You can save this code in an `.html` file and open it in your browser to see the addition calculator in action.
No comments:
Post a Comment