From 4b93959c4f8cdf26e0129bc8131c9adff407e93a Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 14:36:57 -0400 Subject: [PATCH 01/23] Create README.md --- unit_01/w03d02/morning_exercise/README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 unit_01/w03d02/morning_exercise/README.md diff --git a/unit_01/w03d02/morning_exercise/README.md b/unit_01/w03d02/morning_exercise/README.md new file mode 100644 index 0000000..c388abd --- /dev/null +++ b/unit_01/w03d02/morning_exercise/README.md @@ -0,0 +1,17 @@ +# Morning Exercise + +With these morning exercises, we want you to think about how to, not only tackle the problem, but to see how effeciently you can solve them. Solve this one in **two** different ways. + +## The Biggest Difference + +Write a function that takes in the array and returns the **largest difference** between any **two** of its elements. You can assume that the array is all numbers and that there are no duplicates. + +The starter code: +``` javascript + var biggestDifference = function(arr){ + // code goes here... + } + + biggestDifference([1,4,7,3,2]) // would return 6 + biggestDifference([9, 20, 5, -6, -1, 8]) // would return 26 +``` From 4056cd8fd6d4189008f8e155d61aa57ac3010567 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 14:41:11 -0400 Subject: [PATCH 02/23] Create Solution.js --- unit_01/w03d02/morning_exercise/Solution.js | 41 +++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 unit_01/w03d02/morning_exercise/Solution.js diff --git a/unit_01/w03d02/morning_exercise/Solution.js b/unit_01/w03d02/morning_exercise/Solution.js new file mode 100644 index 0000000..409146a --- /dev/null +++ b/unit_01/w03d02/morning_exercise/Solution.js @@ -0,0 +1,41 @@ +// least efficient +var diff = function(arr){ + var biggest = 0 + for (var i = 0; i < arr.length; i++) { + for (var j = 0; j < arr.length; j++) { + if ( biggest < (arr[i] - arr[j])){ + biggest = arr[i] - arr[j]; + } + }; + }; + return biggest +} + +console.log(diff([1,4, 6, 2, 9])) + + +// more efficient +var diff = function(arr){ + arr.sort(function(a, b){ + return a - b + }) + return arr[arr.length - 1] - arr[0]; +} +console.log(diff([9,8,1,2,3,4,5])); + + +// most efficient +var diff = function(arr){ + var small = arr[0]; + var big = arr[0]; + for (var i = 0, len = arr.length, j = 0; i < len; i++) { + if(arr[i] > big ){ + big = arr[i]; + } else if (arr[i] < small){ + small = arr[i]; + } + }; + return big - small; +} + +console.log(diff([9,8,1,2,3,4,5])); From 6918366fcb531be629cdb4952e63a6543b4573f2 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 15:00:38 -0400 Subject: [PATCH 03/23] Update Solution.js --- unit_01/w03d02/morning_exercise/Solution.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/unit_01/w03d02/morning_exercise/Solution.js b/unit_01/w03d02/morning_exercise/Solution.js index 409146a..3a21f7b 100644 --- a/unit_01/w03d02/morning_exercise/Solution.js +++ b/unit_01/w03d02/morning_exercise/Solution.js @@ -1,5 +1,6 @@ -// least efficient -var diff = function(arr){ +// least efficient - WHY? Could you see a situation where this could be inefficient? +// in this one, you're creating two loops. The first loop holds on to one index number (position 0) and the second loop compares it to every other number in the loop (index 0, 1, 2, etc.) +var difference = function(arr){ var biggest = 0 for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length; j++) { @@ -11,7 +12,7 @@ var diff = function(arr){ return biggest } -console.log(diff([1,4, 6, 2, 9])) +console.log(difference([1, 4, 6, 2, 9])) // more efficient From 886d083cb95be47957c3cf33dd1fc3a452ab4250 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 15:02:16 -0400 Subject: [PATCH 04/23] Update Solution.js --- unit_01/w03d02/morning_exercise/Solution.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/unit_01/w03d02/morning_exercise/Solution.js b/unit_01/w03d02/morning_exercise/Solution.js index 3a21f7b..f07bf5f 100644 --- a/unit_01/w03d02/morning_exercise/Solution.js +++ b/unit_01/w03d02/morning_exercise/Solution.js @@ -1,4 +1,6 @@ -// least efficient - WHY? Could you see a situation where this could be inefficient? +// SOLUTION 1 +// least efficient +//WHY? Could you see a situation where this could be inefficient? // in this one, you're creating two loops. The first loop holds on to one index number (position 0) and the second loop compares it to every other number in the loop (index 0, 1, 2, etc.) var difference = function(arr){ var biggest = 0 @@ -14,6 +16,9 @@ var difference = function(arr){ console.log(difference([1, 4, 6, 2, 9])) +/////////////////////////////////////////////////////////////////////// + +// SOLUTION 2 // more efficient var diff = function(arr){ From d0d2744301c9b5e128e2636a50d71d7145287462 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 15:19:04 -0400 Subject: [PATCH 05/23] Update Solution.js --- unit_01/w03d02/morning_exercise/Solution.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/unit_01/w03d02/morning_exercise/Solution.js b/unit_01/w03d02/morning_exercise/Solution.js index f07bf5f..1d06190 100644 --- a/unit_01/w03d02/morning_exercise/Solution.js +++ b/unit_01/w03d02/morning_exercise/Solution.js @@ -2,6 +2,7 @@ // least efficient //WHY? Could you see a situation where this could be inefficient? // in this one, you're creating two loops. The first loop holds on to one index number (position 0) and the second loop compares it to every other number in the loop (index 0, 1, 2, etc.) + var difference = function(arr){ var biggest = 0 for (var i = 0; i < arr.length; i++) { @@ -19,8 +20,11 @@ console.log(difference([1, 4, 6, 2, 9])) /////////////////////////////////////////////////////////////////////// // SOLUTION 2 - // more efficient +// use the .sort() method +// http://www.w3schools.com/jsref/jsref_sort.asp +// we can see what it's doing if we console log it, but it's organizing our array so that the smallest number is at index zero and the largest number is in the last position of the arary. + var diff = function(arr){ arr.sort(function(a, b){ return a - b @@ -29,7 +33,9 @@ var diff = function(arr){ } console.log(diff([9,8,1,2,3,4,5])); +/////////////////////////////////////////////////////////////////////// +// SOLUTION 3 // most efficient var diff = function(arr){ var small = arr[0]; From 7e358fbc8a9f06f8e6426096c7c36bbc120bce4f Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 15:23:54 -0400 Subject: [PATCH 06/23] Update Solution.js --- unit_01/w03d02/morning_exercise/Solution.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/unit_01/w03d02/morning_exercise/Solution.js b/unit_01/w03d02/morning_exercise/Solution.js index 1d06190..28f5967 100644 --- a/unit_01/w03d02/morning_exercise/Solution.js +++ b/unit_01/w03d02/morning_exercise/Solution.js @@ -37,10 +37,11 @@ console.log(diff([9,8,1,2,3,4,5])); // SOLUTION 3 // most efficient +// we're going through the array ONLY ONCE. We are assigning `big` and `small` to equal whatever is in index 0. If we encounter something that is bigger than it, we'll reassign big to that value. If we find something smaller, we'll reassign `small` to that value. var diff = function(arr){ var small = arr[0]; var big = arr[0]; - for (var i = 0, len = arr.length, j = 0; i < len; i++) { + for (var i = 0; i < arr.length; i++) { if(arr[i] > big ){ big = arr[i]; } else if (arr[i] < small){ From 9159de27041b59568608b521fdd95ae12a8429f1 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 15:52:07 -0400 Subject: [PATCH 07/23] Create README.md --- unit_01/w03d02/homework/README.md | 67 +++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 unit_01/w03d02/homework/README.md diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md new file mode 100644 index 0000000..416b551 --- /dev/null +++ b/unit_01/w03d02/homework/README.md @@ -0,0 +1,67 @@ + + +# Lets build a browser calculator! +![loop](http://www.mememaker.net/static/images/memes/3861758.jpg) + +Today, we will be building a simple interactive website: a Calculator! + +## User Stories + +User stories are a great way to break down what the different features of the website are, and how to structure it. They are generally written out in this form: + +1. A user should be able to select numbers so that they can do things with them. +2. A user should be able to add numbers together. +3. A user should be able to subtract numbers. +4. A user should be able to divide numbers. +5. A user should be able to multiply numbers together. + +Bonus: + +6. A user should be able to clear all operations and start from 0. + +## First step: creating the file structure + +1. Touch 3 files into your folder; a javascript file, a css file, and a html file. +2. In your html file, write the base html needed. +3. Using a link tag, link the CSS file to the html file. +4. Using a script tag, link the JS file to your html file (where does this script tag go?). + +## Second Step: Design and write the html needed for the calculator. + +1. My suggestion: Draw out how you want your calculator to look and start thinking about how to structure your html. +2. Think about where the input and output needs to be. +3. Think about what is going to need to be clicked and how your going to do this later. +4. Think about different positioning techniques youll need to make it look the way you want it to. + +## Third Step: Write CSS to make a rough copy of what you want it to look like. + +1. For now, don't spend too much time on this. Get everything positioned roughly where you want. +2. Make sure all of the interactive parts of the website are able to be seen and clicked upon when you start testing your javascript. +3. Make sure wherever your going to show the output is able to be seen. A good way to do this is to actually hardcode something in so that you know you can see it. + +## Fourth Step: And so JS begins. + +Now lets start writing out javascript. + +User stories are a great way to break down exactly what needs to be done. +1. Start by figuring out what informtion you need to store. You can always revise this later as you realize you need more. +2. Next, start determinig how you will handle user input. Start actually writing the event handlers. What needs to change when a user clicks a button? +3. Next, decide what functions need to be defined. When the user clicked a button, what needed to be done? +4. Use the functions previously defined to preform operations on our data. Start using the functions defined above in the event handlers. What functions need to be called when they click a button? when they click an operation? +5. Test, fix, retest, fix, retest,... +6. Look back on code written and think about better ways to implement it. Maybe somethings not working at all, how can we restructure the code we have so that it does? + +### Things to think about when thinking of the solution + +1. In this problem, state is very important. Try to think about how your going to store the state of the calculator. What kind of information do you need to track? +2. When the user clicks a button, how are you going to get which number or operation they clicked? When they click a certain button, what code are you going to have to run? +3. Think about the various operations that your going to need to perform. What kind of functions are you going to need? If you followed these steps, you should have a good idea of what you need here when you thought about what needs to happen when a user clicks a button. + + +## Fifth Step: clean up and add to it + +Once you have the basics of the calculator working and looking decent, start to refactor your code to take out uneeded parts or to implement something in a better way. + +What other operations can you add to the calculator? How woud you implement them? Is your code friendly to adding in new operations? + +Does your calculator look a bit dull or ugly? Maybe some cooler CSS would spice it up a bit! From 9014d61706a20c56913baebb0a7c1d07313dd1cb Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 15:53:29 -0400 Subject: [PATCH 08/23] Update README.md --- unit_01/w03d02/homework/README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index 416b551..cf64ecc 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -1,4 +1,21 @@ +![ga](http://mobbook.generalassemb.ly/ga_cog.png) +# WDI-PANTHALASSA + +--- +Title: Homework w03d02
+Type: Homework
+Duration: "4:00"
+Creator:
+ Original creators: WDI-Archer, WDI-Funke
+ Adapted by: Kristyn Bryan
+ Course: WDIr Panthalassa
+Competencies: Javascript, CSS, HTML
+Prerequisites: Javascript, CSS, HTML
+ +--- + +# Homework # Lets build a browser calculator! ![loop](http://www.mememaker.net/static/images/memes/3861758.jpg) From 7b81449d238994ac37e4f831abcfdc4c4118b57d Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 16:08:19 -0400 Subject: [PATCH 09/23] Update README.md --- unit_01/w03d02/homework/README.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index cf64ecc..d934ccd 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -20,28 +20,29 @@ Prerequisites: Javascript, CSS, HTML
# Lets build a browser calculator! ![loop](http://www.mememaker.net/static/images/memes/3861758.jpg) -Today, we will be building a simple interactive website: a Calculator! +Over the next two nights, you will be building a simple interactive website: a Calculator! ## User Stories -User stories are a great way to break down what the different features of the website are, and how to structure it. They are generally written out in this form: +Hey! It's a new vocabulary word! + +User stories are a great way to break down what the different features of the website are, and how to structure it. They are generally written out in this form "A user should be able to...". Here are the user stories for our homework: 1. A user should be able to select numbers so that they can do things with them. 2. A user should be able to add numbers together. 3. A user should be able to subtract numbers. 4. A user should be able to divide numbers. 5. A user should be able to multiply numbers together. - -Bonus: - -6. A user should be able to clear all operations and start from 0. +6. A user should be able to change the color of the background of their page. +7. A user should be able to select the font for their page. +8. A user should be able to clear all operations and start from 0. ## First step: creating the file structure -1. Touch 3 files into your folder; a javascript file, a css file, and a html file. +1. Create (touch) 3 files into your homework folder; a javascript file, a css file, and an html file. 2. In your html file, write the base html needed. -3. Using a link tag, link the CSS file to the html file. -4. Using a script tag, link the JS file to your html file (where does this script tag go?). +3. Using a link tag, link your CSS file to the html file. +4. Using a script tag, link the JS file to your html file (where does this script tag go? If you don't know, do some Googling). ## Second Step: Design and write the html needed for the calculator. From b896beff014f43fedbaf8f54372f4395d019e9bb Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 16:13:16 -0400 Subject: [PATCH 10/23] Update README.md --- unit_01/w03d02/homework/README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index d934ccd..68503aa 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -42,7 +42,13 @@ User stories are a great way to break down what the different features of the we 1. Create (touch) 3 files into your homework folder; a javascript file, a css file, and an html file. 2. In your html file, write the base html needed. 3. Using a link tag, link your CSS file to the html file. -4. Using a script tag, link the JS file to your html file (where does this script tag go? If you don't know, do some Googling). +4. Using a script tag, link the JS file to your html file (where does this script tag go? If you don't know, do some Googling). NOTE: You should add the following line to your .js file `console.log("My .js file is attached to my .html file")`. Open your .html file in your browser. Use your Chrome Dev Tools and look at the console. Do you see "My .js file is attached to my .html file"? If you do, success! You're linked. If you don't see it, then something is amiss. + +**Commit 1**
+
+The commit message should read:
+"Commit 1: Created .html file, .css file, .js file AND successfully linked them" +
## Second Step: Design and write the html needed for the calculator. From d3f6afbc6445a7e02aa89b60998adf4340d2ea9c Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 16:21:21 -0400 Subject: [PATCH 11/23] Update README.md --- unit_01/w03d02/homework/README.md | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index 68503aa..c6aa33e 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -50,12 +50,29 @@ The commit message should read:
"Commit 1: Created .html file, .css file, .js file AND successfully linked them"
-## Second Step: Design and write the html needed for the calculator. +## Second Step: Design your calculator. -1. My suggestion: Draw out how you want your calculator to look and start thinking about how to structure your html. +1. Don't code just yet! Draw out how you want your calculator to look and start thinking about how to structure your html. This is your chance to create a [wireframe](http://www.creativebloq.com/web-design/jargon-wireframes-mockups-prototypes-51514898)! 2. Think about where the input and output needs to be. 3. Think about what is going to need to be clicked and how your going to do this later. -4. Think about different positioning techniques youll need to make it look the way you want it to. +4. Think about where you'll place the area for a user to make custom changes. +5. Think about different positioning techniques you'll need to make it look the way you want it to. +6. Take a picture of the wireframe that you've drawn. Save it to your homework folder. If you've gotten fancy and used an online tool, save it and upload that. + +**Commit 2**
+
+The commit message should read:
+"Commit 2: Created wireframe for my calculator" +
+ +## Third Step: Write the html needed for the calculator. +1. Now that you have your wireframe drawn, use it to write the html elements needed for your calculator. + +**Commit 3**
+
+The commit message should read:
+"Commit 3: Initial HTML elements are created for the calculator" +
## Third Step: Write CSS to make a rough copy of what you want it to look like. From 010cf2198b5e6d8111b120200a738e4329506bc6 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 16:32:12 -0400 Subject: [PATCH 12/23] Update README.md --- unit_01/w03d02/homework/README.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index c6aa33e..5382778 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -67,6 +67,8 @@ The commit message should read:
## Third Step: Write the html needed for the calculator. 1. Now that you have your wireframe drawn, use it to write the html elements needed for your calculator. +2. Make a dropdown form that will include the names of two different fonts. +3. Make a radio button form that will allow the users to choose from different background colors (at least two options). **Commit 3**
@@ -74,13 +76,13 @@ The commit message should read:
"Commit 3: Initial HTML elements are created for the calculator"
-## Third Step: Write CSS to make a rough copy of what you want it to look like. +## Fourth Step: Write your initial CSS to make a rough copy of what you want it to look like. -1. For now, don't spend too much time on this. Get everything positioned roughly where you want. -2. Make sure all of the interactive parts of the website are able to be seen and clicked upon when you start testing your javascript. -3. Make sure wherever your going to show the output is able to be seen. A good way to do this is to actually hardcode something in so that you know you can see it. +1. For now, don't spend too much time on your CSS this. You will come back to it, but just get everything positioned roughly where you want (ex: make the elements that will be your buttons on the calculator large enough so that you can see a number displayed). +2. Make sure all of the interactive parts of the website are visible. This way, as you're building out the functions in your javascript file, you'll be able to test your code. +3. Make sure that, wherever you are going to show the output, (the screen) is large enough to display the numbers that will be your output. A good way to do this is to actually hardcode something into your html file (like the numbers "123456" inside the element) so that you know you can see it. -## Fourth Step: And so JS begins. +## Fifth Step: And so JS begins. Now lets start writing out javascript. @@ -99,7 +101,7 @@ User stories are a great way to break down exactly what needs to be done. 3. Think about the various operations that your going to need to perform. What kind of functions are you going to need? If you followed these steps, you should have a good idea of what you need here when you thought about what needs to happen when a user clicks a button. -## Fifth Step: clean up and add to it +## Sixth Step: clean up and add to it Once you have the basics of the calculator working and looking decent, start to refactor your code to take out uneeded parts or to implement something in a better way. From 0cbf3a9b1e3ffbfa6d4f63cf8606265eb2f0156c Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 16:33:26 -0400 Subject: [PATCH 13/23] Update README.md --- unit_01/w03d02/homework/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index 5382778..9d4212f 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -82,6 +82,12 @@ The commit message should read:
2. Make sure all of the interactive parts of the website are visible. This way, as you're building out the functions in your javascript file, you'll be able to test your code. 3. Make sure that, wherever you are going to show the output, (the screen) is large enough to display the numbers that will be your output. A good way to do this is to actually hardcode something into your html file (like the numbers "123456" inside the element) so that you know you can see it. +**Commit 4**
+
+The commit message should read:
+"Commit 4: Initial CSS has been created for the calculator" +
+ ## Fifth Step: And so JS begins. Now lets start writing out javascript. From 6399f707a7537ea370447ebefc2e956d15d77a65 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 16:39:00 -0400 Subject: [PATCH 14/23] Update README.md --- unit_01/w03d02/homework/README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index 9d4212f..00ba86d 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -76,7 +76,7 @@ The commit message should read:
"Commit 3: Initial HTML elements are created for the calculator"
-## Fourth Step: Write your initial CSS to make a rough copy of what you want it to look like. +## Fourth Step: Write your initial CSS to make a rough copy of what you want your calculator page to look like. 1. For now, don't spend too much time on your CSS this. You will come back to it, but just get everything positioned roughly where you want (ex: make the elements that will be your buttons on the calculator large enough so that you can see a number displayed). 2. Make sure all of the interactive parts of the website are visible. This way, as you're building out the functions in your javascript file, you'll be able to test your code. @@ -100,6 +100,12 @@ User stories are a great way to break down exactly what needs to be done. 5. Test, fix, retest, fix, retest,... 6. Look back on code written and think about better ways to implement it. Maybe somethings not working at all, how can we restructure the code we have so that it does? +**Commit 4**
+
+The commit message should read:
+"Commit 4: Initial CSS has been created for the calculator" +
+ ### Things to think about when thinking of the solution 1. In this problem, state is very important. Try to think about how your going to store the state of the calculator. What kind of information do you need to track? From 6ddf9fc09abca0dc00f317a0e07c72a91a5d3b22 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 17:30:22 -0400 Subject: [PATCH 15/23] Update README.md --- unit_01/w03d02/homework/README.md | 38 +++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index 00ba86d..682ee7a 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -95,28 +95,42 @@ Now lets start writing out javascript. User stories are a great way to break down exactly what needs to be done. 1. Start by figuring out what informtion you need to store. You can always revise this later as you realize you need more. 2. Next, start determinig how you will handle user input. Start actually writing the event handlers. What needs to change when a user clicks a button? -3. Next, decide what functions need to be defined. When the user clicked a button, what needed to be done? +3. Next, decide what functions need to be defined (hint: `add`, `subtract`, `multiply` are a few). When the user clicks a button, what needs to be done? 4. Use the functions previously defined to preform operations on our data. Start using the functions defined above in the event handlers. What functions need to be called when they click a button? when they click an operation? 5. Test, fix, retest, fix, retest,... 6. Look back on code written and think about better ways to implement it. Maybe somethings not working at all, how can we restructure the code we have so that it does? -**Commit 4**
+### Things to think about. + +1. In this problem, state is very important. Try to think about how your going to store the state of the calculator. What kind of information do you need to track? +2. When the user clicks a button, how are you going to get which number or operation they clicked? When they click a certain button, what code are you going to have to run? + +**Commit 5**
The commit message should read:
-"Commit 4: Initial CSS has been created for the calculator" +"Commit 5: Javascript for the calculator has been created"
-### Things to think about when thinking of the solution +## Sixth Step: Improve your CSS and add user customization. -1. In this problem, state is very important. Try to think about how your going to store the state of the calculator. What kind of information do you need to track? -2. When the user clicks a button, how are you going to get which number or operation they clicked? When they click a certain button, what code are you going to have to run? -3. Think about the various operations that your going to need to perform. What kind of functions are you going to need? If you followed these steps, you should have a good idea of what you need here when you thought about what needs to happen when a user clicks a button. +1. Once you have the basics of the calculator working, look back at your code. You want to make it [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Start to refactor (another vocabulary word) your code to take out uneeded parts or implement something in a better way. +2. What other operations can you add to the calculator? If you have time, implement them. If you don't have time, but have some ideas, add comments to your code about what you'd like to add. How might you implement them? Is your code friendly to adding in new operations if another developer came in to add something to your code? +3.Does your calculator look a bit dull? Use some CSS to spice it up a bit! +**Commit 7**
+
+The commit message should read:
+"Commit 6: User customization is added and the css has been improved on the calculator" +
-## Sixth Step: clean up and add to it - -Once you have the basics of the calculator working and looking decent, start to refactor your code to take out uneeded parts or to implement something in a better way. +## Seventh Step: clean up and enhance to it -What other operations can you add to the calculator? How woud you implement them? Is your code friendly to adding in new operations? +1. Once you have the basics of the calculator working, look back at your code. You want to make it [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Start to refactor (another vocabulary word) your code to take out uneeded parts or implement something in a better way. +2. What other operations can you add to the calculator? If you have time, implement them. If you don't have time, but have some ideas, add comments to your code about what you'd like to add. How might you implement them? Is your code friendly to adding in new operations if another developer came in to add something to your code? +3.Does your calculator look a bit dull? Use some CSS to spice it up a bit! -Does your calculator look a bit dull or ugly? Maybe some cooler CSS would spice it up a bit! +**Commit 7**
+
+The commit message should read:
+"Commit 7: Calculator code was cleaned up and I added an enhancement" +
From 61d8d68e0b85585f45881f04048035a8209c4334 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 17:39:52 -0400 Subject: [PATCH 16/23] Update README.md --- unit_01/w03d02/homework/README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index 682ee7a..5663158 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -113,11 +113,12 @@ The commit message should read:
## Sixth Step: Improve your CSS and add user customization. -1. Once you have the basics of the calculator working, look back at your code. You want to make it [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Start to refactor (another vocabulary word) your code to take out uneeded parts or implement something in a better way. -2. What other operations can you add to the calculator? If you have time, implement them. If you don't have time, but have some ideas, add comments to your code about what you'd like to add. How might you implement them? Is your code friendly to adding in new operations if another developer came in to add something to your code? -3.Does your calculator look a bit dull? Use some CSS to spice it up a bit! +1. Import at least one font from Google fonts. +2. Connect the dropdown form elements in your html and css so that a user can change the font for their page. +3. Connect the radio button form elements in your html with your css so that users can change the color of the background of their page. +4. Use at least one icon or sprite on your page (example: something from [font awesome](http://fontawesome.io/icons/) -**Commit 7**
+**Commit 6**
The commit message should read:
"Commit 6: User customization is added and the css has been improved on the calculator" @@ -127,6 +128,7 @@ The commit message should read:
1. Once you have the basics of the calculator working, look back at your code. You want to make it [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Start to refactor (another vocabulary word) your code to take out uneeded parts or implement something in a better way. 2. What other operations can you add to the calculator? If you have time, implement them. If you don't have time, but have some ideas, add comments to your code about what you'd like to add. How might you implement them? Is your code friendly to adding in new operations if another developer came in to add something to your code? +4. Can you think of anything else that might improve a user's experience with your calculator? Can you add any additional customization to your page? 3.Does your calculator look a bit dull? Use some CSS to spice it up a bit! **Commit 7**
From faebfed87fe504719e9e1b8fd44ddad884cb9920 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 17:49:03 -0400 Subject: [PATCH 17/23] Update README.md --- unit_01/w03d02/homework/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index 5663158..4cb617f 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -128,8 +128,8 @@ The commit message should read:
1. Once you have the basics of the calculator working, look back at your code. You want to make it [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Start to refactor (another vocabulary word) your code to take out uneeded parts or implement something in a better way. 2. What other operations can you add to the calculator? If you have time, implement them. If you don't have time, but have some ideas, add comments to your code about what you'd like to add. How might you implement them? Is your code friendly to adding in new operations if another developer came in to add something to your code? -4. Can you think of anything else that might improve a user's experience with your calculator? Can you add any additional customization to your page? -3.Does your calculator look a bit dull? Use some CSS to spice it up a bit! +3. Can you think of anything else that might improve a user's experience with your calculator? Can you add any additional customization to your page? +4.Does your calculator look a bit dull? Use some CSS to spice it up a bit! **Commit 7**
From ba5d3dd665f138aa50bd3fbba20737716c27130f Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 17:49:16 -0400 Subject: [PATCH 18/23] Update README.md --- unit_01/w03d02/homework/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index 4cb617f..f249a29 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -129,7 +129,7 @@ The commit message should read:
1. Once you have the basics of the calculator working, look back at your code. You want to make it [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Start to refactor (another vocabulary word) your code to take out uneeded parts or implement something in a better way. 2. What other operations can you add to the calculator? If you have time, implement them. If you don't have time, but have some ideas, add comments to your code about what you'd like to add. How might you implement them? Is your code friendly to adding in new operations if another developer came in to add something to your code? 3. Can you think of anything else that might improve a user's experience with your calculator? Can you add any additional customization to your page? -4.Does your calculator look a bit dull? Use some CSS to spice it up a bit! +4. Does your calculator look a bit dull? Use some CSS to spice it up a bit! **Commit 7**
From c4168e4fe9fee1ce6088870988b7e9342f26ecc2 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 17:50:01 -0400 Subject: [PATCH 19/23] Update README.md --- unit_01/w03d02/homework/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index f249a29..a5969ec 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -93,12 +93,12 @@ The commit message should read:
Now lets start writing out javascript. User stories are a great way to break down exactly what needs to be done. -1. Start by figuring out what informtion you need to store. You can always revise this later as you realize you need more. -2. Next, start determinig how you will handle user input. Start actually writing the event handlers. What needs to change when a user clicks a button? -3. Next, decide what functions need to be defined (hint: `add`, `subtract`, `multiply` are a few). When the user clicks a button, what needs to be done? -4. Use the functions previously defined to preform operations on our data. Start using the functions defined above in the event handlers. What functions need to be called when they click a button? when they click an operation? -5. Test, fix, retest, fix, retest,... -6. Look back on code written and think about better ways to implement it. Maybe somethings not working at all, how can we restructure the code we have so that it does? +1. Start by figuring out what informtion you need to store. You can always revise this later as you realize you need more. +2. Next, start determinig how you will handle user input. Start actually writing the event handlers. What needs to change when a user clicks a button? +3. Next, decide what functions need to be defined (hint: `add`, `subtract`, `multiply` are a few). When the user clicks a button, what needs to be done? +4. Use the functions previously defined to preform operations on our data. Start using the functions defined above in the event handlers. What functions need to be called when they click a button? when they click an operation? +5. Test, fix, retest, fix, retest,... +6. Look back on code written and think about better ways to implement it. Maybe somethings not working at all, how can we restructure the code we have so that it does? ### Things to think about. From e44c9e84c9c222f2dc010ba501653f32a8ab5f93 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 17:50:57 -0400 Subject: [PATCH 20/23] Update README.md --- unit_01/w03d02/homework/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index a5969ec..b7db552 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -93,6 +93,7 @@ The commit message should read:
Now lets start writing out javascript. User stories are a great way to break down exactly what needs to be done. + 1. Start by figuring out what informtion you need to store. You can always revise this later as you realize you need more. 2. Next, start determinig how you will handle user input. Start actually writing the event handlers. What needs to change when a user clicks a button? 3. Next, decide what functions need to be defined (hint: `add`, `subtract`, `multiply` are a few). When the user clicks a button, what needs to be done? From 1726ea3e4ff69e8a3d7bbdd3f19de3784e6939fe Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 17:51:34 -0400 Subject: [PATCH 21/23] Update README.md --- unit_01/w03d02/homework/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index b7db552..0ef4b7c 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -117,7 +117,7 @@ The commit message should read:
1. Import at least one font from Google fonts. 2. Connect the dropdown form elements in your html and css so that a user can change the font for their page. 3. Connect the radio button form elements in your html with your css so that users can change the color of the background of their page. -4. Use at least one icon or sprite on your page (example: something from [font awesome](http://fontawesome.io/icons/) +4. Use at least one icon or sprite on your page (example: something from [font awesome](http://fontawesome.io/icons/)) **Commit 6**
From 94b26aee2d1f7162e0188d71dff830594b73a402 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 18:04:12 -0400 Subject: [PATCH 22/23] Update README.md --- unit_01/w03d02/homework/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index 0ef4b7c..ed53a5c 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -33,6 +33,8 @@ User stories are a great way to break down what the different features of the we 3. A user should be able to subtract numbers. 4. A user should be able to divide numbers. 5. A user should be able to multiply numbers together. + +_Stretch goals_ 6. A user should be able to change the color of the background of their page. 7. A user should be able to select the font for their page. 8. A user should be able to clear all operations and start from 0. From 56433f6adefdf3d7aa09b0739d77331bf67a4026 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Fri, 27 May 2016 18:04:29 -0400 Subject: [PATCH 23/23] Update README.md --- unit_01/w03d02/homework/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/unit_01/w03d02/homework/README.md b/unit_01/w03d02/homework/README.md index ed53a5c..f4452b1 100644 --- a/unit_01/w03d02/homework/README.md +++ b/unit_01/w03d02/homework/README.md @@ -35,6 +35,7 @@ User stories are a great way to break down what the different features of the we 5. A user should be able to multiply numbers together. _Stretch goals_ + 6. A user should be able to change the color of the background of their page. 7. A user should be able to select the font for their page. 8. A user should be able to clear all operations and start from 0.