Random Quote Generator - [Animated]

Code Feedback
1

Hello fellow campers,

I just leave here my random quote generator for computer science quotes. It’s my second attempt to build this challenge the way I wanted to be. Some of you might think that the animations are an overkill but I tried to explore and learn as many things as I could in the process.
Any brutal honest feedback is appreciated.

Some guidelines for the app. Apart from clicking the “New quote” button to get a new quote you can press the “N” or “n” button on your keyboard as well. I’d like if possible to test it on your mobile devices and tablets as well, so I could have a feedback on the responsiveness also.
Sometimes the api that fetches the quotes is a bit slow so even after the “reload” you see the same quote but please be patient.
I’ll update this post the moment I get the Tweet functionality ready. I’m off to coding again.

Good luck to every one of you on your projects.

edit: CodePen link

https://codepen.io/nikoskdr/full/aJxXRm/

1 Like
2

I believe you’re some kind of genius, because I am one too and I have almost the same design (I’m just kidding - MyCode). I really say so because I’ve read several forum post about this topic, and everyone use ajax or hard-coded quotes, but you did it exactly the way it is required using an API and JSON as FCC has taught us so far. I tried for three days in a row and I gave up because I thought it wasn’t possible to get a JSON object because the cross-origin restriction from CodePen, that’s why most of people learn ajax and they do it that way, but I didn’t want to do it that way. I was about posting I give up but I found this, you did it using HerokuApp as a secProxy which is amazing for me, so please tell me:

  1. How did you realize the cross-origin request was an obstacle to get a JSON easily?
  2. How long did it take you to figure it out?
  3. How did you find this Heroku site to solve the issue?
  4. How and where do you host your project externaly?

Besides that:
You design is neat, responsive and cool. I think the background changing is too much, and your animation is quite long, you could make it shorter or use one smoother. You could have a better title design and… your tweet is using more characters than allowed. (I’m not a designer but maybe my opinion could help you)

Great job! :punch: I hope you can help me explaining this cross-origin request restrictions that I still don’t understand and FCC never explained. :pray:

3

Hello there,

I admit that I’m some kind of genius if you one :smile: !
To answer your questions:

  1. First of all my original design was without the heroku secure proxy. I just called the api over codepen and then I realised that the request was not working correctly. I use chrome developer tools to check for functionality errors or warnings on my final product. If you press Ctrl+Shift+I on any webpage you’ll be presented with the developer tools. I saw the cross-origin error there.
  2. The error message was pretty clear about http requests over https and vise versa so I was of to googling to find a solution.
  3. The solution came from a comment on facebook group fcc-earth where I posted my question and someone pointed me to this heroku app. It does the job pretty well, although it adds a minor delay to the api requests.
  4. I have a web-hosting solution that I have bought for other reasons, since I’m building and maintaining other websites as well, so I have my own personal “corner” there for my hobby projects.

Hope these answer all your questions. I’d be happy to answer more if you have.

PS. Your codepen quote generator is not working for my, but I’ll test it when I get home more, as I am from my smartphone right now.

1 Like
4

Thank you for your answer, I think the Chrome Developer Tool and the Facebook group were vital to solve this challenge. :thumbsup:

Mine wasn’t working because I was still struggling to find a solution, even today I haven’t have enough time to finish the tweet button, tonight I’ll finish this challenge once and for all.