40 lines
1.1 KiB
HTML
40 lines
1.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>When I'm told to show my best project</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
form {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<form id="form1">
|
||
|
|
<label for="namei">Name:</label><br>
|
||
|
|
<input type="text" name="namei" id="namei"><br>
|
||
|
|
<label for="agei">Age:</label><br>
|
||
|
|
<input type="number" name="agei" id="agei" max="99" min="0"><br>
|
||
|
|
<input type="button" value="Submit" id="submit" onclick="display()"><br>
|
||
|
|
</form>
|
||
|
|
<h1>Output</h1><br>
|
||
|
|
<span id="output"></span>
|
||
|
|
<script>
|
||
|
|
function display() {
|
||
|
|
let name = document.getElementById("namei").value;
|
||
|
|
let age = document.getElementById("agei").value;
|
||
|
|
let output = `Your name is ${age} and you are ${name} years old`;
|
||
|
|
document.getElementById("output").innerHTML = output;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
<!-- Money buys happiness. -->
|