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 Using Templates with Express Using Logic in Pug

Mark Westerweel
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Mark Westerweel
Full Stack JavaScript Techdegree Graduate 22,378 Points
Posted by Mark Westerweel
.a{fill-rule:evenodd;}techdegree seal-36
Mark Westerweel
Full Stack JavaScript Techdegree Graduate 22,378 Points

Pug Logic creation of tables and easy tricks

Here's my code for the little challenge:

I used two sites for cheesing it a bit, I think you will find them helpful

generate table HTML and to render HTML to PUG

sandbox.pug

doctype html
head
  title Flash Cards
header
  h1 Flash Cards
section#content
  h2
    | Table of full names
    ul
  style(type='text/css').
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
    overflow:hidden;padding:10px 5px;word-break:normal;}
    .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
    font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
    .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
  table.tg
    thead
      tr
        th.tg-0pky First Name
        th.tg-0pky Last Name
    tbody
      each name in names
        tr
          td.tg-0pky= name.firstName
          td.tg-0pky= name.lastName
    p An app to help you study

in app.js :

const names = [
    {
        firstName :'Pontiff',
        lastName : 'Sulhyvan'
    },
    {
        firstName :'Aldrich',
        lastName : 'Devourer of Gods'
    },
    {
        firstName :'Ludleth',
        lastName : 'the Deserter'
    },
    {
        firstName :'Yuria',
        lastName : 'of Londor'
    },
    {
        firstName :'Horace',
        lastName : 'the Hushed'
    }    
];

app.get('/sandbox', (req, res) => {
    res.render(`sandbox`, { names });
})

1 Answer

Chris Adams
.a{fill-rule:evenodd;}techdegree seal-36
Chris Adams
Front End Web Development Techdegree Graduate 29,423 Points

Nice solution, Mark. I wasn't aware of the syntax you've used at the top:

h2
    | Table of full names
    ul
  style(type='text/css').

What does the inclusion of the "|" in the second line do?

Your solution was ultimately quite similar to mine, but I imagine yours looks a lot nicer with the styling / formatting included!

Within app.js

const names = [
  { first: "John", last: "Howard" },
  { first: "Kevin", last: "Rudd" },
  { first: "Julia", last: "Gillard" },
  { first: "Tony", last: "Abbott" },
  { first: "Malcolm", last: "Turnbull" },
  { first: "Scott", last: "Morrison" },
];

app.get("/sandbox", (req, res) => {
  res.render("sandbox", { names });
});

Within sandbox.pug 

doctype html 
html(lang="en")
  head 
    title Sandbox 
  body 
    h1 Australian Prime Ministers
    p Here are the names of 21st Century Australian Prime Ministers:
    table 
      thead 
        tr 
          th First Name 
          th Last Name 
      tbody  
        each name in names
          tr 
            td= name.first 
            td= name.last