JavaScript DOM Select Update Page elements Background Fun with JavaScript Coding example exercise

Background Color Table Fun Learn JavaScript JavaScript DOM Select Update Page elements Background Fun with JavaScript Coding example exercise

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.

Exercise :
Create a variable object for the number of rows and columns in the table.
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.
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.
Create a function to create buttons, add 3 buttons to the page.
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
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.
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.
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.

Course content web development and web design courses with coding examples and source code for the lesson content. Source Code is available within my Github account. Lessons posted are designed to help students learn more about a specific topic related to modern web development and applying code.
Laurence Svekis is a professional top selling course author having instructed over 1 Million students both online and in person. Laurence Svekis is a Google Developer Expert specializing in Google Workspace automation using Google Apps Script Code.

Tags and Keywords

#AppsScript #googlesheets #workspace #accounting #finance #automation modern web design online course #onlinecourses #modernwebdesign #tips #appsscript #coding #codingtutorial #script #scriptinghelp #google #Viral #subscribe #helping #GoogleAppsScript #Gmail #Attachments #Spreadsheet #Automation #GmailAttachments #GoogleAppsScript #EmailProductivity #Automation #SpreadsheetLogs #AttachmentDetails #TechTips #ProductivityHacks #GoogleDrive #GmailSearch #GoogleAppsScript #Spreadsheet #Email #Automation #Iteration #subscribe
#GoogleSheets #GoogleAppsScript #CustomUIMenu #SpreadsheetTips #ProductivityTips #TechTutorial #CodingTutorial #BeginnerFriendly #StepByStepGuideSubscribe -