Linking Around the Application

Author: codingChewie

routes/cards.js

@@ -4,15 +4,26 @@ const eyes = require('eyespect')
 const { data } = require('../data/flashcardData.json')
 const { cards } = data
 
+router.get('/', (req, res) => {
+  const numberOfCards = cards.length
+  const flashcardId = Math.floor(Math.random() * numberOfCards)
+
+  res.redirect(`/cards/${flashcardId}`)
+})
+
 router.get('/:id', (req, res) => {
   eyes.inspect(req.query, 'req.query')
 
   const { side } = req.query
   const { id } = req.params
+
+  if (!side) res.redirect(`/cards/${id}?side=question`)
+
+  const name = req.cookies.username
   const text = cards[id][side]
   const { hint } = cards[id]
 
-  const templateData = { id, text }
+  const templateData = { id, text, name }
 
   if (side === 'question') {
     templateData.hint = hint

views/card.pug

@@ -6,4 +6,6 @@ block content
     if hint
       p
         i Hint: #{hint}
-    a(href=`/cards/${id}?side=${sideToShow}`)= `${sideToShow.charAt(0).toUpperCase()}${sideToShow.slice(1)}`
+    a(href=`/cards/${id}?side=${sideToShow}`)= `${sideToShow.charAt(0).toUpperCase()}${sideToShow.slice(1)}`
+    br
+    a(href='/cards') Next card

views/index.pug

@@ -2,7 +2,5 @@ extends layout.pug
 
 block content
   section#content
-    h2 Welcome, #{name}!
-    form(action='/goodbye', method='POST')
-      button(type='submit') Goodbye
-    
+    p
+      a(href='/cards') Begin!

views/layout.pug

@@ -4,5 +4,9 @@ html(lang="en")
     title Flash Cards
   body
     include includes/header.pug
+    if name
+      h2 Welcome, #{name}!
+      form(action='/goodbye', method='POST')
+        button(type='submit') Goodbye
     block content
     include includes/footer.pug