From 7e2ed8c7c897dc4005e7204cb869a490cc0fb880 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Wed, 1 Jun 2016 15:19:54 -0400 Subject: [PATCH 01/10] Create README.md --- .../w03d04/homework/to_do_starter/README.md | 93 +++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 unit_01/w03d04/homework/to_do_starter/README.md diff --git a/unit_01/w03d04/homework/to_do_starter/README.md b/unit_01/w03d04/homework/to_do_starter/README.md new file mode 100644 index 0000000..b9ebe01 --- /dev/null +++ b/unit_01/w03d04/homework/to_do_starter/README.md @@ -0,0 +1,93 @@ +# WHAT TO DO ? + +![nothing](http://www.likecool.com/Gear/Pic/Nothing%20to%20do/Nothing-to-do.jpg) + + +## To-Do List +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 +To get straight to the jQuery portion of the homework, feel free to use the starter code and fill in the javascript. You can make the page look nice afterwards. If you don't want to use the starter code and want to practise page layout, or just layout your own to do app from scratch, that's cool too, but it will take more time. Budget accordingly! + +### User Stories + +#####In the starter code: +1. the user should see two columns and an input field. +2. the user should be able to type a to-do item into an input box. +3. the user should be able to click an `add` button next to this input. + +##### Stuff for you to do: +1. When the user clicks the `add` button, the input box value should be added to his/her to-do list. +3. The user should be able to see all of the todos that they have created. +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()`. + + +### General Flow + +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. Alternatively, go to https://cdnjs.com/ and search for jQuery. + +Include any code that affects the DOM inside a window onload. jQuery has a shorthand for window onload: + +``` +$(function() { + + // DOM stuff + +}) +``` + +Try it out. + +Remember the general flow of what is happening. The user makes an action, 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. + +### Make it look pretty +Use the CSS knowledge that you've gained over the past few weeks. In addition, think about icons or elements that you can use. + + +### jQuery cheat sheet examples + +- this: `$(this)` + +- create element: `$('
')`, `$('

