Just finished my quote generator! Dedicated it to India, which is my home away from home.
I first tried to replicate the example design (which I really loved), then got more creative from there.
While working on this project I finished the jQuery and Javascript courses on CodeCademy, so I tried to push myself to my limits as much as I could. It’s my first jQuery and Javascript project.
Features include:
- No quotes will be repeated until all quotes are viewed
- Achievement alert appears when all quotes are viewed (inspired by my Xbox 360 days)
- Quote history
- Back-to-top button (useful when quote history gets long)
- Randomly generated background image
- No background image will be repeated until all bg images are viewed
- Press ‘right arrow’ on keyboard for next quote
- Self-made responsive grid with break points (I wanted to wean myself off of Bootstrap)
- Mobile and laptop tested
And I did my own quote gathering instead of using an API. This allowed me to get comfortable working with arrays. I’ll use APIs in the next projects.
To Do / Bugs:
- Get only the background image to fade in/out without causing the Quote Box to also fade
- Prevent flickering of the top 25 pixels of Quote History when changing background image
- Clicking a quote in history list will display it back on the main box (seemed simple enough in theory, but ended up becoming a huge bug fest when trying to implement…)
If you find any other bugs or have any design or code feedback, please do share