TTP Day 5 DOM Challenge

For day 5 of the TTP Winter bootcamp, an assignment is given to used to further demonstrate the understanding of HTML, CSS, Javascript and DOM manipulation as well as handling user events.

The goal of this assignment is to create a page that display a table of cells.

In addition to the table, there will be buttons that affect the table such as adding and deleting rows and columns, coloring cells and more.

Ultimately, the user will be able to:

  • add rows to the grid
  • add columns to the grid
  • remove rows from the grid
  • remove columns from the grid
  • select a color from a dropdown menu of colors
  • click on a single cell, changing its color to the currently selected color
  • fill all uncolored cells with the currently selected color
  • fill all cells with the currently selected color
  • clear all cells/restore all cells to their original/initial color
  • click and hold (mouseover) from a single cell (start) to a different cell (end) such that all affected/hovered-over cells from start to end change to the currently selected color