https://mniloy1123.github.io/assignment5/

• Due June 15th, 2023 by 10:00:00AM
• Points 20
• Submitting Fill out all of the appropriate information in the Bootcamp Tracker Google Sheet (see pinned items in the Cohort Slack Channel)

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

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

  Grading criteria

  • Code has a comment that notes/documentation on which problem/feature the particular function is attempting to solve
  • All solutions should explicitly fulfill the requirements noted in each problem.
  • Complete: Meets all grading criteria above.
  • Incomplete: Does not meet all grading criteria above. Needs improvement or missing submission.