User:Kishore016
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Input Box and Button</title>
</head> <body>
<input type="text" id="inputBox" placeholder="Enter text">
<button id="inputButton">Submit</button>
<script src="script.js"></script>
</body> </html> body {
font-family: Arial, sans-serif;
}
.container {
text-align: center; margin-top: 20px;
}
input[type="text"] {
padding: 10px; font-size: 16px;
}
button {
padding: 10px 20px; font-size: 16px; background-color: #007BFF; color: #fff; border: none; cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
document.addEventListener("DOMContentLoaded", function() {
const inputBox = document.getElementById("inputBox");
const inputButton = document.getElementById("inputButton");
const output = document.getElementById("output");
inputButton.addEventListener("click", function() {
const inputValue = inputBox.value;
output.innerHTML = `You entered: ${inputValue}`;
});
});