I'll guide you through how I merged the design files with the app we built.
You may have noticed the finished app in the video has a feature we did not create in this course. In the video, the hints are hidden until the user clicks a button to show them. The challenge described below will be to implement this feature!
Server-Side vs Client-Side
- Create a new folder in
public, next to
stylesheets, and name it
- Inside, create a new file called
Writing the Feature
You'll need to
- Hide the hint.
- Create and append a button element to the DOM.
- Add an event listener to the button to unhide the hint when the button is clicked.
- Also, make sure the code only runs on the question side of the flashcard.
Below is a snippet of HTML for use as a guide to what structure the DOM should have after it's manipulated. Try to match this if you want the page to be styled correctly.
<div id="content"> <h2>What is one way a website can store data in a user's browser?</h2> <button>Show hint</button> <p class="hint" style="display: none;"><i>They are delicious with milk</i></p> </div>
Wen you're ready to see a solution to this problem, look at the completed app in the downloadable project files.
Getting Started with Databases at Treehouse
Here are the assets from the designer. They model the HTML you'll need to replicate with Pug templates. This can be a difficult, non-linear project, and there aren't necessarily right or wrong answers.
HTML to Pug
HTML to Pug converters may still refer to Pug's old name, Jade. These tools aren't absolutely failsafe, but they will get you close. In most cases, they will probably get you close enough to be helpful.
You need to sign up for Treehouse in order to download course files.Sign up