Integrating HTML and JavaScript

I have embedded by codepen ABOVE to demonstrate how JavaScript add interactivity in the browser.

When you click on the HTML tab, you can see I used a p tag to just write my name.
When you click on the CSS tab, you can see all the styling to make my name look like a button that is clickable.

Now, if you didn't have any JavaScript written, hovering the mouse over my name would look like a button that is interactive. You could click on it, but nothing would happen.

Go ahead and click on the JS tab. I will explain line-by-line what the JavaScript is doing in the browser.

1. I am asking JavaScript to go into the HTML document and grab my p tag that I decided to name "para."
2. I am adding an event listener to "para" I created. I want the JavaScript to listen for the event of a "click" then perform the function to change the name that is listed.
3. In this line, I created the function to actually allow anyone to change the name if you click the button. The function is creating a prompt that when you click on the button, JavaScript recognizes the event listener in the previous step and knows it needs to do something. So I tell it to create a prompt that states you can change your name.

Thus, we have created interaction in the browser by using JavaScript.

Go ahead and try it for yourself!