diff --git a/unit_01/w03d04/homework/to_do_starter/README.md b/unit_01/w03d04/homework/to_do_starter/README.md index 5a54e86..6646119 100644 --- a/unit_01/w03d04/homework/to_do_starter/README.md +++ b/unit_01/w03d04/homework/to_do_starter/README.md @@ -7,7 +7,7 @@ Build a To-Do list app with two columns: one for things to do, and another for things that have been done. Use jQuery to give your app functionality. ### Starter code -You have the choice to use this OR to start from scratch. If you want to focus straight on jQuery practice portion, feel free to use the starter code. If you don't want to use the starter code and want to practice making an application from scratch, that's okay too, but it will take more time. Budget accordingly! +You have the choice to use this started code OR to start from scratch. The starter code that we've provided is just some CSS and HTML so that you can see some elements on the page. The .js file is empty. If you want to focus straight on jQuery practice portion, feel free to use the starter code. If you don't want to use the starter code and want to practice making an application from scratch, that's okay too, but it will take more time. Budget accordingly! ### User Stories @@ -22,9 +22,6 @@ You have the choice to use this OR to start from scratch. If you want to focus s 5. The user should be able to click 'done' on a todo and have it move to the completed column. 4. The user should be able to delete a to-do item from the completed list. -Hint: jQuery has a useful function that gets whatever the user typed into the input box called `.val()`. - - ### Add the jQuery Library First, add the jQuery library to your project. Go to https://code.jquery.com/ and copy the url of a minified jQuery. Use this url in a script tag in your .html file. Alternatively, go to https://cdnjs.com/ and search for jQuery. @@ -35,6 +32,20 @@ The commit message should read:
"To Do - Commit 1: Added the jQuery library to my .html"
+### Input Boxes + +Input boxes are usually submitted through forms. However, as you learned in class, the default behavior of the form can be prevented. You will need to prevent the default behavior in order to do this. jQuery has a very useful function that gets whatever the user typed into the input box calls '.val()'. This will be needed to get the text that the user submits when the button (or the enter button) is pressed. + +For this to-do list, you can avoid using an entire form and just have one simple text input. You will need to do one of two things: +- Create a button and listen for clicks on the the button to add to the todo list. +- Set a [`keydown` event](https://api.jquery.com/keydown/) on the `input`, and if keycode equals `13` (enter key), then add it to the to-do list. + +**Commit 2**
+
+The commit message should read:
+"To Do - Commit 2: Created input for user to submit their to-do" +
+ ### Window Onload Think about what the user will be doing when they are interacting with your to-do list. The user makes an action (adds text, presses delete, etc.), you run some code in order to process this action, the results of the action are rendered to the page, and then you wait until another action takes place. @@ -51,12 +62,14 @@ $(function() { Try it out. -**Commit 2**
+ +**Commit 3**
The commit message should read:
-"To Do - Commit 2: Added window onload function to my code." +"To Do - Commit 3: Added window onload function to my code."
+ ### Make it look pretty Use the CSS knowledge that you've gained over the past few weeks. Feel free to use a CSS framework. In addition, think about icons or elements that you can use.