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.
Start with the provided index.html file. Put all JavaScript for this Lab in the js file. Do not change the structure of the HTML other than 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. 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." 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. To understand the output goal, watch the video "js_lab_output" found in the lab repository. Follow the video instructions for testing and turning in labs (How to Turn In Labs). Turn in the following: Repo Link Live Link You do NOT need to submit an HTML validation or a comparison image.
| Project Name | Level | Recommended Tech | Link/Status |
|---|---|---|---|
| Lab1 - Basic of HTML | Beginner | HTML, CSS | Completed |
| Lab2 - Sematic HTML, list, other tags | Beginner | HTML, CSS | Completed |
| Lab3 - Basic page markup and tables tags | Beginner | HTML, CSS | Completed |
| Lab4 - Putting everything together (nav, div, tables, other tags) | Beginner | HTML, CSS | Completed |
| Lab5 - HTML Form | Beginner | HTML, CSS | Completed |
| Project 1 - Basic HTML Project | Beginner | HTML | Completed |
| Lab6 - CSS style | Beginner | HTML, CSS | Completed |
| Lab7 - Style an HTML Table | Beginner | HTML, CSS | Completed |
| Lab8 - Added sidebar and nav | Beginner | HTML, CSS | Completed |
| Project 2 - Added CSS to Project 1 | Beginner | HTML, CSS | Completed |
| Lab9 - Basic of JS | Junior | HTML, CSS, JS | Completed |
| Project 3 - Added JS, bootstrap, and made responsive to Project 1 & 2 | Junior | HTML, CSS, JS, API, bootstrap | Completed |