/testing-dom-button

Primary LanguageJavaScript

Study Notes

| JavaScript in the Browser | Simple Dev Server | DOM Testing | Jest Mocks |

Exercises

Working in pairs:

  1. Create a webpage that has:
  • A H1 tag
  • A H2 tag
  • A Header that contains a list of navigation items, styled to be horizontal across the top of the screen
  • A section which contains three paragraphs, each paragraph should correspond to an item on your header
  1. Create the following events on your webpage
  • 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.
  • If a user hovers over a h2 tag replace the words inside it to contain a greeting
  • If someone types a letter whilst viewing the webpage a new paragraph should be created and that letter should be added to it.
  • 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.
  1. Testing
  • Take a look at the test suite in the demo code
  • Try adding some Jest tests for the existing features in your webpage
  • Add test(s) for a feature that you have not yet implemented - maybe an easter egg!
  • Use your new test(s) to help you add the new feature