This doesn’t quite make sense. You can’t use fetch directly with local files on your computer, it has to go through a web server, the argument you are passing into fetch is a URL. Perhaps you are running a web server on your computer and fetching through localhost? Or did you mean that you uploaded a file to some place on the internet and fetched it from there?
If you want to read a file directly on your computer without needing to go through a web server then you need to use the FileReader API.
Correct, you can’t populate something until you have the information to populate it with After you get the information (whichever method you use) then you would most likely store it in some sort of data structure and then call a function that can populate the words using that data structure. The key here is that you call this function after you get the information. The method you are using to get the information will determine where you do that. Fetch uses promises, FileReader uses events, localStorage uses standard synchronous functions.
My guess would be that you would want your aunt to be able to load this information from a local file on her computer so you would use FileReader to get the words initially. Then you can store them in localStorage so she doesn’t have to load the file every time she opens the app.
What you are referring to here is called a Progressive Web App (PWA). To get you started check out this article on FCC.
One thing I might recommend is that you move this out of codepen and do the development on your local computer. The size of this is getting way too big for codepen. You should probably start thinking about splitting up your JS code into separate, more manageable files. All modern browsers support modules now. Your UI is getting fairly complicated so you might even consider switching to a framework.
Also, if I can recommend some accessibility enhancements, I would not use mouseover to trigger the words list, I would use click instead. It’s way too easy to accidentally move your mouse out of the words container and then they all disappear and you have to go back and hover over the letter again to get your words back. Or maybe someone is using some sort of pointer device with their mouth and can’t “hover” over the letters? At the least maybe have an option to let the user choose between displaying the words on hover or on click.
Is your aunt going to be able to help you test this? If so, I would start testing as early as possible. This is a great idea and a very admirable goal but there are going to be a lot of accessibility issues. If you really only care about your aunt being able to use this then you can just focus on her issues. But if you want other people to be able to use it then you really need to start focusing on accessibility for everyone from the very beginning. For example, I know your primary focus is using a mouse, but people who use a keyboard (or assistive tech that simulates the keyboard) could benefit from this so you would want to make sure it is completely keyboard accessible as well.
Good luck with this. I hope it can help your aunt.