Snippets Collections
// __tests__/helpers.test.js

const { format_date, format_plural } = require('../utils/helpers');


test('format_date() returns a date string', () => {
  const date = new Date('2020-03-20 16:12:03');

  expect(format_date(date)).toBe('3/20/2020');
});

========================

// /utils/helpers.js

module.exports = {
  format_date: (date) => {
    return `${new Date(date).getMonth() + 1}/${new Date(date).getDate()}/${new Date(date).getFullYear()}`;
  },
};
// Homepage.Handlebars
<ol class="post-list">
  {{#each posts as |post|}}
  <li>
    {{> post-info post}}
  </li>
  {{/each}}
</ol>
---
//Post-info.Handlebars (partial)
<article class='post'>
  <div class='title'>
    <a href='{{post_url}}' target='_blank'>{{title}}</a>
    <span>({{post_url}})</span>
  </div>
  <div class='meta'>
    {{vote_count}}
    point(s) by
    {{user.username}}
    on
    {{created_at}}
    |
    <a href='/post/{{id}}'>{{comments.length}} comment(s)</a>
  </div>
</article>
{{#if value}}
<div>
	This content will only display if "value" is truthy
</div>
{{/if}}

---

{{#if loggedIn}}
        <button id="logout" class="btn-no-style">logout</button>
{{else}}
        <a href="/login">login</a>
{{/if}}
// Javascript
async function signupFormHandler(event) {
  event.preventDefault();
  const username = document.querySelector('#username-signup').value.trim();
  const email = document.querySelector('#email-signup').value.trim();
  const password = document.querySelector('#password-signup').value.trim();
  if (username && email && password) {
    const response = await fetch('/api/users', {
      method: 'post',
      body: JSON.stringify({
        username,
        email,
        password,
      }),
      headers: { 'Content-Type': 'application/json' },
    });
    if (response.ok) {
      console.log(response);
    } else {
      alert(response.statusText);
    }
  }
}
async function loginFormHandler(event) {
  event.preventDefault();
  const email = document.querySelector('#email-signup').value.trim();
  const password = document.querySelector('#password-signup').value.trim();
  if (email && password) {
    const response = await fetch('/api/users/login', {
      method: 'post',
      body: JSON.stringify({
        email,
        password,
      }),
      headers: { 'Content-Type': 'application/json' },
    });
    if (response.ok) {
      document.location.replace('/')
    } else {
      alert(response.statusText);
    }
  }
}
document.querySelector('.signup-form').addEventListener('submit', signupFormHandler);
document.querySelector('.login-form').addEventListener('submit', loginFormHandler);


<!-- HTML -->

<form class='login-form'>
  <div>
    <label for='email-login'>email:</label>
    <input type='text' id='email-login' />
  </div>
  <div>
    <label for='password-login'>password:</label>
    <input type='text' id='password-login' />
  </div>
  <div>
    <button type='submit'>login</button>
  </div>
</form>
<form class='signup-form'>
  <div>
    <label for='username-signup'>username:</label>
    <input type='text' id='username-signup' />
  </div>
  <div>
    <label for='email-signup'>email:</label>
    <input type='text' id='email-signup' />
  </div>
  <div>
    <label for='password-signup'>password:</label>
    <input type='text' id='password-signup' />
  </div>
  <div>
    <button type='submit'>login</button>
  </div>
</form>
<script src="/javascript/login.js"></script>
<ol class="post-list">
  {{#each posts as |post|}}
  <li>
    <article class="post">
      <div class="title">
        <a href="{{post.post_url}}" target="_blank">{{post.title}}</a>
        <span>({{post.post_url}})</span>
      </div>
      <div class="meta">
        {{post.vote_count}} point(s) by {{post.user.username}} on
        {{post.created_at}}
        |
        <a href="/post/{{post.id}}">{{post.comments.length}} comment(s)</a>
      </div>
    </article>
  </li>
  {{/each}}
</ol>
hbs.registerHelper(`iff`, function (a, operator, b, opts) {
    let bool = false;
    a.toString();
    b.toString();
    switch (operator) {
        case `===`:
            bool = a === b;
            break;
        case `>`:
            bool = a > b;
            break;
        case `<`:
            bool = a < b;
            break;
        default:
            bool = a === b;
    }

    if (bool) {
        return opts.fn(this);
    }
    return opts.inverse(this);
});

{{#iff value1 '>' value2}}
do the thing
{{/iff}}
//cons name = 'me'

{{log 'author = ' name }}

//author = me
// in app.js
hbs.registerHelper(`ifEquals`, function (a, b, opts) {
    if (a.toString() === b.toString()) {
        return opts.fn(this);
    }
    return opts.inverse(this);
});

// in hbs template
{{#ifEquals name 'Foo'}}
      true
{{else}}
      false
{{/ifEquals}}
star

Sat Sep 24 2022 00:03:15 GMT+0000 (Coordinated Universal Time)

#javascript #handlebars #jest
star

Thu Sep 22 2022 23:03:33 GMT+0000 (Coordinated Universal Time)

#javascript #handlebars
star

Thu Sep 22 2022 22:06:01 GMT+0000 (Coordinated Universal Time)

#javascript #handlebars
star

Thu Sep 22 2022 22:05:03 GMT+0000 (Coordinated Universal Time)

#javascript #handlebars #html
star

Thu Sep 22 2022 22:01:57 GMT+0000 (Coordinated Universal Time)

#javascript #handlebars
star

Tue Jun 08 2021 16:48:15 GMT+0000 (Coordinated Universal Time)

#hbs #handlebars #express #nodejs
star

Mon Jun 07 2021 08:25:51 GMT+0000 (Coordinated Universal Time)

#hbs #handlebars #express #nodejs
star

Mon Jun 07 2021 08:20:41 GMT+0000 (Coordinated Universal Time)

#hbs #handlebars #express #nodejs
star

Sun Mar 29 2020 07:06:35 GMT+0000 (Coordinated Universal Time) https://gist.github.com/trantorLiu/5924389

#javascript #nodejs #handlebars #express

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension