1+ // Array of assorted colors
12const colors = [ '#FF6633' , '#FFB399' , '#FF33FF' , '#FFFF99' , '#00B3E6' ,
23'#E6B333' , '#3366E6' , '#999966' , '#99FF99' , '#B34D4D' ,
34'#80B300' , '#809900' , '#E6B3B3' , '#6680B3' , '#66991A' ,
@@ -10,12 +11,15 @@ const colors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
1011'#E64D66' , '#4DB380' , '#FF4D4D' , '#99E6E6' , '#6666FF'
1112] ;
1213
14+ //Selections of the main div, h1, and links on the page for DOM manipulation.
1315const div = document . querySelector ( ".boxes" )
1416const h1 = document . querySelector ( "h1" )
1517const links = document . querySelectorAll ( 'a' )
1618
19+ // Function that creates a set number of boxes displayed on the page
1720function createBoxes ( number ) {
1821let colorIndex = 0 ;
22+ // Loops through a set number of times, creates new boxes, assigns color from the array, and pushes it to the main div.
1923for ( let i = 0 ; i < number ; i ++ ) {
2024let box = document . createElement ( 'div' ) ;
2125box . style = `background-color:${ colors [ colorIndex ] }
@@ -26,13 +30,17 @@ function createBoxes(number) {
2630colorIndex = 0 ;
2731} else { colorIndex ++ }
2832}
33+
34+ //Puts an Event Listener on the main div that removes the target (child) element and updates the amount of boxes on the page.
2935div . addEventListener ( 'click' , function ( e ) {
3036e . target . remove ( ) ;
3137h1 . textContent = `There are${ div . querySelectorAll ( '.box' ) . length } ;
3238} ) ;
3339}
3440
3541for ( let i = 0 ; i < links . length ; i ++ ) {
42+ /* Loops through all of the links on the page and adds an Event Listener on them to put a set amount of boxes on the page and
43+ update the amount of boxes on the page */
3644links [ i ] . addEventListener ( 'click' , function ( ) {
3745div . innerHTML = ''
3846createBoxes ( Number ( links [ i ] . textContent ) )