---
# System prepended metadata

title: DOM Events Feature Set

---

# DOM Events Feature Set

## Feature: The Awesome Button

**Scenario**: When Katie clicks on the `awesome` button, remove the first paragraph, and replace it with an image

Image to use: https://media.giphy.com/media/mbhseRYedlG5W/giphy.gif

## Feature: The Coffee Table Generator Button

**Scenario**: When Clare clicks on the `generate-coffee-table` button, generate a 3x3 grid that has the same images of coffee in each cell

Image to use: https://media.giphy.com/media/l09Cqx9PUMCPi8H65V/giphy.gif

**Implementation Details**:

* Grab the 'generate-coffee-table' button
* Create a function that does the following:
    * Create a table element
    * Grabs the div called "insert-table" to insert the new table element
    * Loop to create the rows
        * Nest another loop to create the cells
            * Create images for each cell and give the image source above
            * Append the images to each cell
            * Append the cell to each row
        * Append the rows to the table
    * Append coffee table to new table table element
* Create a click event listener on the button and pass in the function