Crafting Interactions TodoMVC Hackathon
Tonight's mission is to build a TODO app.
The functionality for the TODO app is mostly working. It's based on todomvc which is a website that allows developers to compare javascript frameworks by seeing how each one is used to implement the exact same TODO list. For tonight's class we're using the jQuery version because it's the easiest to pick up and experiment with.
Your job is to work from a comp and a task list to fill in the required style and functionality. I'm here to help answer questions and get you unstuck.
- You can work alone or in a group.
- The project can be found on codepen
- There's a task backlog on Trello. Slack me your email to get invited.
- The sketch file will be posted to the Slack channel. Note that it doesn't have all the states or responsive versions of the app. It's meant to be a starter to inform high-level pixel -> code translation.
Getting started
There's a wiki with helpful material including...
Documentation on various CSS selectors.
A high level explainer on rem units - I want you guys to try and size type with rem units as much as possible.
The CSS Framework
Nobody starts a project from scratch; developers work with exisitng reusable libraries. I've created a basic css framework to help you accompish some basic tasks.
Below is the readme file from todomvc, the project tonight's class is based on.
jQuery TodoMVC Example
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Learning jQuery
The jQuery website is a great resource for getting started.
Here are some links you may find helpful:
Articles and guides from the community:
Get help from other jQuery users:
If you have other helpful links to share, or find any of the links above no longer work, please let us know.