<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 "> Bitovi Blog - UX and UI design, JavaScript and Frontend development

Build a YouTube Playlist Editor, an Advanced Weather Report Guide, & TodoMVC with CanJS

Continue your mastery of CanJS with three new recipe guides!

Chasen Le Hara

Chasen Le Hara

Twitter Reddit

The new Recipes section on CanJS.com now has three new guides: Playlist Editor, TodoMVC with StealJS, and Weather Report Guide (Advanced)!

Playlist Editor

This guide uses YouTube's API to show you how to:

  • Set up CanJS
  • Sign in and out with OAuth 2.0
  • Search for videos with YouTube’s API
  • Drag and drop videos with
  • Create a playlist!

The guide takes about an hour to complete. It was presented last week at DoneJS Chicago. If you’re in Chicago, join us for future hack nights on projects like this one!

The CanJS YouTube channel has a video walkthrough of the guide:

TodoMVC with StealJS

This guide walks you through building the classic TodoMVC app with CanJS and StealJS! It takes about a day to go through, but it gives you a thorough look at using can-component, can-connect, can-fixture, and can-route to build a robust app, while demonstrating how StealJS supports a modlet workflow that makes it easier to maintain your app over time.

canjs todomvc.gif

Advanced Weather Report Guide

This guide is a follow-up to the Simple Weather Report Guide, which walks you through building a weather report widget with Yahoo’s Weather API and Query Language (YQL):

  • Allow a user to enter a location
  • Get and display the places for the user’s location name
  • Allow a user to select a place
  • Get and display the forecast
  • Hide the forecast if the user changes the entered location
  • Skip selecting a place if only one place matches the entered location

This advanced guide walks you through removing imperative code and automatically looking up the user’s location using the browser’s geolocation API. Both of the guides feature event streams and take about 25 minutes to complete.

Here’s a quick demo of what the final widget looks like:

canjs advanced weather report guide.gif

We’re here to help!

We’ll be adding more recipes over time based on what we hear the community wants, so let us know what recipe you would like to see us cook up next.

If you have any questions or comments while going through the recipes, please join us on our forums or Gitter chat!