I'm working on a mobile-first task tracking app that's meant to have a calming feel, and I'm trying to add a quote card below the calendar to show a random quote with a stunning background image. I was making good progress until I started interacting with DOM elements in my `index.js` file. Now, I'm running into errors with my Unsplash API call. The current error I'm facing is `ReferenceError: results is not defined`, which seems to stem from my attempts to get the image URL for the quote background. I know the correct format for Unsplash should be something like `data.urls.` but it's not functioning as expected. If anyone can help pinpoint the issue or offer suggestions, I would greatly appreciate it! I've linked my project repository for reference.
2 Answers
It looks like you're trying to use `results` where you should be using `result`. The line `const topImage = result.results?.[0] || results[0] || result;` has `results` mistakenly included, which could lead to your `ReferenceError` since that variable isn't defined anywhere in the code. Use `result[0]` instead, which should fix part of your problem.
Another common issue could be with how you're accessing the background image. Since you're getting a `TypeError` suggesting the `urls` property is undefined, check to ensure your API response structure aligns with how you're trying to access it. You might want to log the results to see the whole object and confirm you're targeting the right properties.
Thanks for the tip! I removed `results` but now I’m hitting another snag—I've got `ReferenceError: document is not defined` popping up during testing. Any thoughts?