04. Mouse Gradient

function attachGradientEvents() {
    //get html elements
    let gradientWrapper=document.getElementById('gradient');
    let result=document.getElementById('result')
    //add event listeners
    gradientWrapper.addEventListener('mousemove', action);
    gradientWrapper.addEventListener('mouseout', gradientOut);
    //call function
    function action(event){
        //get the box width
        let gradientWidth=event.currentTarget.offsetWidth;
        //get mouse position on gradient Box
        let positionOfTheMouse = event.offsetX / (gradientWidth - 1);
        //get percentage of the mouse X axis
        let percentage = Math.trunc(positionOfTheMouse * 100);

        result.textContent = percentage + "%";
    }
    //when mouse is outside of gradient Box make the result equal empty string
    function gradientOut() {
        result.textContent = "";
        }
}