20min
Let's display a person's first and last name really large on the page so that they don't forget what it is.
- Using jQuery, create a
clickevent handler that will capture the form contents when the user clicks the "Show my name" button - Display their first and last name onto the page by manipulating the DOM.
BONUS: Add a "<select>" element with options for "Mr, Mrs, Ms" and display the user's selection on the page also.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>What's my name?</title>
<style type="text/css">
body {
margin: 10% 2%;
}
form, h2 {
margin: 30px;
}
input {
width: 25%;
padding: 8px;
font-size: 120%;
}
h2 {
font: bold 170%/135% Helvetica, Arial, sans-serif;
color: #333;
}
#btn-show {
background-color: green;
color: #fff;
}
</style>
</head>
<body>
<form name="name-form" id="name-form">
<input type="text" name="fname" id="fname" placeholder="First name">
<input type="text" name="lname" id="lname" placeholder="Last name">
<input type="button" name="btn-show" id="btn-show" value="Show">
</form>
<h2>Hello, my name is <span id="first">__________</span> <span id="second">__________</span> and I like long walks on the beach.</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// Wait until the DOM is ready before proceeding
$(function() {
// Write your event handling code here
});
</script>
</body>
</html>