This is the first of (what will hopefully be) a series of small programming assignments to get you thinking about what we’re learning about in class.
These should be easy enough that you can get the basic version done relatively quickly. If you find yourself getting stuck, ask for help.
I am trying to separate the mechanics of how we turn them in, evaluate them, and peer learn with them from the assignments themselves – but that is part of it.
For this time: we’ll try the mechanism of a Canvas discussion. Turn your program in as your initial posting on the Canvas discussion. Then your groupmates will be able to see your program and comment/discuss. If you are stuck, make your initial posting be a question explaining where you got stuck. And then either someone might be able to help you, or you’ll get to see other people’s solutions which will give you hints.
For handing things in, give a link to a place where the code is running. It can be a link to an online IDE (like JSBin), or a link to a place where the code is running (if you have access to a web server. you can always use your CS account – which provides web access in the “public/html” directory of your AFS home directory). If you do put it on JSBin, I recommend writing your code somewhere else first (so you have a debugger) and then move it there. (that’s what I am starting to do).
This is an experiment… we’ll see how it works.
Due date: make your initial posting (with either your working program, or a question to help you get unstuck) by Monday, October 12. You are also required to comment on other people’s code (by replying to their posting) – which might be answering a person’s question. So you’ll have to look at things after the 12th as well.
The Canvas things:
- The discussion for this puzzle (where you put your answer and discuss other people’s)
- A discussion for clarifications about puzzles (if you don’t understand the problem description)
- A discussion for Reading 5 (if you have questions about manipulating web pages with JavaScript)
Now for the puzzle…
The Puzzle: To Do List
Your task is to make a simple to do list. Everything is stored on the web page (no server) – so it’s not that practical. But it will get you making and re-arranging elements, and using closures to write functions that respond to events.
You program should make a to-do list. At the top of the page, there should be a type-in box (an “input” element of type text), and a button that causes what has gotten typed in to be made into a to-do list item. If you want to just have the user press enter after typing something, that’s fine too.
When a todo list item is created, it should be added to a list on the web page. With a checkbox.
When the checkbox for an item is checked off, that item should be moved to the “Done” list.
My basic one is 26 lines of JavaScript, and a shorter HTML file. It’s really basic.
If you get the basic one working, add some bells and whistles!
- allow the user to set a priority for each item, and have the list be sorted appropriately
- make it look nice
- add a due time to each to do item, and allow the list to be sorted by either time or priority
- something creative
This is not meant to be a big project. (as I said, mine was 26 lines of code – although its quite basic). The important thing is to try to use some of the functional mechanisms we discussed to give behaviors to the checkboxes, and to see how to manipulate the web page programmatically.
Some hints (if you need them):
- If you know JQuery, it is less code to manipulate the web page with JQuery than with plain JavaScript functions. For this, don’t try to learn JQuery. In fact, don’t even use JQuery.
- I think it’s easier to create a function (with a closure) that handles the “click” of a checkbox when the checkbox is created.
- We haven’t discussed event handling much in class. But, for a checkbox element, you can set its “onchange” field to be a function that gets called.
- For some reason, my program doesn’t always work in JSBin.
