Create a dynamic webpage with styled sections and interactive features focused on click logging, using JavaScript for DOM manipulation according to these requirements,
Create Section Divs
Inside the div with the class "container", using JavaScript dynamically create three <div> elements with the class section and an additional class named section-one, section-two, and section-three respectively. Applying these classes will take care of the styling.
Add Click Log Section
Inside the div with the class "log-section", create another <div> element with the class click-log and a <h2> heading with the text "Click Log" using JavaScript.
Hover Effect
Add an event listener to each section <div> so that when the cursor hovers over any section, its background color changes to red, and reverts to its original color on mouseout.
Click Event Logs
Implement functionality such that when a user clicks on any section <div>, dynamically add a <p> element to the click-log section with the text "Clicked on div 1", "Clicked on div 2", or "Clicked on div 3" based on the <div> number.
Clear Button
Inside the div with the class "log-section" itself, at the bottom of the click-log section, create a <button> with JavaScript that clears all entries from the log when clicked.
Make sure all tasks are completed using JavaScript for element creation, event handling, and DOM manipulation to improve user interaction and logging functionality. Use the sectionDetails array of objects provided in the code to construct the exercise.
Make sure all tasks are accomplished using JavaScript for element creation, event handling, and DOM manipulation to enhance user interaction and logging functionality. Make use of 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.
