Random quote machine in 5 mins…30 tops? An open challenge!
A few weeks back I had finished my Random Quote Generator Machine project from freeCodeCamp (FCC).
Shortly after, I received an indirect comment from a professional software developer. It was something along the lines of,
I could do that in 5 minutes! It’s a very basic project!
My reaction was…5 minutes?!?!?! No way!
There is no way that someone could build (from scratch) and fulfill all the requirements of the FCC random quote machine in 5 minutes! Not possible!
Let alone to make it look nice!
After some clarifying comments, they had mentioned that the project shouldn’t take more than 30 minutes to complete. To me, even that seems like a bit of a stretch.
To go from a blank canvas to a fully working one in 30 minutes?
This got me thinking. I know that there are many talented developers out there who can build amazing things, but just how quickly?
Challenge 1
Build a fully functional FCC Random Quote Machine in 5 minutes? Having it fulfill these requirements:
- The user can obtain a new random quote by clicking on a button.
- The user can press a button that tweets out a quote.
What do you all think about this? Is it possible to do in 5 minutes? Is there anyone out there who thinks that they could do this?
I would love to hear your comments, or possibly watch someone work their magic. Especially from any pros, or senior campers out there.
Now what about the other aspect. What can a professional create in 30 minutes?
Challenge 2
Create a fully functional, and nice looking, random quote generator in 30 minutes? One that also has a responsive design, and with the same user requirements as before.
While “nice looking” is quite ambiguous, the example provided looks like below.
I would definitely say that it is a nice looking design. Simple, clean, and clear. Overall it is very well done.
Now for a comparison, my Random Quote Machine project is shown in the image below. I was told by a few people that it looks ugly, and isn’t nice.
I know that one of the things which I tend to struggle with is color design. This is something that I need to improve upon and it is all part of the learning process.
It also gives people an idea of what “nice looking” expectations are.
Now does anyone think it is possible to build (from scratch) a nice looking random quote machine/generator in 30 minutes? Can anyone do it?
For those wondering…
What is involved in building this project?
If you aren’t on the freeCodeCamp curriculum, or haven’t done this challenge, here is a quick overview of what one would need to do.
Javascript
There are basically two approaches that one can take.
1.) Create an array, object or combination to store all the quotes & authors
Here is where it is ambiguous. As how many quotes are required for a good user experience? 5? 10? 50? I think there would need to be at least 10 quotes stored. Though 15–25 would definitely be much better.
2.) Quote API
This involves finding a free API to use that generates random quotes for you. One can either retrieve a large amount of quotes at once, or simply one. Note that if you only get one, it takes a longer time to load between retrieving new quotes.
The other aspects can be summed up as:
- Randomly picking a quote (except when doing constant API requests).
- Modifying the HTML to show the new quote and author upon click
- Handling the tweet button, when clicked, to tweet the quote
You could also add functionality to restrict the quote lengths for different screen sizes, or to ensure that the quote length is appropriate for tweeting.
All these are little things that do add up to provide a greater user experience.
HTML & CSS
I won’t go into much detail, but basically provide the structure, layout and design for the Random Quote Machine.
The aim is to achieve a nice look/feel/design that works everywhere.
Are you interested? I’d like to hear your comments and see what you think! Possible or impossible? Or you can also send me a message on Twitter.
