Change color on multiple text elements on mouseover using JavaScript

Steps to change color on multiple text elements on mouseover in JavaScript:

Step 1. Add id to div wrapper element or whatever element your using

<div id="main-wrapper"></div>

Step 2. Add class to p elements. These element will change color on mouseover

<p class="change-color">Change color on mouse over</p>
<p class="change-color">Change color on mouse over again</p>

Step 3. Place p elements in div wrapper

<div id="main-wrapper">
   <p class="change-color">Change color on mouse over</p>
   <p class="change-color">Change color on mouse over again</p>
</div>

Step 4. Identify div wrapper element in JavaScript using id

const mainWrapper = document.getElementById('main-wrapper');

Step 5. Identify p elements in JavaScript using class

const changeColor = document.getElementsByClassName('change-color');

Step 6. Add mouseover event to div wrapper element by using the id in JavaScript

mainWrapper.addEventListener('mouseover', function handleMouseOver() {});

Step 7. Place p elements in mouseover event and loop through p elements using class

mainWrapper.addEventListener('mouseover', function handleMouseOver() {
    for (let i = 0; i < changeColor.length; i++) {
      changeColor[i].style.color = '#05a30d';
    }
});

Step 8. Do the same as above for mouseout

mainWrapper.addEventListener('mouseout', function mouseOut() {
    for (let i = 0; i < changeColor.length; i++) {
      changeColor[i].style.color = '#000000';
    }
});