FP-JS-DOM-testing-in-the-browser

Exercises

Create a webpage that has:

1. A H1 tag
2. A H2 tag
3. A Header that contains a list of navigation items, styled to be horizontal across the top of the screen
4. A section which contains three paragraphs, each paragraph should correspond to an item on your header

Create the following events on your webpage

1. If a user clicks on the h1 tag, the background should change colour, if they move their mouse out of the space the background should return to the original colour.
2. If a user hovers over a h2 tag replace the words inside it to contain a greeting
3. If someone types a letter whilst viewing the webpage a new paragraph should be created and that letter should be added to it.
4. If someone clicks on one of the navigation items the styling of the connecting paragraph should change to be more bold and be a larger font size. If they click again on the same navigation item, the paragraph should revert to original styling.

Testing

1. Take a look at the test suite in the demo code
2. Try adding some Jest tests for the existing features in your webpage
3. Add test(s) for a feature that you have not yet implemented - maybe an easter egg!
4. Use your new test(s) to help you add the new feature