Create a dynamic webpage with styled sections and interactive features focused on click logging, using JavaScript for DOM manipulation as per the given requirements.
Inside the div with the class container, dynamically create three div elements using data from sectionDetails. Each div should have the class section and the specified class from sectionDetails, for example: section-one. Add text content like Section 1, Section 2, etc. to each section.
When hovering over a section, change its background color to red. When the mouse moves out, revert the background color to its original value as defined in sectionDetails.
Create a div element inside the log-section with the class click-log. We will be calling this the click-log section from now on.
Inside the click-log section, add a heading <h2> with the text Click Log.
When a section is clicked, add a new <p> element inside the click-log section. The <p> element should display Clicked on div 1, Clicked on div 2, or Clicked on div 3, depending on the clicked section.
Below the <h2> inside the click-log section, create a <button> with the text Clear Log. When clicked, the button should remove all <p> elements inside the click-log. The heading <h2> should remain intact after clearing the log.
All tasks must be completed using JavaScript for DOM manipulation and event handling. No direct modifications to the provided HTML or CSS files are allowed. Use the sectionDetails array of objects provided in the code to construct the exercise.
We are not displaying the answer for this exercise.
We do this because we want you to challenge yourself
and
not give in to the temptation of looking at the solution.
We also don't want to leave you stuck, so if you feel
you have tried enough and are still unable to solve
this exercise, feel free to ask in our community.
Here is the link to join the community.
