Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialNick Hericks
Full Stack JavaScript Techdegree Graduate 20,704 PointsHow to fix the bugs in this project, complete the flashcard project successfully, and win at life!
If you've completed the flashcards project and your app has bugs, this may likely help to explain why and how to fix them. Refer to the steps in answer below.
Michael Macdonald
34,265 PointsThanks heap bro!! Adding 'side' as the 4th property for the 'templateData' varaible....that was the one thing I was missing, and I actually repeated this course 2x to try figure out what I missing.....fun times...lol chur bro
4 Answers
Nick Hericks
Full Stack JavaScript Techdegree Graduate 20,704 PointsStep one:
Unfortunately, in this video an incorrect class is assigned. In the app.pug template file, '.namecard-login' should be changed to '.namecard-hello'
So app.pug should look like this:
extends layout
block main
section.namecard
.namecard-hello
if name
p.namecard-greeting Welcome, #{name}!
form.namecard-exit(action='/goodbye', method='POST')
button(type='submit')
img(src='/static/img/close.svg')
else
p.namecard-greeting Hello, student!
block intro
block card
Step two:
In the cards.pug template file, add the 'side' variable as a fourth property to the templateData object. So it should look like:
const template = { id, text, name, side };
Step three:
If you haven't already done so, download the designer assets available at the bottom of the teacher's notes and in addition to creating a 'stylesheets' sub-folder within the 'public' folder, also create an 'img' sub-folder and include all the designer supplied image assets. And if you plan on doing the additional challenge, create a 'js' sub-folder and create an 'app.js' file within that sub-folder.
Step four:
Celebrate 🎉
Thank you to everyone in this older post for helping figure this out.
Luke Sims
5,767 PointsAlso add
card { margin-top: 50px; }
to stop the overlap of the namecard and card forms!
CHEN AN CHOU
5,387 PointsThank you! Helps a lot! And there's another bug in "style.css"!
.card-flip-wrap {
position: absolute;
bottom: 10px;
left: 20px;
padding-left: 500px: /* change : into ; */
}
Jonathan Drake
Full Stack JavaScript Techdegree Student 11,668 PointsMaybe I'm missing something, but I don't see "namecard-hello" in the css file. I can't see the drop box file in the original post so I'm not sure if I'm having the same problem, My problem is that the goodbye "X" button is on a separate line from the Welcome greeting.
Otavio Araujo
Full Stack JavaScript Techdegree Graduate 18,671 PointsOtavio Araujo
Full Stack JavaScript Techdegree Graduate 18,671 PointsThanks man! I was stuck trying to figure out the class part.