Sorry no, youâve done far too much and most of it is wrong.
Can you please just do the simple small thing that has been asked of you, which is to move the addEventListener to the init function. Nothing more.
You will get an console error saying: âUncaught ReferenceError: body is not definedâ
That is when you place a copy of the body variable in the init function.
There are a few other good ways to deal with that.
One way is to add a body variable to the init function. That does though result in us having a body variable in two places, one in resetPage, and one in init. That doesnât become a problem until we have three such duplicates in the one module. If that occurs we can then move one of them up to a higher level, such as to the top of the module, and use that single body variable from all other places instead.
Another way to solve that is to use a technique called âinline the variableâ where the body variable is removed and we instead use what it refers to instead in the code, that being document.body.
However, none of that needs to be solved right now. Itâs perfectly good and okay to have two body variables in different places, especially when thereâs no good way for one of them to refer to the other. Itâs when three-such examples occur though that concern is merited.
After doing that we get a new error message: âUncaught ReferenceError: onAnimationEnd is not definedâ
The onAnimationEnd variable isnât doing anything useful. We already know that itâs for the animationend event, and itâs just acting as an indirect pass-through to the fadeResetHandler function. Here we get rid of that indirection, and just use fadeResetHandler instead of onAnimationEnd.
The init function is now happy, and there is some cleaning up to do, but the bulk of the work is done.