Learn JavaScript - DOM background Colors Project

Background Color Table Fun

This exercise will build an interactive table of colored cells that can be clicked to apply the cell background color to the page.  In Addition several buttons to update the background colors of the table cells. The table will be dynamically generated using values for columns and rows. The application will also include 3 interactive buttons to update the page elements.

Button actions when clicked :

1. Add random background colors to all the td elements in the table
2. Get the color values from the elements in the row above, apply them to the following row creating a shifting down of the row colors to the below row. First row gets new random colors.
3. MoveLeft effect, when clicked will get the background color of the next element, and apply it to the element. The last element in the table will get a new background color randomly created.

The table can be created using JavaScript and loops. Set the number of rows for the main loop, and within that loop nest a second loop that will create td elements to the number of columns needed. Using the rows and columns the JavaScript code can then generate a table.

Use document.createElement() to create new page elements.

Using the loops below you can create a table with JavaScript code.

 const tbl = document.createElement('table');

for (let y = 0; y < rows; y++) {

       const tr = document.createElement('tr');

       for (let x = 0; x < cols; x++) {

  const td = document.createElement('td');

           tr.append(td);

       }

tbl.append(tr);

}

JavaScript and DOM methods you can use and properties to update elements.

• document.querySelector() can select page elements
• Update the innerHTML of an element with innnerHTML property value
• Add event listeners to the element with addEventListener('click', () => {})
• Update style properties using style.width, style.border, style.textAlign, style.backgroundColor, style.border, style.color
• Append elements to other elements using append() or appendChild() AppendChild will return the element where are nothing is returned with append()
• Use push() to add items into an array
• Loop through and array or NodeList with forEach((val, ind) => {})
• To create a random HEX color you can use `#${Math.random().toString(16).slice(2,8)}`

Coding Exercise below :

1. Create a variable object for the number of rows and columns in the table.
2. Create a function to add the table to the page.  The table function should create the main table element, loop through the rows and cols adding the tr and td page elements.   
3. Generate and set the style of the cell width using the cols value, so that the cells take up the full width of the page.
4. As you add the td cells to the table, document.createElement('td') then add a text value of the number, then add some styling like border and text align.  
5. Add an event listener to the td element, when clicked update the document.body background to the same as the table cell background color.
6. Create a function to generate random colors, Math.random().toString(16).slice(2,8)
7. Create a function to create buttons, add 3 buttons to the page.
8. Add an event listener to the first button, when clicked it should select all the page td cells from the main table.  As it loops through the elements update the background to a random color
9. Create a second page button, this one will have an effect of moving the colors down one row.  Select all the td cells from the main table.  Create a holding array, as you loop through the cells, for the first row generates random values.  Add these to the holding array.  As you move through the second row, subtract the number of columns from the ind value of the td element.   This will give you the value of the element that is in the row above.   Get the background Color of the element above and add it to the holding array.
10. Once you complete the holding array it should have all the color values with one row shifted down, now loop through the holding array and apply the background colors to the matching td elements from the node list.
11. Create a third button.  Once this button is clicked, loop through all the td elements in the main table.  Update the background of the current element to the color of the element background to the right by one index value.   For the last element td add a random background color.

Source Code

const output = document.querySelector('div');

console.log(output);

output.innerHTML = '';

const tabValue = {

   rows: 5,

   cols: 9

}

const main = addTable(output, tabValue.rows, tabValue.cols);

const btn1 = btnMaker(output, 'Random', 'blue', 'white');

const btn2 = btnMaker(output, 'MoveDown', 'red', 'white');

const btn3 = btnMaker(output, 'MoveLeft', 'purple', 'white');

btn3.addEventListener('click', (e) => {

   const tds = main.querySelectorAll('td');

   for (let i = 0; i < tds.length; i++) {

       console.log(tds.length, i);

       const bgColor = (i + 1 == tds.length) ? ranColor() : tds[i + 1].style.backgroundColor;

       console.log(bgColor);

       tds[i].style.backgroundColor = bgColor;

   }

})

btn1.addEventListener('click', (e) => {

   const tds = main.querySelectorAll('td');

   console.log(tds);

   tds.forEach(ele => {

       console.log(ele);

       ele.style.backgroundColor = ranColor();

   })

})

btn2.addEventListener('click', (e) => {

   const tds = main.querySelectorAll('td');

   let holder = [];

   tds.forEach((ele, ind) => {

       let temp = ind - tabValue.cols;

       let tempColor = '';

       //console.log(temp);

       if (temp >= 0) {

           const el = tds[temp];

           tempColor = el.style.backgroundColor;

           //ele.style.backgroundColor =

       } else {

           tempColor = ranColor();

       }

       holder.push(tempColor);

   })

   console.log(holder);

   holder.forEach((val, ind) => {

       tds[ind].style.backgroundColor = val;

   })

})

function ranColor() {

   return `#${Math.random().toString(16).slice(2,8)}`;

}

function btnMaker(parent, html, clr, fntColor) {

   const btn = document.createElement('button');

   btn.innerHTML = html;

   btn.style.backgroundColor = clr;

   btn.style.color = fntColor;

   return parent.appendChild(btn);

}

function addTable(parent, rows, cols) {

   const tbl = document.createElement('table');

   tbl.style.border = '1px solid black';

   const tblby = document.createElement('tbody');

   tbl.append(tblby);

   let counter = 0;

   let wid = (100 / cols) * 100;

   for (let y = 0; y < rows; y++) {

       const tr = document.createElement('tr');

       for (let x = 0; x < cols; x++) {

           const td = document.createElement('td');

           counter++;

           td.textContent = `${counter}`;

           td.style.width = `${wid}px`;

           td.style.border = '1px solid #ddd';

           td.style.textAlign = 'center';

           tr.append(td);

           td.addEventListener('click', () => {

               document.body.style.backgroundColor = td.style.backgroundColor;

           })

       }

       tblby.append(tr);

   }

   return parent.appendChild(tbl);

}