')`, etc. + +- select all elements of type: `$('div')`, `$('p')`, etc. + +- ^^ The two commands above are very similar but they do completely different things! + +- you can get the body of the document with: `$('body')` + +- get element by id: `$('#idName')` + +- get elements by class: `$('.className')` + +- set id on element: `jQueryElement.attr('id', 'idName')` + +- set class on element `jQueryElement.addClass('className')` + +- click listener: `jQueryElement.click( function )` + +- get value from input box after click: `$('#idName').val()` + +- append elements: `jQueryElement.append( //stuff )` + +- prepend elements: `jQueryElement.prepend( // stuff )` + +- remove elements: `jQueryElement.remove()` + +- set text inside element: `jQueryElement.text("some text")` + +- set html inside element: `jQueryElement.html("")` + +- check if element has a class: `jQueryElement.hassClass('.someClass')` + +- set a css property on an element: `jQueryElement.css('property', 'value')` + + + + + +### Super Super Bonus +The browser has something called [local storage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage). This allows us to cache data in the browser. Using local storage, make this application remember the to-dos that have already been entered in, even if the page is closed. From c2a61767b3f0ef7bfd62a6bacc6e16d4c4430e9f Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Wed, 1 Jun 2016 15:25:00 -0400 Subject: [PATCH 02/10] Update README.md --- unit_01/w03d04/homework/to_do_starter/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unit_01/w03d04/homework/to_do_starter/README.md b/unit_01/w03d04/homework/to_do_starter/README.md index b9ebe01..4a619e9 100644 --- a/unit_01/w03d04/homework/to_do_starter/README.md +++ b/unit_01/w03d04/homework/to_do_starter/README.md @@ -1,6 +1,6 @@ # WHAT TO DO ? -![nothing](http://www.likecool.com/Gear/Pic/Nothing%20to%20do/Nothing-to-do.jpg) +![cat to do list](http://www.funcatpictures.com/wp-content/uploads/2014/08/funny-cat-pictrues-to-do-list.jpg) ## To-Do List From ab36f4e29bde03877483ebd401abba3df4f52efd Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Wed, 1 Jun 2016 15:27:43 -0400 Subject: [PATCH 03/10] Update README.md --- unit_01/w03d04/homework/to_do_starter/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unit_01/w03d04/homework/to_do_starter/README.md b/unit_01/w03d04/homework/to_do_starter/README.md index 4a619e9..31662bf 100644 --- a/unit_01/w03d04/homework/to_do_starter/README.md +++ b/unit_01/w03d04/homework/to_do_starter/README.md @@ -17,7 +17,7 @@ To get straight to the jQuery portion of the homework, feel free to use the star 3. the user should be able to click an `add` button next to this input. ##### Stuff for you to do: -1. When the user clicks the `add` button, the input box value should be added to his/her to-do list. +1. When the user clicks the `add` button, the input box value should be added to his/her to-do list (hint: we did something similar with adding items to differnt lists in LOTR). 3. The user should be able to see all of the todos that they have created. 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. From 3be0d7fa6c692d78e201c6886a8c3055e59dfe4d Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Wed, 1 Jun 2016 15:31:22 -0400 Subject: [PATCH 04/10] Update README.md --- unit_01/w03d04/homework/to_do_starter/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unit_01/w03d04/homework/to_do_starter/README.md b/unit_01/w03d04/homework/to_do_starter/README.md index 31662bf..c0e0d60 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 -To get straight to the jQuery portion of the homework, feel free to use the starter code and fill in the javascript. You can make the page look nice afterwards. If you don't want to use the starter code and want to practise page layout, or just layout your own to do app from scratch, that's cool too, but it will take more time. Budget accordingly! +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! ### User Stories From 40e9fa927736cf39b679093a98934ee03b96f532 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Wed, 1 Jun 2016 15:32:13 -0400 Subject: [PATCH 05/10] Update README.md --- unit_01/w03d04/homework/to_do_starter/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unit_01/w03d04/homework/to_do_starter/README.md b/unit_01/w03d04/homework/to_do_starter/README.md index c0e0d60..64f96c6 100644 --- a/unit_01/w03d04/homework/to_do_starter/README.md +++ b/unit_01/w03d04/homework/to_do_starter/README.md @@ -11,7 +11,7 @@ You have the choice to use this OR to start from scratch. If you want to focus s ### User Stories -#####In the starter code: +#####In the starter code (if you start from scratch, you'll need to write this on your own): 1. the user should see two columns and an input field. 2. the user should be able to type a to-do item into an input box. 3. the user should be able to click an `add` button next to this input. From 01ae2c31912c52b0dbd46281c144400d84d36bab Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Wed, 1 Jun 2016 15:38:41 -0400 Subject: [PATCH 06/10] Update README.md --- .../w03d04/homework/to_do_starter/README.md | 41 ++++++++++++++----- 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/unit_01/w03d04/homework/to_do_starter/README.md b/unit_01/w03d04/homework/to_do_starter/README.md index 64f96c6..846b0cc 100644 --- a/unit_01/w03d04/homework/to_do_starter/README.md +++ b/unit_01/w03d04/homework/to_do_starter/README.md @@ -25,9 +25,17 @@ You have the choice to use this OR to start from scratch. If you want to focus s Hint: jQuery has a useful function that gets whatever the user typed into the input box called `.val()`. -### General Flow +### 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. Alternatively, go to https://cdnjs.com/ and search for jQuery. +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. + +**Commit 1**
+

