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 trialMark Westerweel
Full Stack JavaScript Techdegree Graduate 22,378 PointsPug 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
Front End Web Development Techdegree Graduate 29,423 PointsNice 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