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.
For the first part, we will be simply 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.
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.
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).