Reference no: EM132158922
Use the provided HTML file and add a basic event handler to the page so that when the button is clicked the browser alerts the contents of the form input control added to your name and also changes the contents of the headline below the button to contain the contents of the form input control.
Process:
Start with the provided PP5.html file.
Put all JavaScript for this Lab embedded in the html file. Only turn in this one HTML file.
Add your name and email where indicated.
Do not change the structure of the HTML other than adding your info noted in step 3 and adding your JavaScript to the page.
Write JavaScript code to do the following things based on the demos we did in class.
Add an event listener to the Alert Me div so that when it is clicked it will run some code.
When the button is clicked it should do two things.
(1) It should show an Alert box with the contents of the text field in the Alert box. I want you to also append your name and a colon (name:) before the value of the text box. For example if the text box says This is a test, I would have the Alert say Daniel Krieglstein: This is a test
(2) Also it should change the value of the h2 below the button to have the text contents of the text input control. Do not append your name to this one. Just have the exact contents of the text box.
I will show an example of this behavior in class in a final version of the lab.
Submit the HTML file to the Basecamp collection of Production Problems.
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lab 7 - Basic JavaScript Event Handling and DOM</title>
<style type="text/css">
.center {
text-align: center;
}
#container {
width: 400px;
margin: 50px auto 0;
}
#entryinput {
width: 100%;
}
#entrybutton {
width: 200px;
text-align: center;
color: #fff;
background-color: #c00;
padding: 2em 0;
margin: 20px auto;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<h1 class="center">ITMD-361 - Lab 7 - Basic JavaScript Event Handling and DOM</h1>
<h2 class="center">Your Name Here</h2>
<h3 class="center">Your email here</h3>
<div id="container">
<input id="entryinput" type="text" name="textentry" placeholder="Enter a Message">
<div id="entrybutton">Alert Me</div>
<h2 id="textoutput" class="center">Show results here</h2>
</div>
<script type="text/javascript">
</script>
</body>
</html>