A11 – DOM Modifications

1 . Add a files named dommod.htmldommod.css, and dommod.js to the appropriate directories in your csci230 directory.

2. Copy the bootstrap navigation bar and footer from one of your pages to your dommod.html file.

3. In your dommod.html file create a scene (of anything you like) using at least 7 visual elements.  Center the scene on the page.

4. In the footer of your page, create 7 buttons.  Center the buttons in the footer.

  • Button 1 should add a visible element to the DOM thus adding it to the scene.
  • Button 2 should remove a visible element from the DOM thus removing it from he scene.
  • Button 3 should change the z-index of an element causing a visual change in the scene.
  • Button 4 should modify the style of an element.
  • Button 5 should modify the text on this button 5.

5. Use setInterval() at least once in the scene.  The method passed to setInterval should cause a visible change to the scene.

6. Use setTimeout() at least once in the scene.  The method passed to setTimeout should cause a visible change to the scene.

© 2021, Eric. All rights reserved.