+The commit message should read:
+"To Do - Commit 1: Added the jQuery library to my .html" +
+ +### Window Onload Include any code that affects the DOM inside a window onload. jQuery has a shorthand for window onload: @@ -43,9 +51,29 @@ Try it out. Remember the general flow of what is happening. The user makes an action, 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. +**Commit 2**
+
+The commit message should read:
+"To Do - Commit 2: Added window onload function to my code." +
+ ### Make it look pretty -Use the CSS knowledge that you've gained over the past few weeks. In addition, think about icons or elements that you can use. +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. + +**Commit 3**
+
+The commit message should read:
+"To Do - Commit 3: Added CSS to the To-Do list" +
+ +### Stretch Goal +The browser has something called [local storage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage). This allows us to cache data in the browser. Using local storage, make this application remember the to-dos that have already been entered in, even if the page is closed. +**Commit 4**
+
+The commit message should read:
+"To Do - Commit 4: Added local storage" +
### jQuery cheat sheet examples @@ -84,10 +112,3 @@ Use the CSS knowledge that you've gained over the past few weeks. In addition, t - check if element has a class: `jQueryElement.hassClass('.someClass')` - set a css property on an element: `jQueryElement.css('property', 'value')` - - - - - -### Super Super Bonus -The browser has something called [local storage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage). This allows us to cache data in the browser. Using local storage, make this application remember the to-dos that have already been entered in, even if the page is closed. From 0761c9bddd6edde11ec721a7b9b48232b5ad6057 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Wed, 1 Jun 2016 16:08:11 -0400 Subject: [PATCH 07/10] Update README.md --- unit_01/w03d04/homework/to_do_starter/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/unit_01/w03d04/homework/to_do_starter/README.md b/unit_01/w03d04/homework/to_do_starter/README.md index 846b0cc..5a54e86 100644 --- a/unit_01/w03d04/homework/to_do_starter/README.md +++ b/unit_01/w03d04/homework/to_do_starter/README.md @@ -37,6 +37,8 @@ The commit message should read:
### 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. + Include any code that affects the DOM inside a window onload. jQuery has a shorthand for window onload: ``` @@ -49,8 +51,6 @@ $(function() { Try it out. -Remember the general flow of what is happening. The user makes an action, 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. - **Commit 2**
The commit message should read:
From 5ea09e6bd778a746fd9dd89e54ceb4b239420758 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Wed, 1 Jun 2016 23:05:50 -0400 Subject: [PATCH 08/10] Update README.md --- .../w03d04/homework/to_do_starter/README.md | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) 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. From 90b899aed83a3ebc915768957d9d2356dd13683a Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Wed, 1 Jun 2016 23:21:45 -0400 Subject: [PATCH 09/10] Update README.md --- unit_01/w03d04/morning_exercise/README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/unit_01/w03d04/morning_exercise/README.md b/unit_01/w03d04/morning_exercise/README.md index bb12ed0..8272c12 100644 --- a/unit_01/w03d04/morning_exercise/README.md +++ b/unit_01/w03d04/morning_exercise/README.md @@ -25,3 +25,18 @@ _This framework is difficult to manipulate, but I like it for the parralax and t [Pure CSS](http://purecss.io/)
_Similar to skeleton, this is a light framework with a grid system and responsive design._ + +### What you should do: + +1. Pull down the files for the morning exercise to your local computer. +2. Navigate inside the `CSS_Frameworks` folder. +3. Open the files using the command `subl .` +4. Open the `index.html` file in your browser by typing `open index.html` in your terminal. + +### Independent work: +1. Choose one of the frameworks listed here that we did not use (or another CSS framework that you've heard about) and modify this html file. +2. See how nice you can make the page with only a few minutes of work. Focus on using the grid system that is built in to the framework. +3. Make a change to a color on the page. +4. What's one thing that you like about this framework? +5. What's one thing that may be a problem with using this framework? +6. Take a screenshot of your website and paste it in Slack. NOTE: if you don't have a Chrome Extension that allows you to take a picture of the entire page in one shot, install it now (I recommended "Full Page Screen Capture" as an option)! From b0ba1ca0ee4bc941473dd42e9ae9726de0856d6f Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Wed, 1 Jun 2016 23:22:18 -0400 Subject: [PATCH 10/10] Update README.md --- unit_01/w03d04/morning_exercise/README.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/unit_01/w03d04/morning_exercise/README.md b/unit_01/w03d04/morning_exercise/README.md index 8272c12..bb3b2cc 100644 --- a/unit_01/w03d04/morning_exercise/README.md +++ b/unit_01/w03d04/morning_exercise/README.md @@ -2,14 +2,6 @@ ## CSS Frameworks -### Web Page Without a CSS Framework -![CSS No Framework](http://i.imgur.com/mJlDA4r.png) -
-#### Just add one line of code -
-### Web Page With a CSS Framework -![CSS Framework](http://i.imgur.com/CLqJcUm.png) - We're going to be looking at some popular CSS frameworks. A CSS framework can save you time for styling applications. A framework is really just a stylesheet that has been designed by someone else that you are implimenting into your code. You can make changes to the styles using your own stylesheet. You can use them to snazz up your projects, but we also want you to be familiar with them because, a lot of times when you jump into a company that has a pre-existing codebase, you will encounter the use of a CSS framework. Some frameworks that we will be looking at today: