Random Quote Machine Project with testable user stories - Guinea Pigs needed 🐹

As you may have heard, @no-stack-dub-sack and @Weezlo have been hard at work building projects with testable user stories. We are looking for a few volunteers to attempt to build these based on their automated tests.

This is a brand-new project that should be a ton of fun to build: a drum kit! Note that the test suite may not yet work in browsers other than Chrome.

The goal is for campers to be able to build these projects step by step following user stories. This will make the projects less intimidating and more fun. Oh, and don’t worry - we’ll still have plenty of optional projects where we don’t provide you with any tests. And if you’ve previously built these projects, you don’t need to build them again.

If you’re interested in attempting this, please reply to the thread and let us know you’ve started it. The more people who want to build this, the better, as we can start gathering feedback.

Thanks, and happy coding!

Here is the blank pen for campers to fork: http://codepen.io/freeCodeCamp/pen/MJjpwO

Here is the example project with passing tests: http://codepen.io/freeCodeCamp/pen/qRZeGZ

User Stories


  1. I can see a wrapper element with a corresponding id="quote-box".
  2. Within #quote-box, I can see an element with corresponding id="text".
  3. Within #quote-box, I can see an element with corresponding id="author".
  4. Within #quote-box, I can see a clickable element with corresponding id="new-quote".
  5. Within #quote-box, I can see a “tweet” button with corresponding id="tweet-quote".
  6. On first load, my quote machine displays a random quote in the element with id="text".
  7. On first load, my quote machine displays the random quote’s author in the element with id="author".
  8. When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element.
  9. My quote machine should fetch the new quote’s author when the #new-quote button is clicked and display it in the #author element.
  10. I can tweet the current quote by clicking on the #tweet-quote button. This button should use the “twitter.com/intent/tweet” path to tweet the current quote.


  1. The #quote-box wrapper element should be horizontally centered.

Test number 10 is a bit misleading

I can tweet the current quote by clicking on the #tweet-quote button. This button should use the “twitter.com/intent/tweet” path and tweet the current quote.

And assertion error:

AssertionError: #tweet-quote button must have an href attribute : expected false to be truthy

But according to specs button doesn’t have href attribute: https://www.w3.org/TR/html5/forms.html#the-button-element

I went with <a> styled as a button. Also as there wasn’t a requirement to use API, I just created an array with quotes.

@jenovs Whoa - don’t know how I missed this for so long, sorry I’ve been buried. But good feedback, thanks! I think button is used a little loosely here as well, I think I remember thinking it should say “clickable element” when I was going through this actually, and I will change it to that.

As always, thanks for participating, you’ve been a big help in QAing these.

No API required - totally cool the way you did it.

EDIT: fixed assertion errors and associated user stories - thanks

I’ve been getting random timeout errors on tests 8 and 9 (I believe it only happened in Editor View)
Test 11 (#Layout 1) seems to be failing in Editor View but passing in Full Page View…
I’d added the error messages / call stacks at the bottom of the CSS tab in the Codepen because I can only include 2 links in my posts.

Hey @christophherr, sorry for the late reply - so everything seems to be running correctly on my end, were you able to figure out the issue? Did the timeout issues only happen every now and then or consistently? If this is still happening for you - feel like opening an issue on the repo? https://github.com/freeCodeCamp/testable-projects-fcc/issues

Hi @no-stack-dub-sack, no worries.

I just tested the timeout issue again and it happened in about 50% of tests.
Maybe just increase the timeout?

The Layout test keeps failing in the editor view.
I´m using a 13.3" monitor and always have a scroll bar in the editor view.
I think clientWidth does not take a scroll bar into account and might be throwing off the calculations in testHorizontallyCentered.
Would offsetWidth be a viable alternative to clientWidth?

Should I open separate issues for timeout and centering?

@christophherr Yeah, that sounds good, separate issues for separate errors works for me! Also, feel free to clone the repo and run locally if you feel like playing around and seeing what might work! There’s a pretty good contributing doc on the repo that explains how to test the changes locally, also PRs should follow freeCodeCamp’s general contributing guidelines as well.

Thanks and let me know!

Thanks @no-stack-dub-sack.
I opened the issues and will see if I can figure something out.

perfect! Feel free to message me on Gitter (where I am most easily and reliably reachable) if you run into any issues or have any questions. Thanks!

I refactored my old Quote Machine a little bit for test-suites, bit it doesn’t pass the Layout test. The quote-box was centered with margin: 2% auto; - it didn’t pass. I added flexbox in the body tag, centered it with flexbox, and now it passes only if I don’t have any margin on box-quote. If I add margin-top or margin: 2% auto; , test fails. But without it quote-box is just on top and it’s kinda ugly.
http://codepen.io/enk/pen/PWedvY Here’s my pen.

Hey @Enikol, just curious - what browser are you using? My guess is chrome since the test suite is really finicky in other browsers, if it works at all, but I’m messing around with you code and with our without flex on the body and with margin: 2% auto it seems to be passing all tests fine

Yep, I’m using Chrome, and it still doesn’t pass the test with margin: 2% auto in editor view, but passes in full-page view, so it’s probably the same problem previous commentator had.

@Enikol Hmmm… it’s just odd that I can’t reproduce the issue. Which OS are you on? Not sure that should make a difference, but trying to narrow this down and see if it is in fact the same issue that @christophherr was having. Are you seeing any errors in the console? And what is the error the test is throwing?

This is what I’m getting on my end, on Chrome, Mac OSX 10.11.7.

@no-stack-dub-sack I’m using Windows 10, no errors in the console, here’s the tests:

@Enikol Ok, last thing, would you mind giving me some info on your display / setup? i.e. Laptop/desktop, monitor size?

@no-stack-dub-sack Desktop, 24". Also, I just tried changing the layout on Codepen - I usually use horisontal layout, but I changed it to vertical, editor on the side, like on you screenshot, and now it passes tests just fine! Probably because in this layout there is no scrollbar (on my monitor, at least), so I think it might be the same issue @christophherr had.

@Enikol Would you mind running my pen with a scroll bar present (e.g. decrease the height of the browser window and reload the page) and check the value for delta in the console?
Just wondering if it changes depending on screen size.

@Enikol Ahhh, very interesting. That’s what I like about the Mac version of Chrome, the scroll bar always autohides!

Sure! Ran it, delta value was 8.5

Thanks for your feedback so far, everyone!

I’m thrilled to announce that our testable challenges now feature a link you can click to report a bug or submit feedback.

I’m closing this topic. We can continue discussing specific issues as they come up over on the testable-projects-fcc repo. Happy coding and QA’ing! :slight_smile: