How do I add the local JSON file in fetch API in CodePen?

I am doing the Random Quote Generator project and wrote the code for it in the VS Code editor and ran it on live server. I wanted to ask some questions regarding it like smooth background transitions and tweeting quote so, decided to put the code in codepen and realized that I will have to change the JSON file location in the fetch API in order for it to work in the codepen. I tried creating a new codepen specifically for JSON file and then put its link in the fetch API in the original codepen but it didn’t work. So, any idea how should I go about it?

Here’s how it looks like when I run it on live server:

Do you have a GitHub account?

You can put your JSON file in a repository or gist and link to the raw file.
I sometimes use a this placeholder data file for testing. To link to it there is a button that says raw, click it and use that URL as source.

1 Like

Awesome! It worked. Thanks a lot! :smiley:

I did create a GitHub account but haven’t learned Git yet. Looks like I will have to learn it soon. Thanks again!

1 Like

Hey, for some reason the link stops working after a few minutes in the codepen and I have to go back and click on the raw button again to copy the link and put it back in the fetch. Any idea why is that happening?

Do you have a link to the repository?

Do you mean this link?

https://github.com/smartdev007/Avengers-Quote

yeah, I get a 404 for that link.

Maybe that’s because it’s set to private. I made it public now. Can you check again?

Now it’s working, I see you updated the link in the request already as well.

Nice job, I really like that you change the background image to match with the author!

Yeah, making it private was the problem I guess.

Thanks for the feedback :smiley:

Also, I want to implement a couple of things into the project. For which, I have created a separate thread. Here’s the link if you would like to take a look into it.