ellisken / 04-templating

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CF Lab 04: HTML Templating w/HandlebarsJS

Lab 04 Submission Instructions

Follow the submission instructions from Lab 01.

Resources

Handlebars Docs

Arrow Functions MDN

Configuration

Your repository must include:

04-templating
└── starter-code
└── driver-navigator
  ├── .eslintrc.json
  ├── .gitignore
  ├── LICENSE
  ├── index.html
  ├── scripts
  │   ├── article.js
  │   ├── articleView.js
  │   └── blogArticles.js
  ├── styles
  │   ├── base.css
  │   ├── layout.css
  │   └── modules.css
  └── vendor
      └── styles
          ├── fonts
          │   ├── icomoon.eot
          │   ├── icomoon.svg
          │   ├── icomoon.ttf
          │   └── icomoon.woff
          ├── icons.css
          └── normalize.css
  └── PULL_REQUEST_TEMPLATE.md
  └── README.md

User Stories and Feature Tasks

As a user, I want my app to render articles with consistent formatting so that I can visit the site often and have the same experience each time.

  • Include the Handlebars.js CDN in your project to replace the $.clone() template.

As a developer, I want to utilize the Handlebars library to dynamically render the articles using a template so that I can easily edit the way articles are rendered.

  • Convert your existing HTML template into a Handlebars template.
  • Update the Article.prototype.toHtml() method to utilize the Handlebars template.

As a developer, I want to utilize modern JavaScript features so that my code is up to date with industry standards.

  • Refactor the functions and methods in your code to use ES6 arrow functions when possible.

Stretch Goal

As a developer, I want to use Handlebars to build my filters so that my code is more DRY.

  • Look at all that duplicated markup inside your #filter list items! Looks like a good opportunity to use a template. Make a small template for each filter, and re-render the list once you have data to populate it.

Documentation

Your README.md must include:

# Project Name

**Author**: Your Name Goes Here
**Version**: 1.0.0 (increment the patch/fix version number up if you make more commits past your first submission)

## Overview
<!-- Provide a high level overview of what this application is and why you are building it, beyond the fact that it's an assignment for a Code Fellows 301 class. (i.e. What's your problem domain?) -->

## Getting Started
<!-- What are the steps that a user must take in order to build this app on their own machine and get it running? -->

## Architecture
<!-- Provide a detailed description of the application design. What technologies (languages, libraries, etc) you're using, and any other relevant design information. -->

## Change Log
<!-- Use this are to document the iterative changes made to your application as each feature is successfully implemented. Use time stamps. Here's an examples:

01-01-2001 4:59pm - Application now has a fully-functional express server, with GET and POST routes for the book resource.

## Credits and Collaborations
<!-- Give credit (and a link) to other people or resources that helped you build this application. -->
-->

About


Languages

Language:JavaScript 47.7%Language:HTML 33.5%Language:CSS 18.8%