aliblackwell/UI.MD

## UI.MD

      
    Raw
  

              UI.MD
            
          
    Implementing UI

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.
Some example HTML

<!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>