ccloops / 04-templating

Lab 04: HTML Templating w/HandlebarsJS

Submission Instructions

Follow the submission instructions from Lab 01.

Resources

Handlebars Docs

Arrow Functions MDN

Configuration

Your repository must include:

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

User Stories and Feature Tasks

• Continue styling the app using SMACSS practices. Take a few minutes for code review of your partner's CSS and decide how to incorporate it into your paired lab. You can choose one partner's CSS structure, or you can combine them as you see fit. Seek to optimize and organize your CSS as much as possible!

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 articleView.js to use ES6 arrow functions.

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