Tribute Page 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.

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/zNqgVx

Here are the user stories for campers to reference:

Content:

My tribute page should have a main <div> element with corresponding id="main", which contains all other elements.
I should see an <h1> element with corresponding id="title", which contains a string (text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug").
I should see a <div> element with corresponding id="img-div".
Within the "img-div" element, I should see an <img> element with a corresponding id="image".
Within the "img-div" element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in "img-div".
I should see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page.
I should see an <a> element with a corresponding id="tribute-link", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to "_blank" in order for your link to open in a new tab (i.e. target="_blank").

Layout:

The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
The <img> element should be centered within its parent element.

@p1xt Bootstrap shouldnā€™t be pre-loaded. Weā€™d rather campers build these in raw CSS for practice. Weā€™ll make that change.

Hereā€™s an attempt of the tribute page from the forked from the blank:

http://codepen.io/jmcilhargey/pen/ENXeRJ

Mr Pelley gave a thought provoking acceptance speech this week where he talks about the importance of honest and open journalism http://www.cbsnews.com/news/scott-pelley-honored-with-walter-cronkite-award-for-excellence-in-journalism/

@QuincyLarson @P1xt - Bootstrap does come pre-loaded in the pen, and for the time being it needs to stay that way, as it is a dependency of the testing suite. However, by no means are campers required to use Bootstrap. By the time this all gets rolled out, bootstrap will be bundled in to the test suite and campers will only have one dependency pre-loaded in their pens.

@P1xt Thanks for picking this up, the user story reflected this, but the test text itself was never updated. Fixed!

As for the other failing testā€¦ working on it. And kind of stumped.

@jmcilhargey- Thanks! I uncommented the testing variable in the JS section and your tests are passing!

@P1xt - the more and more I look at the test that is still failing, the more and more I realize it is not even a necessary test. I think we will likely delete this user story. In which case, all of your tests would pass.

I am getting 404 Page not found error here http://codepen.io/no_stack_dub_sack/pen/KNmjWg.

I second that. Iā€™m getting the same thing :frowning:

@Freak0ut @DanStockham Thatā€™s my bad! Please use this link: https://codepen.io/FCC_test_suites/pen/QGMMZO. I will edit the OP to avoid further confusion.

The last blank pen link listed (https://codepen.io/FCC_test_suites/pen/QGMMZO) has an error that keeps the tests from running:

Worked through using the blank pen listed in the challenge map (http://codepen.io/FCC_test_suites/pen/JbgXab), and was able to make the tests pass one at a time without any major hiccups: http://codepen.io/chznbaum/pen/RKVoKX (Have not done anything to make it pretty yet, just to pass the tests).

Things I noted:

  • HINT: You must give your <a> element an attribute of target and set it to "_blank" in order for your link to open in a new tab. is included on both user story 6 and user story 7, when it only seems necessary on 7.
  • And out of curiosity, for user story 1 is there a reason for the <div id="main"> as opposed to the <main> element?

I need help, the test says the image must be centered, but that brakes down the flow of my page, how can I pass the test without messing things up.

Here is my tribute page that passed all the tests.

For the "<img> element should responsively resize" user story, what is required to test? Or is the test omitted entirely?

@chznbaum sorry, thatā€™s my bad, I updated the links yet again, but forgot that I had made that post, please see the OP for the correct links to the test suites. Sorry, I know this is a little late, Iā€™ve been totally swamped lately!

1 Like

@xNavid Great job! I see you got that test to pass, and the page looks great! One of the better looking tribute pages Iā€™ve seen. Really well done!

Not sure if it is known issue, but @rmdawson71 found another bug.

I also noticed sort of a bug. Test 1 of #layout states:

The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

But if you set a fixed width it will still pass, as long as you have .img-responsive on the img.

@BenGitter Hey man, thanks for triaging this and getting it to the right place! Iā€™ve recently added a ā€œreport bugā€ button to the test suite, so hopefully folks will now click that link which will take them to a new issue page on the repo. Iā€™ll look into this one!

EDIT: just noticed your bug as well. Want to open an issue? https://github.com/freeCodeCamp/testable-projects-fcc/issues/new

1 Like

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: