6.4 - Backbone Exercises - Jacklyn Carroll

jacklynlee31 commented 9 years ago

Deliverables

[ ] Plan of attacks for each exercise
[ ] Pull Requests for each app named develop-a, develop-b, develop-c, develop-d
[ ] Remember to git checkout master between every app.
[ ] A deployed build to github pages for the CMS

Requirements

[ ] No JSHint warnings or errors
[ ] No JSCS warnings or errors

Normal Mode

[x] Create a form for a person. It should have a first name, last name, address, and phone number. It should save the person to tiny-lr server.
[x] Create a "blog reading app", where you have a list of blog posts on the side and when you click on a post title, it opens that post in another view. Hint: which blog post is selected is "application state".
[x] Create a bookmarking app where you can save URLs. It should have a form where you enter the URL, a title, and a "tag". There should be a list of all the URLs, as well as a list of all the tags (this should be generated dynamically from the link collection). When you click on a tag, the link list should show only those tags. Hint: which tag is selected is "application state", so could appear in your URL and/or have a view model to represent it. You can filter a collection with collection.filter(...), but be aware that it returns an array of models, not a new collection.
[ ] Create a complete blog CMS from scratch, allowing you to create, read, update, and delete blog posts.

jacklynlee31 commented 9 years ago

Plan of Attack: Exercise A

[x] Create a develop-a branch and bower install && npm install

Models, Collections & Views

[x] Model: Form Information (name, address, phone number)
[x] View: Form View

Templates

[x] index.html with a 'target' for the handlebars template
[x] Correct code in the js files for the Templates
[x] app.hbs Template
[x] form.hbs Template

JavaScript Files

[x] app.js
[x] form.js
[x] person.js

The User should be able to:

[x] See the form
[x] Put information in the form
[x] Send the information out to the server

jacklynlee31 commented 9 years ago

Exercise A

PR: https://github.com/jacklynlee31/6.4-backbone-exercises/pull/1

GH: http://jacklynlee31.github.io/6.4-backbone-exercises/

rtablada commented 9 years ago

@jacklynlee31 when naming id's use dashes instead of camel case on all id attributes: firstName should be first-name and so on.

jacklynlee31 commented 9 years ago

Plan of Attack: Exercise B

[x] Create a develop-b branch and bower install && npm install

Models, Collections & Views

[x] Model: Blog Post (Title, Date, Entry)
[x] Collection: All Blog Posts
[x] View 1: Blog Posts on Sidebar & Main Area
[x] View 2: Selected Post

Templates

[x] index.html with a 'target' for the handlebars template
[x] Correct code in the js files for the Template
[x] app.hbs Template

JavaScript Files

[x] post.js
[x] all-posts.js
[x] sidebar.js
[x] blog.js
[x] app.js
[x] router.js

The User should be able to:

[x] See the blog posts
[x] Make a new blog post
[x] Have the post show up in the sidebar
[x] Open the post in a new view
[x] Send the information out to the server

jacklynlee31 commented 9 years ago

Exercise B

PR: https://github.com/jacklynlee31/6.4-backbone-exercises/pull/2

jacklynlee31 commented 9 years ago

Plan of Attack: Exercise C

[x] Create a develop-c branch and bower install && npm install
[x] Make sure Brocfile.js is updated

Models, Collections & Views

[x] Model: Information Set (url, title, tag)
[x] Collection: Multiple Information Sets
[x] Main Form View
[x] Selected Tab View
[x] Tag List View

Templates

[x] Main Form (form.hbs)
[x] Selected Tab Page (tag.hbs)
[x] Tag List Area (taglist.hbs)

Routes

[x] Router files (router.js & index.js)
[x] Show the form (creating a new bookmark)
[x] Show All Bookmarks
[x] Show 'Selected Tag' Bookmarks

JavaScript Files

[x] info.js
[x] infosets.js
[x] form.js
[x] tag.js
[x] taglist.js

The User should be able to:

[x] Add a New Bookmark using a Form
[x] See the submitted Bookmarks on a Tag List
[x] Click on an item to only see Bookmarks with that tag
[x] Switch between chosen tags and the form

jacklynlee31 commented 9 years ago

Exercise C

PR: https://github.com/jacklynlee31/6.4-backbone-exercises/pull/3

jacklynlee31 commented 9 years ago

Plan of Attack: Exercise D

[x] Create a develop-d branch and bower install && npm install
[ ] Make sure Brocfile.js is updated

Models, Collections & Views

[ ] Model: Blog Post (title, body)
[ ] Collection: Multiple Blog Posts
[ ] Sidebar View
[ ] Create Blog Post View
[ ] Edit Blog Post View
[ ] Read Blog Post View

Templates

[ ] Sidebar Template
[ ] Read Blog Post Template (title, body)
[ ] Create Blog Post Template
[ ] Edit Blog Post Template (?)

Routes

[ ] Router files (router.js & index.js)
[ ] Show the form (creating a new blog post)
[ ] Show All Blog Posts (in sidebar)
[ ] Show Selected Blog Post in main area

JavaScript Files

[ ] post-model.js
[ ] post-collection.js
[ ] main-area.js
[ ] sidebar.js

The User should be able to:

[ ] Add a New Blog Post using a Form
[ ] See the submitted Blog Posts in the Sidebar
[ ] Click on a Blog Post and see it in the Main Area
[ ] Edit a Blog Post by clicking a Button
[ ] Delete a Blog Post by clicking a Button

jacklynlee31 commented 9 years ago

Exercise D

PR: https://github.com/jacklynlee31/6.4-backbone-exercises/pull/4

rtablada commented 9 years ago

@jacklynlee31

Exercise A: See comment: https://github.com/jacklynlee31/6.4-backbone-exercises/pull/1/files#r37156314

Exercise B: :star:

Exercise C: Looks good except that the links should link to the pages you saved. Think like the bookmark list in the Chrome menu

Exercise D: Some notes, we'll workshop this one

The edit link should only show once you are viewing an a blog post
Show a link to get to the create screen

rtablada commented 9 years ago

@jacklynlee31 Check https://github.com/jacklynlee31/6.4-backbone-exercises/pull/4/files#r39341793

That should help figure out the issue you are having with the edit view.

TIY-LR-FEE-2015-June / assignments