Merging the Design Files

Bonus Challenge

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

This course has been about writing JavaScript to assemble and serve webpages to browsers. But, as you know, you can run JavaScript in the browser too, to add interactivity to the pages an Express app serves. These two environments, the server-side and the client-side, are worth knowing about and understanding. You have probably written client-side JavaScript already, in previous treehouse courses, for example. That's the JavaScript that is loaded into HTML and manipulates the DOM, among other things.

The Challenge

When our users are studying flashcards, they will likely want to try to guess the answer before they see the hint, and then show the hint if they get stuck. The challenge is to write some JavaScript to hide the hint by default and present a button the user can click to reveal the hint.

Setup

You can serve JavaScript files from the public folder, the same way you're doing with CSS.

1. Create a new folder in public, next to stylesheets, and name it js.
2. Inside, create a new file called app.js. This is where you'll write the client-side JavaScript.

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>

Solution

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

• Using SQL and Node.js with Sequelize
• SQL Basics
• Mongo Basics

Documentation

• Piped Text in Pug.js

Design Files

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.

• jade converter
• html2jade