From 962c7866eae8513db6342196aaebcbda7163fd84 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Sun, 12 Jun 2016 23:23:51 -0400 Subject: [PATCH 01/15] Create README.md --- .../morning_exercise/stopwatch/README.md | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 unit_02/w05d02/morning_exercise/stopwatch/README.md diff --git a/unit_02/w05d02/morning_exercise/stopwatch/README.md b/unit_02/w05d02/morning_exercise/stopwatch/README.md new file mode 100644 index 0000000..bb4f9e5 --- /dev/null +++ b/unit_02/w05d02/morning_exercise/stopwatch/README.md @@ -0,0 +1,38 @@ +![ga](http://mobbook.generalassemb.ly/ga_cog.png) + +# WDI-PANTHALASSA + +--- +Title: Morning Exercise - Stopwatch w05d02
+Type: Morning Exercise
+Duration: "0:45"
+Creator:
+ Original creators: WDI-Meeseeks, WDI-Archer, WDI-Funke
+ Adapted by: Thom Page & Kristyn Bryan
+ Course: WDIr Panthalassa
+Competencies: Javascript, HTML, CSS
+Prerequisites: Javascript, HTML, CSS
+ +--- +# Morning Exercise + +STOP! WATCH TIME! + +![stopwatch](http://www.featurepics.com/FI/Thumb300/20110915/Digital-Stopwatch-1998985.jpg) + +Lets write a browser stop watch app. Here are the user stories. + +1. The user should be able to see the current amount of time that has gone by at any given point. +2. The user should be able to start the stopwatch. +3. the user should be able to stop the stopwatch. +4. The user should be able to reset the stopwatch. + +Bonus: +The user should be able to [make and reset splits](http://news.runtowin.com/2007/05/08/what-is-the-difference-between-split-times-and-lap-times.html) that appear somewhere on the page. + +We have given you the starter file to use with a basic layout for the html so that you can focus on the Javascript. Before you start to code, organize your thoughts by asking yourself these questions: + +1. What information am I going to need to store. +2. What events will I need and how will I have them interact with the web page. +3. What kind of funtions will I need in order to change the data? +Hint: When you get to the "reset" portion of your stopwatch, try Javascript's `setInterval()` method. From ec44cf312538ae886d796b7a155f6d2d3cbb4e6f Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Sun, 12 Jun 2016 23:24:32 -0400 Subject: [PATCH 02/15] Update README.md --- unit_02/w05d02/morning_exercise/stopwatch/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unit_02/w05d02/morning_exercise/stopwatch/README.md b/unit_02/w05d02/morning_exercise/stopwatch/README.md index bb4f9e5..cc90784 100644 --- a/unit_02/w05d02/morning_exercise/stopwatch/README.md +++ b/unit_02/w05d02/morning_exercise/stopwatch/README.md @@ -20,7 +20,7 @@ STOP! WATCH TIME! ![stopwatch](http://www.featurepics.com/FI/Thumb300/20110915/Digital-Stopwatch-1998985.jpg) -Lets write a browser stop watch app. Here are the user stories. +Lets write a browser stopwatch app. Here are the user stories. 1. The user should be able to see the current amount of time that has gone by at any given point. 2. The user should be able to start the stopwatch. From 03139f2186ab02cdf10945d8f40544c87aa1c30d Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Sun, 12 Jun 2016 23:25:50 -0400 Subject: [PATCH 03/15] Update README.md --- unit_02/w05d02/morning_exercise/stopwatch/README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/unit_02/w05d02/morning_exercise/stopwatch/README.md b/unit_02/w05d02/morning_exercise/stopwatch/README.md index cc90784..63070b5 100644 --- a/unit_02/w05d02/morning_exercise/stopwatch/README.md +++ b/unit_02/w05d02/morning_exercise/stopwatch/README.md @@ -26,9 +26,7 @@ Lets write a browser stopwatch app. Here are the user stories. 2. The user should be able to start the stopwatch. 3. the user should be able to stop the stopwatch. 4. The user should be able to reset the stopwatch. - -Bonus: -The user should be able to [make and reset splits](http://news.runtowin.com/2007/05/08/what-is-the-difference-between-split-times-and-lap-times.html) that appear somewhere on the page. +5. Bonus: The user should be able to [make and reset splits](http://news.runtowin.com/2007/05/08/what-is-the-difference-between-split-times-and-lap-times.html) that appear somewhere on the page. We have given you the starter file to use with a basic layout for the html so that you can focus on the Javascript. Before you start to code, organize your thoughts by asking yourself these questions: From ed259960258995334db1d9ff989309ef85fad0e8 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Sun, 12 Jun 2016 23:26:27 -0400 Subject: [PATCH 04/15] Update README.md --- unit_02/w05d02/morning_exercise/stopwatch/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/unit_02/w05d02/morning_exercise/stopwatch/README.md b/unit_02/w05d02/morning_exercise/stopwatch/README.md index 63070b5..90c0310 100644 --- a/unit_02/w05d02/morning_exercise/stopwatch/README.md +++ b/unit_02/w05d02/morning_exercise/stopwatch/README.md @@ -33,4 +33,5 @@ We have given you the starter file to use with a basic layout for the html so th 1. What information am I going to need to store. 2. What events will I need and how will I have them interact with the web page. 3. What kind of funtions will I need in order to change the data? + Hint: When you get to the "reset" portion of your stopwatch, try Javascript's `setInterval()` method. From 44cc3c413135d1a817c4950d487229d9f325bf38 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Mon, 13 Jun 2016 16:35:54 -0400 Subject: [PATCH 05/15] Update README.md --- unit_02/w05d02/homework/README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/unit_02/w05d02/homework/README.md b/unit_02/w05d02/homework/README.md index 509dbae..7e953a3 100644 --- a/unit_02/w05d02/homework/README.md +++ b/unit_02/w05d02/homework/README.md @@ -58,9 +58,11 @@ Prerequisites: Javascript
- Create a Javascript file (`.js`) for each express application (ex: `tip_calculator.js`). - Inside your homework folder, install express `npm install --save express` - Check your files. Hint: `ls`. If you have a `node_modules` folder with `express` somewhere inside, then you've successfully added express to your folder. -- Inside your Javascript file, -- +- Inside your Javascript file, require `express` (look back to the markdown from today if you need more help on how to do this) +- Install express on our server. +- Tell the server where to listen for requests (the port). +As a reminder, to get and send information, refer to this example: ``` app.get('/greeting/:name', function(req, res) { res.send({params: req.params, queries: req.query}) From 43d5adaf7b3506c71df16631318d03ec9c45096b Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Mon, 13 Jun 2016 17:52:29 -0400 Subject: [PATCH 06/15] Update README.md --- unit_02/w05d02/homework/README.md | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/unit_02/w05d02/homework/README.md b/unit_02/w05d02/homework/README.md index 7e953a3..756186d 100644 --- a/unit_02/w05d02/homework/README.md +++ b/unit_02/w05d02/homework/README.md @@ -23,7 +23,20 @@ Prerequisites: Javascript
* Practice creating custom routes. * Practice using parameters from a request. -####Tonight you will be using your new found skills to create three separate Express apps. +
+Tonight you will be using your new found skills to create three separate Express apps. + +
+#Greetings APP +- Create an express application (see the bottom of this homework for a reminder). +- Your app should have a route of `'/greeting'` and it should expect *1 param* which takes in a person's name. +- When hitting the route, the page should display a message such as "Hello, ", or "What's up, , or "! It's so great to see you!" (ex. hitting `'/greeting/Jimmy-boy'` should display `Wow! Hello there, Jimmy-boy` on the page). + +**Commit 1**
+
+"Commit 1: Greeting express application created." +
+
#Tip Calculator APP @@ -31,9 +44,9 @@ Prerequisites: Javascript
- Your app should have a route of `'/tip'` and it should expect *2 params*. One should be `total` and one should be `tipPercentage`. - When hitting the route, the page should *display how much your tip will be* based on the total ammount of the bill and the tip percentage. (ex. hitting `'/tip/100/20'` should display `20` on the page). -**Commit 1**
+**Commit 2**
-"Commit 1: Tip Calculator express application created." +"Commit 2: Tip Calculator express application created."

@@ -49,9 +62,9 @@ Prerequisites: Javascript
["It is certain", "It is decidedly so", "Without a doubt", "Yes definitely","You may rely on it", "As I see it yes", "Most likely", "Outlook good","Yes", "Signs point to yes", "Reply hazy try again", "Ask again later","Better not tell you now", "Cannot predict now", "Concentrate and ask again","Don't count on it", "My reply is no", "My sources say no","Outlook not so good", "Very doubtful"] ``` -**Commit 2**
+**Commit 3**
-"Commit 2: Magic 8 Ball express application created." +"Commit 3: Magic 8 Ball express application created."
# Reminder on how to set up an express application From 6d9117177ba9ec031c2acf70c0275b072acd9055 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Mon, 13 Jun 2016 19:31:35 -0400 Subject: [PATCH 07/15] Update README.md --- unit_02/w05d02/homework/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unit_02/w05d02/homework/README.md b/unit_02/w05d02/homework/README.md index 756186d..b007971 100644 --- a/unit_02/w05d02/homework/README.md +++ b/unit_02/w05d02/homework/README.md @@ -29,7 +29,7 @@ Tonight you will be using your new found skills to create three separate Express
#Greetings APP - Create an express application (see the bottom of this homework for a reminder). -- Your app should have a route of `'/greeting'` and it should expect *1 param* which takes in a person's name. +- Your app should have a route of `'/greeting/:name'` and it should expect *1 param* which takes in a person's name. - When hitting the route, the page should display a message such as "Hello, ", or "What's up, , or "! It's so great to see you!" (ex. hitting `'/greeting/Jimmy-boy'` should display `Wow! Hello there, Jimmy-boy` on the page). **Commit 1**
From f289d4325d38d1e4c4cb1bfb07192ee938b77fae Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Mon, 13 Jun 2016 19:32:15 -0400 Subject: [PATCH 08/15] Update README.md --- unit_02/w05d02/homework/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unit_02/w05d02/homework/README.md b/unit_02/w05d02/homework/README.md index b007971..34d70fe 100644 --- a/unit_02/w05d02/homework/README.md +++ b/unit_02/w05d02/homework/README.md @@ -30,7 +30,7 @@ Tonight you will be using your new found skills to create three separate Express #Greetings APP - Create an express application (see the bottom of this homework for a reminder). - Your app should have a route of `'/greeting/:name'` and it should expect *1 param* which takes in a person's name. -- When hitting the route, the page should display a message such as "Hello, ", or "What's up, , or "! It's so great to see you!" (ex. hitting `'/greeting/Jimmy-boy'` should display `Wow! Hello there, Jimmy-boy` on the page). +- When hitting the route, the page should display a message such as "Hello, ", or "What's up, ", or "! It's so great to see you!" (ex. hitting `'/greeting/Jimmy-boy'` should display `Wow! Hello there, Jimmy-boy` on the page). **Commit 1**
From aa94bc56cce77e487c709ac945cd0b4d6fc37e69 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Mon, 13 Jun 2016 19:32:37 -0400 Subject: [PATCH 09/15] Update README.md --- unit_02/w05d02/homework/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unit_02/w05d02/homework/README.md b/unit_02/w05d02/homework/README.md index 34d70fe..96ee9f9 100644 --- a/unit_02/w05d02/homework/README.md +++ b/unit_02/w05d02/homework/README.md @@ -30,7 +30,7 @@ Tonight you will be using your new found skills to create three separate Express #Greetings APP - Create an express application (see the bottom of this homework for a reminder). - Your app should have a route of `'/greeting/:name'` and it should expect *1 param* which takes in a person's name. -- When hitting the route, the page should display a message such as "Hello, ", or "What's up, ", or "! It's so great to see you!" (ex. hitting `'/greeting/Jimmy-boy'` should display `Wow! Hello there, Jimmy-boy` on the page). +- When hitting the route, the page should display a message such as "Hello, ", or "What's up, ``", or "``! It's so great to see you!" (ex. hitting `'/greeting/Jimmy-boy'` should display `Wow! Hello there, Jimmy-boy` on the page). **Commit 1**
From 1a740f98267fe6d5ab8c4dcdda95529891e11746 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Mon, 13 Jun 2016 20:35:39 -0400 Subject: [PATCH 10/15] Update README.md --- unit_02/w05d02/morning_exercise/stopwatch/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unit_02/w05d02/morning_exercise/stopwatch/README.md b/unit_02/w05d02/morning_exercise/stopwatch/README.md index 90c0310..da713f4 100644 --- a/unit_02/w05d02/morning_exercise/stopwatch/README.md +++ b/unit_02/w05d02/morning_exercise/stopwatch/README.md @@ -28,7 +28,7 @@ Lets write a browser stopwatch app. Here are the user stories. 4. The user should be able to reset the stopwatch. 5. Bonus: The user should be able to [make and reset splits](http://news.runtowin.com/2007/05/08/what-is-the-difference-between-split-times-and-lap-times.html) that appear somewhere on the page. -We have given you the starter file to use with a basic layout for the html so that you can focus on the Javascript. Before you start to code, organize your thoughts by asking yourself these questions: +We have given you the starter file to use with a basic layout for the html so that you can focus on the Javascript. Before you start to code, organize your thoughts by asking these questions: 1. What information am I going to need to store. 2. What events will I need and how will I have them interact with the web page. From f63e41195e1bd6b8875c3390c8cbdc1cb6dc12a9 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Mon, 13 Jun 2016 20:37:36 -0400 Subject: [PATCH 11/15] Update README.md --- unit_02/w05d02/morning_exercise/stopwatch/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/unit_02/w05d02/morning_exercise/stopwatch/README.md b/unit_02/w05d02/morning_exercise/stopwatch/README.md index da713f4..caa501f 100644 --- a/unit_02/w05d02/morning_exercise/stopwatch/README.md +++ b/unit_02/w05d02/morning_exercise/stopwatch/README.md @@ -20,6 +20,10 @@ STOP! WATCH TIME! ![stopwatch](http://www.featurepics.com/FI/Thumb300/20110915/Digital-Stopwatch-1998985.jpg) +## Stopwatch time = partner time! + +We will put you in pairs to work on this exercise. One of you should be the driver while the other is the navigator. + Lets write a browser stopwatch app. Here are the user stories. 1. The user should be able to see the current amount of time that has gone by at any given point. @@ -35,3 +39,5 @@ We have given you the starter file to use with a basic layout for the html so th 3. What kind of funtions will I need in order to change the data? Hint: When you get to the "reset" portion of your stopwatch, try Javascript's `setInterval()` method. + +When time is up, remember to share your code with your partner. From aa2355c2238ee09ff38d969883dce9608204fe8a Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Mon, 13 Jun 2016 21:01:40 -0400 Subject: [PATCH 12/15] Update README.md --- unit_02/w05d02/homework/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/unit_02/w05d02/homework/README.md b/unit_02/w05d02/homework/README.md index 96ee9f9..94566a0 100644 --- a/unit_02/w05d02/homework/README.md +++ b/unit_02/w05d02/homework/README.md @@ -27,7 +27,7 @@ Prerequisites: Javascript
Tonight you will be using your new found skills to create three separate Express apps.
-#Greetings APP +##Greetings APP - Create an express application (see the bottom of this homework for a reminder). - Your app should have a route of `'/greeting/:name'` and it should expect *1 param* which takes in a person's name. - When hitting the route, the page should display a message such as "Hello, ", or "What's up, ``", or "``! It's so great to see you!" (ex. hitting `'/greeting/Jimmy-boy'` should display `Wow! Hello there, Jimmy-boy` on the page). @@ -39,7 +39,7 @@ Tonight you will be using your new found skills to create three separate Express
-#Tip Calculator APP +##Tip Calculator APP - Create an express application (see the bottom of this homework for a reminder). - Your app should have a route of `'/tip'` and it should expect *2 params*. One should be `total` and one should be `tipPercentage`. - When hitting the route, the page should *display how much your tip will be* based on the total ammount of the bill and the tip percentage. (ex. hitting `'/tip/100/20'` should display `20` on the page). @@ -50,7 +50,7 @@ Tonight you will be using your new found skills to create three separate Express

-#Magic 8 Ball APP +##Magic 8 Ball APP - Create an express application. - Create a route of `'/magic'` that should expect a phrase in the URL that ask the Magic 8 ball a question. - So if the user hits that route and asks a question of "Will I be a Millionaire" (ex. `'/magic/Will%20I%20Be%20A%20Millionaire'`) he should have return to him his question AND a random Magic 8 ball response (see the array below) on the screen. @@ -67,7 +67,7 @@ Tonight you will be using your new found skills to create three separate Express "Commit 3: Magic 8 Ball express application created."
-# Reminder on how to set up an express application +## Reminder on how to set up an express application - Create a Javascript file (`.js`) for each express application (ex: `tip_calculator.js`). - Inside your homework folder, install express `npm install --save express` - Check your files. Hint: `ls`. If you have a `node_modules` folder with `express` somewhere inside, then you've successfully added express to your folder. From 3dcf6cb6d0b40682812036999ad89abea4d548fc Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Mon, 13 Jun 2016 21:02:03 -0400 Subject: [PATCH 13/15] Update README.md --- unit_02/w05d02/homework/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unit_02/w05d02/homework/README.md b/unit_02/w05d02/homework/README.md index 94566a0..97cfad0 100644 --- a/unit_02/w05d02/homework/README.md +++ b/unit_02/w05d02/homework/README.md @@ -15,7 +15,7 @@ Prerequisites: Javascript
--- -#EXPRESS YOURSELF!! +#Express Yourself ## Learning Objectives From 8baf0f86148a7e66a33ede37c564010402f29689 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Mon, 13 Jun 2016 21:36:08 -0400 Subject: [PATCH 14/15] Update README.md --- unit_02/w05d02/homework/README.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/unit_02/w05d02/homework/README.md b/unit_02/w05d02/homework/README.md index 97cfad0..0c042a4 100644 --- a/unit_02/w05d02/homework/README.md +++ b/unit_02/w05d02/homework/README.md @@ -83,9 +83,20 @@ app.get('/greeting/:name', function(req, res) { ```
-## Views -Index -Show -Module.export +# Look at the View + +
+##Peek-a-boo +- Create a new folder called `views` +- Create a file called `peek_a_boo.html.ejs`. +- Create a file called `server.js`. Inside this file, write code that will render to the screen "Tee hee!" if a user goes to the address `/i_see_you`. +- If someone types in an address that is NOT `/i_see_you`, a message should be rendered to the screen saying "Where are you?" +- Write the code in both of your new files that will render data from your `server.js` file in the body of your `peek_a_boo.html.ejs` + +**Commit 4**
+
+"Commit 4: Rendered a view with Peek-a-boo." +
+ From b34a308dbcb78033f160871ead944f9fc869047b Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Mon, 13 Jun 2016 21:39:22 -0400 Subject: [PATCH 15/15] Update README.md --- unit_02/w05d02/homework/README.md | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/unit_02/w05d02/homework/README.md b/unit_02/w05d02/homework/README.md index 0c042a4..2cd28b5 100644 --- a/unit_02/w05d02/homework/README.md +++ b/unit_02/w05d02/homework/README.md @@ -83,20 +83,7 @@ app.get('/greeting/:name', function(req, res) { ```
-# Look at the View - -
-##Peek-a-boo -- Create a new folder called `views` -- Create a file called `peek_a_boo.html.ejs`. -- Create a file called `server.js`. Inside this file, write code that will render to the screen "Tee hee!" if a user goes to the address `/i_see_you`. -- If someone types in an address that is NOT `/i_see_you`, a message should be rendered to the screen saying "Where are you?" -- Write the code in both of your new files that will render data from your `server.js` file in the body of your `peek_a_boo.html.ejs` - -**Commit 4**
-
-"Commit 4: Rendered a view with Peek-a-boo." -
- +# Views Homework +Go to the folder called `Pokeman_Starter` for the next part of your homework