Assignment-5

DOM Challenges 3

Goal: This is another exercise to further demonstrate an understanding of HTML, CSS, JS, DOM manipulation, and handling user events

Direction: For each user story, make a feature branch. Try to commit often and commit frequently on each feature branch. Please incorporate GitHub Projects as well, using the Automated Kanban template. Create a note for each user story and then convert that note to an issue. Remember, try to have your branches named as closely to the feature/ticket/issue it is intended to build out. Do not forget to type in “closes #” in the body of Pull Requests to close associated issues.

Click on a ticket/issue and explore the different sections such as “Assignees, Labels, and Projects” and make sure that your ticket is associated to your project, otherwise your PRs and Tickets won’t be automated and tethered together (this should be done for you already, but double-check).

A few useful methods, properties, and events for this assignment:

• getElementById()
• addEventListener()
• getElementsByTagName()
• createElement()
• appendChild()
• event.target
• node.children
• Array.from()
• mousedown
• mouseover
• mouseup

Assignment: Based on the in-class demonstration, complete the following user stories:

As a user, I can:

• 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