for the past week, I have been working on this project, precisely: “Random Quote Machine“. Appreciatively, this project has been one of the previous projects that has rolled me around to learn some other important aspects of Backend and Frontend Developer. In a concise phrase, the path has been a great one.
Furthermore, this project, that is the Random Quote Machine, has led me to spend a week on fetch(). Throughout the entire ended week, I was busy learning other application of fetch() and it was great.
Nonetheless, I came this week with the ideas I learned from fetch() exercises to apply some to the project on hand, but I have continued to have five more Tests failed. I have rearranged the same JavaScript code and checked for bug . I know I am missing something but I can’t figure it out at the moment. With that being said, can someone please take a look at my project and help me with some hints. Thanks in advance.
I did rewrite the HTML and and adjusted the CSS styles. Likewise the JavaScript too. I tried to used React, but I later decided to just continue with JavaScript
Actually, it’s quite easy to map over the data fetched, but is it necessary in this project? I have updated the uniform resource locator (url) several times, but none of them retrieved the expected data anticipated. That is why I omitted the “s“ from the quote to try it again.
After fixing a couple of things in your code, the console reported a cors issue: “Access to fetch at ‘https://type.fit/api/quotes’ from origin ‘https://cdpn.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
While it’s true you can access the data by directly clicking the link, you cannot access it via a fetch(). As I understand it, this can be fixed if using node; otherwise, it would need to be fixed on the server.
BTW, your latest code showed an error where the const urL was defined, but you used url. Also, message is part of the error object, not the other way around. And both of your external stylesheet links bombed on my end because the integrity could not be verified. When I removed the integrity and cross-origin attributes, the left quote displayed, but the twitter icon never did display.
Not at all. No quote has appeared on the interface. I wrote this same application in VS Code and result was the same. But I am still patiently applying other ideas .
Thanks once again for the update. I am certain that some of these errors occurred as a result of rearranging the code blocks. As for the twitter logo, that is another thing I have wrestled to have it display. I have changed the “hypertext reference‘ (href) of twitter, but the logo hasn’t still appeared.
First and foremost, I would like to use this moment to say thank you. The generosity showed from everyone of you, has meant a lot and they have been humbly received. I am a student. I knew from the outset of this path, I would have encounter a lot of challenges. This notion was foresaw and it became one of the strenuous inspirations and/or motivations that led me alone this path of great engineers role models. Each challenge encountered sofar, has taught me something valuable and unforgettable. And these are just some of the positive effects that has been acquired. Thank you all.
Nonetheless, I will attach the twitter link and style the icon.
I have done some adjustment to the project, but kept encountering “Uncaught TypeError“. Based on my finding and basic understanding of TypeError, it is a result of the action executed. But this result is contrary to the expectation. Can some take a quick look at the JavaScript in my project and point some diagnosis? Attached is copy of my screenshot. data.length is actually the total content assumed to be contain in the fetched data of the API.
