Improve the applications links.
I'll show you how I solved the problem of redirecting the user to a random card. 0:00 In the cards.js file I first created a new route using the router.get method. 0:06 Remember because we're inside a router that is mounted in the cards route. 0:14 In the app.js file We don't need to start any of our URLs with cards. 0:19 After creating this route, 0:29 I've first needed the total number of cards we have to choose from. 0:30 I could have counted the cards manually 0:35 from the JSON file that we're pulling the data from. 0:38 But if I wanted to add more cards later, I'd need to change this number. 0:41 So I just use the length property on the cards array. 0:48 Then I generated a random number using math.random. 0:53 Math.random generates a random number between 0 and 9.9 we're carrying. 0:58 So to get the random number from 0 to the card's length, 1:05 I multiply it by length of the array. 1:10 Then I use Math.floor on the result to convert the number to an integer. 1:14 Then I plug that number into the URL and it's used to move to a different page. 1:20 I've got a couple of smaller challenges for you now. 1:28 First, try to go to a specific card's URL, say three. 1:31 When I hit Return, you'll see that the page is mostly blank. 1:42 And it doesn't have the query string. 1:48 That's because this route requires a query string to know what 1:50 values to render back to the user. 1:55 Try adding some code to redirect our users to see the question side of 1:58 the flash card by default. 2:02 Pause this video if you want to work it out on your own. 2:04 In card JS, in the route that says individual cards, 2:09 I checked for the presence of this site. 2:14 If this site doesn't exist, 2:30 I want to redirect, To the same card, 2:34 With the query string added pointing to the question side. 2:47 Let's try the app, And it works. 2:58 Now, I can remove the query string from the end 3:03 of this URL to make it a little cleaner. 3:08 Note that this is not a bulletproof implementation. 3:12 To demonstrate, try using values beside question and answer on the query string. 3:17 You can even try adding word hint. 3:24 That's odd. 3:29 I'll let you work out what's going on there and how to fix it. 3:30 If you want to, 3:35 try discussing it with your fellow students in the Treehouse community. 3:36 The take away here is that is not always obvious 3:40 how to keep users from falling into potholes in your app. 3:43 It's very important to work out though, 3:47 because users will find all sorts of problems one way or another. 3:49 This is why testing software is so important. 3:54 Testing is beyond the scope of this cause. 3:58 I have linked just some treehouse content in the teacher's notes. 4:00 I have another small challenge. 4:04 Are you ready? 4:06 Add link to the flash card page that allows the user to move to another 4:07 randomly selected card. 4:11 We've already done a lot of the leg work to accomplish this, 4:13 but to implement this feature, 4:19 I can just put a link underneath the side to slash cards. 4:22 The links would sit right next to each other on the page, and 4:33 didn't break them up some way. 4:37 You can try it in your own code to see what I mean. 4:40 But I used the break element next to the next card link to 4:43 separate it on the next line from the equation and answer link. 4:48 Now that our users can move through our flashcards easily, 5:00 let's give them a way to get from the home page to the flashcards. 5:04 I'll just copy this link. 5:10 And paste it into the index Pug. 5:14 I'll wrap it in a paragraph tag, I'll change the text to begin. 5:19 Now here's the greeting for our user and the button to say goodbye. 5:28 Let's put this. 5:33 And paste it just under our header template and above the content block. 5:37 Then the user can access the goodbye button from any page in the app. 5:46 Now if I look at the card in the browser, 5:54 you see that we have a welcome and a goodbye button, which is great. 5:58 But the name isn't printing. 6:03 The card template doesn't have access to the name variable 6:07 from the snipit we just pasted in. 6:11 It's not hard to connect it, though. 6:14 Remember it's in a cookie. 6:16 I'll go to cards.js, to where the route serves the individual page. 6:19 I can declare const name and assign the username value from the request's cookies. 6:33 Now I can pass the name into the template. 6:45 Now let's view a card in the browser. 6:49 So my username isn't showing up. 6:53 And if I check in the cookies, there's no values there. 6:54 I'm not logged in. 6:58 So let me just login real quickly. 7:00 Andrew. 7:03 And then refresh. 7:07 There it is. 7:08 There's one more problem though, and you may have just seen it on the other page. 7:10 When I click on Goodbye The Welcome and Goodbye buttons appear. 7:14 Even when the cookie is cleared and the name is undefined. 7:22 We can hide that with the conditional. 7:25 Let's go back into our layout template, And then nest it if the name exists. 7:28 Now when you refresh the browser, they welcome and button disappear. 7:43 I'll put my name in and they come back. 7:49 Our flash card app is nearly complete, great job on getting this far 7:54
You need to sign up for Treehouse in order to download course files.Sign up