Color Blocks - Solo Challenge(s)

We will be building up an application that creates Color Blocks on the DOM based off of buttons that are loaded right away. Additionally, we are going to be tracking the number of Blocks in each color we create. When the user clicks on a color button, it will create a Color Block, then add to that colors count.

Part 1: HTML/CSS

Assignment Objectives

• Practice Read and Write skills
• Solidify HTML & CSS knowledge
  • HTML elements, attributes
  • using class and id
  • Box Model and layout

Required Functionality

For the first part, we will be adding Color Blocks to the DOM using HTML & CSS. More specifically, create a Red, Yellow, Green, and Blue blocks when the application loads. They should be 100px in width, and 100px in height. They should have 10 px of space between each box.

Here is an example of what your application should look like after Part 1

---

Part 2: jQuery

Assignment Objectives

• Practice Read and Write skills
• Solidify jQuery knowledge
  • Selectors
  • Dynamic Content
  • Methods .on(), .append(), empty()

Required Functionality

Add 4 buttons that read 'Red', 'Yellow', 'Green', and 'Blue'. When you click on those buttons, it should add a Color Block of that associated color to the DOM. Above the buttons, should be total counts for each colors relative to the number of times the button has been clicked, thus the total number of color blocks of that color.

Here is an example of what your application should look like after Part 2

Stretch Goals

Make it so that when you click on one of the color blocks, it deletes that block, and then updates the color count. Create an input field that allows users to add multiple blocks at a time (e.g. 4 green blocks instead of just one).