This short guide shows you how to implement basic UI.
Start with your HTML file. If it's a list of e.g. friends, use the syntax like the below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Community Timebank - Friends</title>
<!-- Tailwind.css is a CSS library. Read the docs here: -->
<!-- https://tailwindcss.com/docs/what-is-tailwind -->
<link rel="stylesheet" href="/tailwind.css" />
</head>
<body class="bg-grey-lightest">
<main>
{{#each friends}}
<p>{{name}}</p>
<a href="/friend-follow/{{id}}">Follow {{name}}</a>
{{/each}}
</main>
</body>
</html>
This syntax assumes the following data structure:
{
friends: [
{ name: "Raf", id: 1 },
{ name: "Tasha", id: 2 },
{ name: "Luis", id: 3 }
]
}
And we can wire it into our routes like the below:
routes.get("/list-friends", function(req, res) {
res.render("list-friends.html", {
friends: [
{ name: "Raf", id: 1 },
{ name: "Tasha", id: 2 },
{ name: "Luis", id: 3 }
]
});
});
You will already have worked out how to query for the data from one of your model files. You need to do the same thing here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Community Timebank - Friends</title>
<!-- Tailwind.css is a CSS library. Read the docs here: -->
<!-- https://tailwindcss.com/docs/what-is-tailwind -->
<link rel="stylesheet" href="/tailwind.css" />
</head>
<body class="bg-grey-lightest">
<main>
{{#each friends}}
<section class="friend">
<h2>{{name}}</h2>
<p>{{bio}}</h2>
<a class="button" href="/unfollow-friend/{{ id }}>
Unfollow {{name}}
</a>
<ul>
{{#each contributions}}
<li>
<h3>{{task}}</h3>
<p>{{description}}</p>
<h4>Hours spent</h4>
<p>{{timeSpent}}</p>
</li>
{{/each}}
</ul>
</section>
{{/each}}
</main>
</body>
</html>