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 trial

JavaScript Express Basics Serving Static Files in Express Merging the Design Files

Nick Hericks
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nick Hericks
Full Stack JavaScript Techdegree Graduate 20,704 Points

How 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
Michael Macdonald
34,265 Points

Thanks 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nick Hericks
Full Stack JavaScript Techdegree Graduate 20,704 Points

Step 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
Luke Sims
5,767 Points

Also add card { margin-top: 50px; } to stop the overlap of the namecard and card forms!

Thank 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Jonathan Drake
Full Stack JavaScript Techdegree Student 11,668 Points

Maybe 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.