
Lab 38 was about creating 3 concentric divs that would log a message in the console whenever the user clicked on them. In the HTML, I made a div within a div which itself was within another div, giving each div a unique class, and in the CSS, gave all the divs the same width and padding. This way I acheived the concentric look. Each div was given a unique color to make that more clear. In the JS, I stored all the divs in an array and created a function, logText(e), that would log the class of the div that was clicked. Using a .forEach method, I added this function to an event listener for all divs that fired after the div was clicked.
These skills are important for a web designer because they can be used for troubleshooting. If a particular element of a webpage is supposed to be clicked and do something yet when you test it, it doesn't work, you can use console.log() in the way we did in this lab to see if an actual event has been added to the element at all. A lot of times, a function is created but isn't added as an onClick or through .addEventListener so using console.log to see if there is an actual event listener can help troubleshoot this.
Comments
Post a Comment