From 1d9b1120495c922e23cd0c93ee7cb4eb97e979ba Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Sat, 6 Oct 2018 16:38:32 -0500 Subject: [PATCH] move solutions to /complete folders, & add extra credit --- README.md | 8 +- _not_important/instructor-notes/aggregated.md | 93 +++++++++++++++++++ exercise-10/App.js | 2 +- exercise-10/complete/App.css | 19 ++++ exercise-10/complete/App.js | 21 +++++ exercise-10/complete/Card.css | 11 +++ exercise-10/complete/Card.js | 7 ++ exercise-10/complete/Exercise.js | 25 +++++ exercise-10/complete/FriendProfile.css | 9 ++ exercise-10/complete/FriendProfile.js | 16 ++++ exercise-10/complete/Friends.js | 18 ++++ exercise-10/complete/Page.css | 17 ++++ exercise-10/complete/Page.js | 11 +++ exercise-11/README.md | 8 ++ exercise-11/complete/App.css | 28 ++++++ exercise-11/complete/App.js | 23 +++++ exercise-11/complete/Card.css | 11 +++ exercise-11/complete/Card.js | 7 ++ exercise-11/complete/Exercise.js | 25 +++++ .../complete}/FriendProfile.css | 0 exercise-11/complete/FriendProfile.js | 16 ++++ exercise-11/complete/Friends.js | 18 ++++ exercise-11/complete/Page.css | 17 ++++ exercise-11/complete/Page.js | 11 +++ exercise-12/complete/App.css | 22 +++++ .../{App.finished.js => complete/App.js} | 2 +- exercise-12/complete/data/friends.js | 20 ++++ .../complete/friend-detail/FriendDetail.css | 3 + .../friend-detail/FriendDetail.entry.js} | 2 +- .../friend-detail/FriendDetail.js} | 0 .../complete/friends/FriendProfile.css | 9 ++ .../complete}/friends/FriendProfile.js | 0 exercise-12/complete/friends/Friends.entry.js | 10 ++ .../complete}/friends/Friends.js | 0 exercise-12/complete/shared/Card.css | 11 +++ exercise-12/complete/shared/Card.js | 7 ++ exercise-12/complete/shared/Page.css | 17 ++++ exercise-12/complete/shared/Page.js | 11 +++ exercise-12/friends/Friends.js | 3 +- exercise-12/index.js | 4 +- exercise-13/README.md | 4 + .../complete/friend-detail/FriendFlipper.css | 75 +++++++++++++++ .../friend-detail/FriendFlipper.js} | 0 exercise-13/friend-detail/FriendDetail.js | 2 +- exercise-15/App.js | 7 +- exercise-15/README.md | 8 ++ exercise-15/SOLUTIONS.md | 2 +- exercise-15/complete/App.css | 22 +++++ exercise-15/complete/App.js | 29 ++++++ exercise-15/complete/data/db.json | 35 +++++++ exercise-15/complete/data/friends.js | 23 +++++ .../complete}/friend-detail/FriendDetail.css | 0 .../friend-detail/FriendDetail.entry.js} | 2 +- .../friend-detail/FriendDetail.js} | 0 .../complete/friend-detail/FriendFlipper.css | 78 ++++++++++++++++ .../complete/friend-detail/FriendFlipper.js | 76 +++++++++++++++ .../friend-detail/get-friend-from-api.js | 0 .../complete/friends/FriendProfile.css | 9 ++ .../complete/friends/FriendProfile.js | 0 .../complete}/friends/Friends.entry.js | 0 exercise-15/complete/friends/Friends.js | 19 ++++ .../complete}/friends/get-friends-from-api.js | 0 exercise-15/complete/shared/Card.css | 8 ++ exercise-15/complete/shared/Card.js | 7 ++ exercise-15/complete/shared/Page.css | 17 ++++ exercise-15/complete/shared/Page.js | 11 +++ exercise-15/index.js | 2 +- exercise-16/README.md | 4 + exercise-16/{finished => complete}/App.css | 0 exercise-16/{finished => complete}/App.js | 0 exercise-16/{finished => complete}/Header.css | 0 exercise-16/{finished => complete}/Header.js | 0 .../complete/friend-detail/FriendDetail.css | 13 +++ .../friend-detail/FriendDetail.entry.js | 0 .../friend-detail/FriendDetail.js | 0 .../friend-detail/FriendFlipper.css | 0 .../friend-detail/FriendFlipper.js | 0 .../friend-detail/get-friend-from-api.js | 7 ++ .../complete/friends/FriendProfile.css | 9 ++ exercise-16/complete/friends/FriendProfile.js | 19 ++++ .../complete/friends/Friends.entry.js | 0 exercise-16/complete/friends/Friends.js | 19 ++++ .../complete/friends/get-friends-from-api.js | 7 ++ .../{finished => complete}/shared/Card.css | 0 .../{finished => complete}/shared/Card.js | 0 .../{finished => complete}/shared/Page.css | 0 .../{finished => complete}/shared/Page.js | 0 .../{finished => complete}/theme/Provider.js | 0 .../{finished => complete}/theme/Switcher.css | 0 .../{finished => complete}/theme/Switcher.js | 0 .../{finished => complete}/theme/context.js | 0 .../{finished => complete}/theme/static.js | 0 exercise-16/index.js | 2 +- .../friend-detail/FriendDetail.spec.js | 45 +++++++++ .../friend-detail/FriendDetail.spec.js | 37 -------- exercise-18/README.md | 6 ++ .../complete/friend-detail/FriendFlipper.js | 89 ++++++++++++++++++ .../friend-detail/FriendFlipper.spec.js | 57 ++++++++++++ exercise-18/friend-detail/FriendFlipper.js | 7 +- .../friend-detail/FriendFlipper.spec.js | 52 ----------- exercise-5/App.js | 3 +- .../Exercise.js} | 0 exercise-6/App.js | 3 +- .../Exercise.js} | 0 exercise-7/App.js | 3 +- .../Exercise.js} | 0 exercise-8/App.js | 3 +- exercise-8/README.md | 4 + .../Exercise.js} | 0 exercise-9/App.js | 3 +- exercise-9/README.md | 6 ++ .../Exercise.js} | 0 module-0/README.md | 40 -------- module-0/exercise-1/README.md | 16 ---- module-0/exercise-1/add.js | 7 -- module-0/exercise-1/add.spec.js | 15 --- module-0/exercise-2/README.md | 27 ------ module-0/exercise-2/things.js | 13 --- module-0/exercise-2/things.spec.js | 35 ------- module-0/exercise-3/README.md | 29 ------ module-0/exercise-3/greetings.js | 15 --- module-0/exercise-3/greetings.spec.js | 84 ----------------- module-0/jest.config.js | 30 ------ 123 files changed, 1253 insertions(+), 434 deletions(-) create mode 100644 _not_important/instructor-notes/aggregated.md create mode 100644 exercise-10/complete/App.css create mode 100644 exercise-10/complete/App.js create mode 100644 exercise-10/complete/Card.css create mode 100644 exercise-10/complete/Card.js create mode 100644 exercise-10/complete/Exercise.js create mode 100644 exercise-10/complete/FriendProfile.css create mode 100644 exercise-10/complete/FriendProfile.js create mode 100644 exercise-10/complete/Friends.js create mode 100644 exercise-10/complete/Page.css create mode 100644 exercise-10/complete/Page.js create mode 100644 exercise-11/complete/App.css create mode 100644 exercise-11/complete/App.js create mode 100644 exercise-11/complete/Card.css create mode 100644 exercise-11/complete/Card.js create mode 100644 exercise-11/complete/Exercise.js rename {exercise-16/finished/friends => exercise-11/complete}/FriendProfile.css (100%) create mode 100644 exercise-11/complete/FriendProfile.js create mode 100644 exercise-11/complete/Friends.js create mode 100644 exercise-11/complete/Page.css create mode 100644 exercise-11/complete/Page.js create mode 100644 exercise-12/complete/App.css rename exercise-12/{App.finished.js => complete/App.js} (91%) create mode 100644 exercise-12/complete/data/friends.js create mode 100644 exercise-12/complete/friend-detail/FriendDetail.css rename exercise-12/{friend-detail/FriendDetail.entry.finished.js => complete/friend-detail/FriendDetail.entry.js} (85%) rename exercise-12/{friend-detail/FriendDetail.finished.js => complete/friend-detail/FriendDetail.js} (100%) create mode 100644 exercise-12/complete/friends/FriendProfile.css rename {exercise-16/finished => exercise-12/complete}/friends/FriendProfile.js (100%) create mode 100644 exercise-12/complete/friends/Friends.entry.js rename {exercise-16/finished => exercise-12/complete}/friends/Friends.js (100%) create mode 100644 exercise-12/complete/shared/Card.css create mode 100644 exercise-12/complete/shared/Card.js create mode 100644 exercise-12/complete/shared/Page.css create mode 100644 exercise-12/complete/shared/Page.js create mode 100644 exercise-13/complete/friend-detail/FriendFlipper.css rename exercise-13/{friend-detail/FriendFlipper.finished.js => complete/friend-detail/FriendFlipper.js} (100%) create mode 100644 exercise-15/complete/App.css create mode 100644 exercise-15/complete/App.js create mode 100644 exercise-15/complete/data/db.json create mode 100644 exercise-15/complete/data/friends.js rename {exercise-16/finished => exercise-15/complete}/friend-detail/FriendDetail.css (100%) rename exercise-15/{friend-detail/FriendDetail.entry.finished.js => complete/friend-detail/FriendDetail.entry.js} (88%) rename exercise-15/{friend-detail/FriendDetail.finished.js => complete/friend-detail/FriendDetail.js} (100%) create mode 100644 exercise-15/complete/friend-detail/FriendFlipper.css create mode 100644 exercise-15/complete/friend-detail/FriendFlipper.js rename {exercise-16/finished => exercise-15/complete}/friend-detail/get-friend-from-api.js (100%) create mode 100644 exercise-15/complete/friends/FriendProfile.css rename exercise-12/friends/FriendProfile.finished.js => exercise-15/complete/friends/FriendProfile.js (100%) rename {exercise-16/finished => exercise-15/complete}/friends/Friends.entry.js (100%) create mode 100644 exercise-15/complete/friends/Friends.js rename {exercise-16/finished => exercise-15/complete}/friends/get-friends-from-api.js (100%) create mode 100644 exercise-15/complete/shared/Card.css create mode 100644 exercise-15/complete/shared/Card.js create mode 100644 exercise-15/complete/shared/Page.css create mode 100644 exercise-15/complete/shared/Page.js rename exercise-16/{finished => complete}/App.css (100%) rename exercise-16/{finished => complete}/App.js (100%) rename exercise-16/{finished => complete}/Header.css (100%) rename exercise-16/{finished => complete}/Header.js (100%) create mode 100644 exercise-16/complete/friend-detail/FriendDetail.css rename exercise-16/{finished => complete}/friend-detail/FriendDetail.entry.js (100%) rename exercise-16/{finished => complete}/friend-detail/FriendDetail.js (100%) rename exercise-16/{finished => complete}/friend-detail/FriendFlipper.css (100%) rename exercise-16/{finished => complete}/friend-detail/FriendFlipper.js (100%) create mode 100644 exercise-16/complete/friend-detail/get-friend-from-api.js create mode 100644 exercise-16/complete/friends/FriendProfile.css create mode 100644 exercise-16/complete/friends/FriendProfile.js rename exercise-15/friends/Friends.entry.finished.js => exercise-16/complete/friends/Friends.entry.js (100%) create mode 100644 exercise-16/complete/friends/Friends.js create mode 100644 exercise-16/complete/friends/get-friends-from-api.js rename exercise-16/{finished => complete}/shared/Card.css (100%) rename exercise-16/{finished => complete}/shared/Card.js (100%) rename exercise-16/{finished => complete}/shared/Page.css (100%) rename exercise-16/{finished => complete}/shared/Page.js (100%) rename exercise-16/{finished => complete}/theme/Provider.js (100%) rename exercise-16/{finished => complete}/theme/Switcher.css (100%) rename exercise-16/{finished => complete}/theme/Switcher.js (100%) rename exercise-16/{finished => complete}/theme/context.js (100%) rename exercise-16/{finished => complete}/theme/static.js (100%) create mode 100644 exercise-17/complete/friend-detail/FriendDetail.spec.js create mode 100644 exercise-18/complete/friend-detail/FriendFlipper.js create mode 100644 exercise-18/complete/friend-detail/FriendFlipper.spec.js rename exercise-5/{ExerciseFinished.js => complete/Exercise.js} (100%) rename exercise-6/{ExerciseFinished.js => complete/Exercise.js} (100%) rename exercise-7/{ExerciseFinished.js => complete/Exercise.js} (100%) rename exercise-8/{ExerciseFinished.js => complete/Exercise.js} (100%) rename exercise-9/{ExerciseFinished.js => complete/Exercise.js} (100%) delete mode 100644 module-0/README.md delete mode 100644 module-0/exercise-1/README.md delete mode 100644 module-0/exercise-1/add.js delete mode 100644 module-0/exercise-1/add.spec.js delete mode 100644 module-0/exercise-2/README.md delete mode 100644 module-0/exercise-2/things.js delete mode 100644 module-0/exercise-2/things.spec.js delete mode 100644 module-0/exercise-3/README.md delete mode 100644 module-0/exercise-3/greetings.js delete mode 100644 module-0/exercise-3/greetings.spec.js delete mode 100644 module-0/jest.config.js diff --git a/README.md b/README.md index 7451255..1586a29 100644 --- a/README.md +++ b/README.md @@ -21,4 +21,10 @@ If you still can't figure out why things aren't working, raise your hand if in-p ## Common issues -https://github.com/expo/expo/issues/854 - install watchman on macs if fsevents error; sometimes homebrew fails to link the keg because of permissions, and that can be resolved by manually linking. +### `fsevents`/`watchman` error on Mac + +You might need to manually install watchman on a Mac. Do this with homebrew (brew install watchman). + +Even after installing, sometimes it seems to fail at linking. You might need to do this manually, too (`brew link watchman`). + +A possibly related issue is here - https://github.com/expo/expo/issues/854. diff --git a/_not_important/instructor-notes/aggregated.md b/_not_important/instructor-notes/aggregated.md new file mode 100644 index 0000000..d6d9b28 --- /dev/null +++ b/_not_important/instructor-notes/aggregated.md @@ -0,0 +1,93 @@ +# Exercise 1 +## Modern JS - Modules + + +-1. get latest + a. git checkout master + b. git pull + +0. Get your test suite running + a. npm run test-module-1 + b. You should see this test output (show) + +1. Test - 'adds two numbers' + a. Import the `add` function (as a named import) + b. Mark the `add` function as a named export + c. Convert test to fat-arrow + +2. Test - 'adds 2 to something' + a. Import the `addThree` function (as a default import) + b. Mark the `addThree` function as a default export + c. Rename the `addThree` function + +3. Show an import from npm (import React from 'react') + +--- + +# Exercise 3 +## Class Syntax + + +0. Get your test suite running + a. npm run test-module-3 + b. You should see this test output (show) + +1. Test - "it is a thing" + a. Uncomment the first test + b. Test should pass! + c. Talk about declaration (G! class definition) + d. Talk about instantiation (H! class usage) + +2. Test - "it inherits base properties" + a. Uncomment the test + b. Test should fail + c. Add thingOneProperty to ThingOne (J! class properties) + d. Add thingTwoProperty to ThingTwo + e. Test still fails + f. ThingTwo extends ThingOne (I! extends) + g. Tricky differences - prototypal inheritance (interview question) + +3. Test - "it adds it up" (K! instance methods) + a. Uncomment the test + b. Test should fail + c. Write instance method additup() + d. talk about "this". + +4. Test - "it adds it up" (L! class props/event handlers) + a. Convert to class property/fat arrow + b. Right now, not much difference in "this", but when we get to event handling in React, we'll see some differences. + c. Implicit return + + --- + +# Exercise 4 +## Modern JS - Working with Objects + +0. Get your test suite running + a. npm run test-module-1 + b. You should see this test output (show) + +1. Test - "it builds a greeting" (M! template literals) + a. Uncomment test + b. Test fails! + c. Write with concatenation + d. Write with string template literal + +2. Test - "it chooses a parting word" (N! ternary) + a. Uncomment test + b. Test fails! + c. Write with if statement + d. Write with ternary + +3. Test - "it chooses a parting word with destructuring" (O! destructuring) + a. Uncomment test + b. Test fails! + c. Write with manual property assignment + d. Write with destructuring in the body + e. Write with destructuring in arguments + +4. Test - "it maps parting words" (P! array.map) + a. Uncomment test + b. Test fails! + c. Write with looping + d. Write with array.map diff --git a/exercise-10/App.js b/exercise-10/App.js index 56ced03..1e3bff0 100644 --- a/exercise-10/App.js +++ b/exercise-10/App.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import './App.css'; -import Exercise from './Exercise'; +import Exercise from './complete/Exercise'; class App extends Component { render() { diff --git a/exercise-10/complete/App.css b/exercise-10/complete/App.css new file mode 100644 index 0000000..da01dd6 --- /dev/null +++ b/exercise-10/complete/App.css @@ -0,0 +1,19 @@ +.App { + text-align: center; +} + +.App-header { + background-color: teal; + height: 100px; + padding: 20px; + color: white; +} + +.App-title { + font-family: 'Pacifico', cursive; + line-height: 0.5em; +} + +.App-intro { + font-size: large; +} diff --git a/exercise-10/complete/App.js b/exercise-10/complete/App.js new file mode 100644 index 0000000..56ced03 --- /dev/null +++ b/exercise-10/complete/App.js @@ -0,0 +1,21 @@ +import React, { Component } from 'react'; +import './App.css'; +import Exercise from './Exercise'; + +class App extends Component { + render() { + return ( +
+
+

Exercise 10

+

Component CSS Files

+
+
+ +
+
+ ); + } +} + +export default App; \ No newline at end of file diff --git a/exercise-10/complete/Card.css b/exercise-10/complete/Card.css new file mode 100644 index 0000000..852c5c6 --- /dev/null +++ b/exercise-10/complete/Card.css @@ -0,0 +1,11 @@ +.card { + min-width: 150px; + background-color: mintcream; + margin: 20px; + padding: 30px; + box-shadow: 0 1px 2px teal; +} + +.card:hover { + box-shadow: 0 2px 4px teal; +} \ No newline at end of file diff --git a/exercise-10/complete/Card.js b/exercise-10/complete/Card.js new file mode 100644 index 0000000..bb49f4b --- /dev/null +++ b/exercise-10/complete/Card.js @@ -0,0 +1,7 @@ +import React from 'react'; + +import './Card.css'; + +export default function Card({ children }) { + return
{children}
; +} \ No newline at end of file diff --git a/exercise-10/complete/Exercise.js b/exercise-10/complete/Exercise.js new file mode 100644 index 0000000..1f81990 --- /dev/null +++ b/exercise-10/complete/Exercise.js @@ -0,0 +1,25 @@ +import React from 'react'; + +import Friends from './Friends'; + +export default function Exercise() { + return +} + +const myFriends = [ + { + id: 1, + name: 'Potatoes', + image: 'http://placekitten.com/150/150?image=1', + }, + { + id: 2, + name: 'Flower', + image: 'http://placekitten.com/150/150?image=12', + }, + { + id: 3, + name: 'Turtle', + image: 'http://placekitten.com/150/150?image=15', + }, +]; diff --git a/exercise-10/complete/FriendProfile.css b/exercise-10/complete/FriendProfile.css new file mode 100644 index 0000000..7c9f7ef --- /dev/null +++ b/exercise-10/complete/FriendProfile.css @@ -0,0 +1,9 @@ +.friend-profile { + display: flex; + flex-direction: column; + align-items: center; +} + +.friend-profile h3 { + margin-bottom: 0; +} \ No newline at end of file diff --git a/exercise-10/complete/FriendProfile.js b/exercise-10/complete/FriendProfile.js new file mode 100644 index 0000000..c527f22 --- /dev/null +++ b/exercise-10/complete/FriendProfile.js @@ -0,0 +1,16 @@ +import React from 'react'; + +import Card from './Card'; + +import './FriendProfile.css'; + +export default function FriendProfile({ name, image }) { + return ( + +
+ {name} +

{name}

+
+ + ); +} diff --git a/exercise-10/complete/Friends.js b/exercise-10/complete/Friends.js new file mode 100644 index 0000000..14574df --- /dev/null +++ b/exercise-10/complete/Friends.js @@ -0,0 +1,18 @@ +import React from 'react'; + +import Page from './Page'; +import FriendProfile from './FriendProfile'; + +export default function Friends({ friends }) { + return ( + + {friends.map(friend => ( + + ))} + + ); +} \ No newline at end of file diff --git a/exercise-10/complete/Page.css b/exercise-10/complete/Page.css new file mode 100644 index 0000000..cd8919a --- /dev/null +++ b/exercise-10/complete/Page.css @@ -0,0 +1,17 @@ +.page { + display: flex; + flex-direction: row; + justify-content: center; + background: repeating-linear-gradient(to top, mintcream, teal); + height: calc(100vh - 140px); +} + +.content{ + background-color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + height: calc(100vh - 140px); + width: 1000px; +} \ No newline at end of file diff --git a/exercise-10/complete/Page.js b/exercise-10/complete/Page.js new file mode 100644 index 0000000..dd81ef5 --- /dev/null +++ b/exercise-10/complete/Page.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import './Page.css'; + +export default function Page({ children }) { + return ( +
+
{children}
+
+ ); +} diff --git a/exercise-11/README.md b/exercise-11/README.md index 430df0e..97eb3b3 100644 --- a/exercise-11/README.md +++ b/exercise-11/README.md @@ -96,6 +96,8 @@ The remaining components in the exercise - `Card`, `FriendProfile`, and `Page` - 👉 Convert the `Card`, `FriendProfile`, and `Page` components to use CSS Modules. +If you get stuck, see the `./complete` folder for possible solutions. + ### Combining class names One interesting problem with CSS Modules is that applying multiple classes to an element is not as simple as in component CSS files. @@ -127,3 +129,9 @@ Aside from combining multiple class names, the `classnames` library also makes i 👉 Modify the `h1` in `App.js` to apply both the `styles.appTitle` and `styles.emphasize` styles. Use the method you prefer from the above options (manually inserting spaces, or using the `classnames` library). + +If you get stuck, see [`./complete/App.js`](./complete/App.js) for a possible solution. + +### Extra Credit + +* Read a [comparison of CSS Modules to another approach for styling in React - CSS-in-JS](https://medium.com/@pioul/modular-css-with-react-61638ae9ea3e). \ No newline at end of file diff --git a/exercise-11/complete/App.css b/exercise-11/complete/App.css new file mode 100644 index 0000000..3e2e49b --- /dev/null +++ b/exercise-11/complete/App.css @@ -0,0 +1,28 @@ +.app { + text-align: center; + + --brand-dark: blueviolet; + --brand-light: ghostwhite; +} + +.appHeader { + background-color: var(--brand-dark); + height: 100px; + padding: 20px; + color: white; +} + +.emphasize { + font-style: italic; +} +.emphasize:before { + content: '👉' +} +.emphasize:after { + content: '👈' +} + +.appTitle { + font-family: 'Pacifico', cursive; + line-height: 0.5em; +} diff --git a/exercise-11/complete/App.js b/exercise-11/complete/App.js new file mode 100644 index 0000000..65a7cbb --- /dev/null +++ b/exercise-11/complete/App.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; +import Exercise from './Exercise'; +import styles from './App.css'; + +import classNames from 'classnames'; + +class App extends Component { + render() { + return ( +
+
+

Exercise 11

+

CSS Modules

+
+
+ +
+
+ ); + } +} + +export default App; \ No newline at end of file diff --git a/exercise-11/complete/Card.css b/exercise-11/complete/Card.css new file mode 100644 index 0000000..3265a74 --- /dev/null +++ b/exercise-11/complete/Card.css @@ -0,0 +1,11 @@ +.card { + min-width: 150px; + background-color: var(--brand-light); + margin: 20px; + padding: 30px; + box-shadow: 0 1px 2px var(--brand-dark); +} + +.card:hover { + box-shadow: 0 2px 4px var(--brand-dark); +} diff --git a/exercise-11/complete/Card.js b/exercise-11/complete/Card.js new file mode 100644 index 0000000..0546dbc --- /dev/null +++ b/exercise-11/complete/Card.js @@ -0,0 +1,7 @@ +import React from 'react'; + +import styles from './Card.css'; + +export default function Card({ children }) { + return
{children}
; +} \ No newline at end of file diff --git a/exercise-11/complete/Exercise.js b/exercise-11/complete/Exercise.js new file mode 100644 index 0000000..1f81990 --- /dev/null +++ b/exercise-11/complete/Exercise.js @@ -0,0 +1,25 @@ +import React from 'react'; + +import Friends from './Friends'; + +export default function Exercise() { + return +} + +const myFriends = [ + { + id: 1, + name: 'Potatoes', + image: 'http://placekitten.com/150/150?image=1', + }, + { + id: 2, + name: 'Flower', + image: 'http://placekitten.com/150/150?image=12', + }, + { + id: 3, + name: 'Turtle', + image: 'http://placekitten.com/150/150?image=15', + }, +]; diff --git a/exercise-16/finished/friends/FriendProfile.css b/exercise-11/complete/FriendProfile.css similarity index 100% rename from exercise-16/finished/friends/FriendProfile.css rename to exercise-11/complete/FriendProfile.css diff --git a/exercise-11/complete/FriendProfile.js b/exercise-11/complete/FriendProfile.js new file mode 100644 index 0000000..acd66af --- /dev/null +++ b/exercise-11/complete/FriendProfile.js @@ -0,0 +1,16 @@ +import React from 'react'; + +import Card from './Card'; + +import styles from './FriendProfile.css' + +export default function FriendProfile({ name, image }) { + return ( + +
+ {name} +

{name}

+
+ + ); +} diff --git a/exercise-11/complete/Friends.js b/exercise-11/complete/Friends.js new file mode 100644 index 0000000..14574df --- /dev/null +++ b/exercise-11/complete/Friends.js @@ -0,0 +1,18 @@ +import React from 'react'; + +import Page from './Page'; +import FriendProfile from './FriendProfile'; + +export default function Friends({ friends }) { + return ( + + {friends.map(friend => ( + + ))} + + ); +} \ No newline at end of file diff --git a/exercise-11/complete/Page.css b/exercise-11/complete/Page.css new file mode 100644 index 0000000..0681578 --- /dev/null +++ b/exercise-11/complete/Page.css @@ -0,0 +1,17 @@ +.page { + display: flex; + flex-direction: row; + justify-content: center; + background: repeating-linear-gradient(to top, var(--brand-light), var(--brand-dark)); + height: calc(100vh - 140px); +} + +.content{ + background-color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + height: calc(100vh - 140px); + width: 1000px; +} \ No newline at end of file diff --git a/exercise-11/complete/Page.js b/exercise-11/complete/Page.js new file mode 100644 index 0000000..d4623b2 --- /dev/null +++ b/exercise-11/complete/Page.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import styles from './Page.css'; + +export default function Page({ children }) { + return ( +
+
{children}
+
+ ); +} diff --git a/exercise-12/complete/App.css b/exercise-12/complete/App.css new file mode 100644 index 0000000..5235594 --- /dev/null +++ b/exercise-12/complete/App.css @@ -0,0 +1,22 @@ +.app { + text-align: center; + + --brand-dark: teal; + --brand-light: mintcream; +} + +.appHeader { + background-color: var(--brand-dark); + height: 100px; + padding: 20px; + color: white; +} + +.emphasize { + text-decoration: underline; +} + +.appTitle { + font-family: 'Pacifico', cursive; + line-height: 0.5em; +} diff --git a/exercise-12/App.finished.js b/exercise-12/complete/App.js similarity index 91% rename from exercise-12/App.finished.js rename to exercise-12/complete/App.js index 3d2d3d6..af8b87b 100644 --- a/exercise-12/App.finished.js +++ b/exercise-12/complete/App.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import { BrowserRouter, Route } from 'react-router-dom'; import Friends from './friends/Friends.entry'; -import FriendDetail from './friend-detail/FriendDetail.entry.finished'; +import FriendDetail from './friend-detail/FriendDetail.entry'; import styles from './App.css'; diff --git a/exercise-12/complete/data/friends.js b/exercise-12/complete/data/friends.js new file mode 100644 index 0000000..5fb4b02 --- /dev/null +++ b/exercise-12/complete/data/friends.js @@ -0,0 +1,20 @@ +export default [ + { + id: 1, + name: 'Potatoes', + image: 'http://placekitten.com/150/150?image=1', + bio: 'This soft little kitten loves to play in window sills, and snuggles like a champion.' + }, + { + id: 2, + name: 'Flower', + image: 'http://placekitten.com/150/150?image=12', + bio: 'This teensy little girl is a sweetheart. Her tiny baby sneezes will warm your heart.' + }, + { + id: 3, + name: 'Turtle', + image: 'http://placekitten.com/150/150?image=15', + bio: 'This old pal loves to leap for flying toy mice. Throw anything his way, and he\'ll impress you with some backflips.' + }, +]; diff --git a/exercise-12/complete/friend-detail/FriendDetail.css b/exercise-12/complete/friend-detail/FriendDetail.css new file mode 100644 index 0000000..3432a3e --- /dev/null +++ b/exercise-12/complete/friend-detail/FriendDetail.css @@ -0,0 +1,3 @@ +.friendDetail { + width: 50%; +} diff --git a/exercise-12/friend-detail/FriendDetail.entry.finished.js b/exercise-12/complete/friend-detail/FriendDetail.entry.js similarity index 85% rename from exercise-12/friend-detail/FriendDetail.entry.finished.js rename to exercise-12/complete/friend-detail/FriendDetail.entry.js index 4c4ea4a..9b25248 100644 --- a/exercise-12/friend-detail/FriendDetail.entry.finished.js +++ b/exercise-12/complete/friend-detail/FriendDetail.entry.js @@ -2,7 +2,7 @@ import React from 'react'; import friends from '../data/friends'; -import FriendDetail from './FriendDetail.finished'; +import FriendDetail from './FriendDetail'; export default function({match}) { // the match prop is passed in via react.router diff --git a/exercise-12/friend-detail/FriendDetail.finished.js b/exercise-12/complete/friend-detail/FriendDetail.js similarity index 100% rename from exercise-12/friend-detail/FriendDetail.finished.js rename to exercise-12/complete/friend-detail/FriendDetail.js diff --git a/exercise-12/complete/friends/FriendProfile.css b/exercise-12/complete/friends/FriendProfile.css new file mode 100644 index 0000000..bfecd11 --- /dev/null +++ b/exercise-12/complete/friends/FriendProfile.css @@ -0,0 +1,9 @@ +.friendProfile { + display: flex; + flex-direction: column; + align-items: center; +} + +.friendProfile h3 { + margin-bottom: 0; +} \ No newline at end of file diff --git a/exercise-16/finished/friends/FriendProfile.js b/exercise-12/complete/friends/FriendProfile.js similarity index 100% rename from exercise-16/finished/friends/FriendProfile.js rename to exercise-12/complete/friends/FriendProfile.js diff --git a/exercise-12/complete/friends/Friends.entry.js b/exercise-12/complete/friends/Friends.entry.js new file mode 100644 index 0000000..df30e43 --- /dev/null +++ b/exercise-12/complete/friends/Friends.entry.js @@ -0,0 +1,10 @@ +import React from 'react'; + +import myFriends from '../data/friends'; + +import Friends from './Friends'; + +export default function FriendsEntry() { + return +} + diff --git a/exercise-16/finished/friends/Friends.js b/exercise-12/complete/friends/Friends.js similarity index 100% rename from exercise-16/finished/friends/Friends.js rename to exercise-12/complete/friends/Friends.js diff --git a/exercise-12/complete/shared/Card.css b/exercise-12/complete/shared/Card.css new file mode 100644 index 0000000..3265a74 --- /dev/null +++ b/exercise-12/complete/shared/Card.css @@ -0,0 +1,11 @@ +.card { + min-width: 150px; + background-color: var(--brand-light); + margin: 20px; + padding: 30px; + box-shadow: 0 1px 2px var(--brand-dark); +} + +.card:hover { + box-shadow: 0 2px 4px var(--brand-dark); +} diff --git a/exercise-12/complete/shared/Card.js b/exercise-12/complete/shared/Card.js new file mode 100644 index 0000000..930d1e9 --- /dev/null +++ b/exercise-12/complete/shared/Card.js @@ -0,0 +1,7 @@ +import React from 'react'; + +import styles from './Card.css'; + +export default function Card({ children }) { + return
{children}
; +} \ No newline at end of file diff --git a/exercise-12/complete/shared/Page.css b/exercise-12/complete/shared/Page.css new file mode 100644 index 0000000..0681578 --- /dev/null +++ b/exercise-12/complete/shared/Page.css @@ -0,0 +1,17 @@ +.page { + display: flex; + flex-direction: row; + justify-content: center; + background: repeating-linear-gradient(to top, var(--brand-light), var(--brand-dark)); + height: calc(100vh - 140px); +} + +.content{ + background-color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + height: calc(100vh - 140px); + width: 1000px; +} \ No newline at end of file diff --git a/exercise-12/complete/shared/Page.js b/exercise-12/complete/shared/Page.js new file mode 100644 index 0000000..d4623b2 --- /dev/null +++ b/exercise-12/complete/shared/Page.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import styles from './Page.css'; + +export default function Page({ children }) { + return ( +
+
{children}
+
+ ); +} diff --git a/exercise-12/friends/Friends.js b/exercise-12/friends/Friends.js index 1d5e7a4..70b880c 100644 --- a/exercise-12/friends/Friends.js +++ b/exercise-12/friends/Friends.js @@ -1,8 +1,7 @@ import React from 'react'; import Page from '../shared/Page'; -// import FriendProfile from './FriendProfile'; -import FriendProfile from './FriendProfile.finished'; +import FriendProfile from './FriendProfile'; export default function Friends({ friends }) { return ( diff --git a/exercise-12/index.js b/exercise-12/index.js index aaf4cce..563c948 100644 --- a/exercise-12/index.js +++ b/exercise-12/index.js @@ -2,7 +2,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; -import AppFinished from './App.finished'; -// ReactDOM.render(, document.getElementById('root')); -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/exercise-13/README.md b/exercise-13/README.md index 789f5b2..fdae0b8 100644 --- a/exercise-13/README.md +++ b/exercise-13/README.md @@ -142,3 +142,7 @@ At this stage, you've completed everything necessary to manage state in the `Fri When you browse the web app, you should not see any console errors. You should also be able to click on a specific friend to navigate to their detail page. From their detail page, you should be able to click the "Details" button, and see their information card flip over to show some details. If you are unable to do this, see if you can figure out why. Investigate any console errors, look at the example solutions, ask your neighbor for help, or raise your hand for help. + +### Extra Credit + +* Read about ["lifting up state" in React](https://reactjs.org/docs/lifting-state-up.html). diff --git a/exercise-13/complete/friend-detail/FriendFlipper.css b/exercise-13/complete/friend-detail/FriendFlipper.css new file mode 100644 index 0000000..da93169 --- /dev/null +++ b/exercise-13/complete/friend-detail/FriendFlipper.css @@ -0,0 +1,75 @@ +.flipWrapper, +.front, +.back { + width: 150px; + height: 150px; +} + +/* flip speed goes here */ + +.flipper { + position: relative; +} + +/* hide back of pane during swap */ + +.front, +.back { + backface-visibility: hidden; + position: absolute; + top: 0; + left: 0; + box-shadow: 0 1px 2px; +} + +.flipperNav { + background: var(--brand-dark); + border: none; + padding: 5px 10px; + color: white; + text-decoration: underline; + cursor: pointer; +} +.flipperNav:focus { + opacity: 0.8; + outline: none; +} +.frontContents .flipperNav { + position: absolute; + bottom: 5px; + right: 5px; +} +.backContents { + font-size: 0.8rem; + background-color: var(--brand-dark); + color: white; + text-align: left; + height: calc(100% - 10px); + padding: 5px; +} +.backContents .flipperNav { + position: absolute; + bottom: 5px; + left: 5px; +} +.backContents img { + position: absolute; + top: 0; + right: 0; + width: 70px; + height: 70px; +} +.backContents h3:first-child { + margin-top: 0; +} +.backContents h3 { + font-size: 1em; + margin-bottom: 5px; +} +.backContents ul { + margin: 5px 0; + padding-left: 25px; +} +.backContents h4 { + margin: 5px 0; +} \ No newline at end of file diff --git a/exercise-13/friend-detail/FriendFlipper.finished.js b/exercise-13/complete/friend-detail/FriendFlipper.js similarity index 100% rename from exercise-13/friend-detail/FriendFlipper.finished.js rename to exercise-13/complete/friend-detail/FriendFlipper.js diff --git a/exercise-13/friend-detail/FriendDetail.js b/exercise-13/friend-detail/FriendDetail.js index eb7e2c2..54fd449 100644 --- a/exercise-13/friend-detail/FriendDetail.js +++ b/exercise-13/friend-detail/FriendDetail.js @@ -2,7 +2,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import Page from '../shared/Page'; import Card from '../shared/Card'; -import FriendFlipper from './FriendFlipper.finished'; +import FriendFlipper from './FriendFlipper'; import styles from './FriendDetail.css'; diff --git a/exercise-15/App.js b/exercise-15/App.js index 05ae561..9f546f1 100644 --- a/exercise-15/App.js +++ b/exercise-15/App.js @@ -5,9 +5,6 @@ import { BrowserRouter, Route } from 'react-router-dom'; import Friends from './friends/Friends.entry'; import FriendDetail from './friend-detail/FriendDetail.entry'; -import FriendsFinished from './friends/Friends.entry.finished'; -import FriendDetailFinished from './friend-detail/FriendDetail.entry.finished'; - import styles from './App.css'; class App extends Component { @@ -20,8 +17,8 @@ class App extends Component {

Loading Data

- - + +
diff --git a/exercise-15/README.md b/exercise-15/README.md index 607c39a..a5095ed 100644 --- a/exercise-15/README.md +++ b/exercise-15/README.md @@ -145,3 +145,11 @@ If you get stuck, [see a possible solution here](./SOLUTIONS.md#frienddetailentr You should now have your friends loading from API endpoints throughout the app. You can verify this by making a change in `data/db.json`, and making sure the change is reflected in the app. You will need to refresh the app to see the change. + +### Extra Credit + +* Show a "loading" indicator when the friends array has not yet loaded on the Friends list page. + +* Read more about [state & lifecycle events](https://reactjs.org/docs/state-and-lifecycle.html). + +* Read about another use of React lifecycle events - [integrating with non-React libraries](https://reactjs.org/docs/integrating-with-other-libraries.html). \ No newline at end of file diff --git a/exercise-15/SOLUTIONS.md b/exercise-15/SOLUTIONS.md index d05ef31..07c9b04 100644 --- a/exercise-15/SOLUTIONS.md +++ b/exercise-15/SOLUTIONS.md @@ -89,7 +89,7 @@ export default class FriendDetailEntry extends React.Component { }; render() { - return ; + return ; } async componentDidMount() { diff --git a/exercise-15/complete/App.css b/exercise-15/complete/App.css new file mode 100644 index 0000000..5235594 --- /dev/null +++ b/exercise-15/complete/App.css @@ -0,0 +1,22 @@ +.app { + text-align: center; + + --brand-dark: teal; + --brand-light: mintcream; +} + +.appHeader { + background-color: var(--brand-dark); + height: 100px; + padding: 20px; + color: white; +} + +.emphasize { + text-decoration: underline; +} + +.appTitle { + font-family: 'Pacifico', cursive; + line-height: 0.5em; +} diff --git a/exercise-15/complete/App.js b/exercise-15/complete/App.js new file mode 100644 index 0000000..9f546f1 --- /dev/null +++ b/exercise-15/complete/App.js @@ -0,0 +1,29 @@ +import React, { Component } from 'react'; + +import { BrowserRouter, Route } from 'react-router-dom'; + +import Friends from './friends/Friends.entry'; +import FriendDetail from './friend-detail/FriendDetail.entry'; + +import styles from './App.css'; + +class App extends Component { + render() { + return ( + +
+
+

Exercise 15

+

Loading Data

+
+
+ + +
+
+ + ); + } +} + +export default App; \ No newline at end of file diff --git a/exercise-15/complete/data/db.json b/exercise-15/complete/data/db.json new file mode 100644 index 0000000..3a0c74a --- /dev/null +++ b/exercise-15/complete/data/db.json @@ -0,0 +1,35 @@ +{ + "friends": [ + { + "id": 1, + "name": "Potatoes", + "image": "http://placekitten.com/150/150?image=1", + "bio": "This soft little kitten loves to play in window sills, and snuggles like a champion.", + "colors": [ + "Gray", + "Black" + ] + }, + { + "id": 2, + "name": "Flower", + "image": "http://placekitten.com/150/150?image=12", + "bio": "This teensy little girl is a sweetheart. Her tiny baby sneezes will warm your heart.", + "colors": [ + "Gray", + "Black", + "White" + ] + }, + { + "id": 3, + "name": "Turtle", + "image": "http://placekitten.com/150/150?image=15", + "bio": "This old pal loves to leap for flying toy mice. Throw anything his way, and he'll impress you with some backflips.", + "colors": [ + "Gray", + "White" + ] + } + ] +} \ No newline at end of file diff --git a/exercise-15/complete/data/friends.js b/exercise-15/complete/data/friends.js new file mode 100644 index 0000000..7ba5db0 --- /dev/null +++ b/exercise-15/complete/data/friends.js @@ -0,0 +1,23 @@ +export default [ + { + id: 1, + name: 'Potatoes', + image: 'http://placekitten.com/150/150?image=1', + bio: 'This soft little kitten loves to play in window sills, and snuggles like a champion.', + colors: [ 'Gray', 'Black' ] + }, + { + id: 2, + name: 'Flower', + image: 'http://placekitten.com/150/150?image=12', + bio: 'This teensy little girl is a sweetheart. Her tiny baby sneezes will warm your heart.', + colors: [ 'Gray', 'Black', 'White' ] + }, + { + id: 3, + name: 'Turtle', + image: 'http://placekitten.com/150/150?image=15', + bio: 'This old pal loves to leap for flying toy mice. Throw anything his way, and he\'ll impress you with some backflips.', + colors: [ 'Gray', 'White' ] + }, +]; diff --git a/exercise-16/finished/friend-detail/FriendDetail.css b/exercise-15/complete/friend-detail/FriendDetail.css similarity index 100% rename from exercise-16/finished/friend-detail/FriendDetail.css rename to exercise-15/complete/friend-detail/FriendDetail.css diff --git a/exercise-15/friend-detail/FriendDetail.entry.finished.js b/exercise-15/complete/friend-detail/FriendDetail.entry.js similarity index 88% rename from exercise-15/friend-detail/FriendDetail.entry.finished.js rename to exercise-15/complete/friend-detail/FriendDetail.entry.js index a80ed62..c90c4e1 100644 --- a/exercise-15/friend-detail/FriendDetail.entry.finished.js +++ b/exercise-15/complete/friend-detail/FriendDetail.entry.js @@ -1,6 +1,6 @@ import React from 'react'; -import FriendDetailFinished from './FriendDetail.finished'; +import FriendDetailFinished from './FriendDetail'; import getFriendFromApi from './get-friend-from-api'; export default class FriendDetailEntry extends React.Component { diff --git a/exercise-15/friend-detail/FriendDetail.finished.js b/exercise-15/complete/friend-detail/FriendDetail.js similarity index 100% rename from exercise-15/friend-detail/FriendDetail.finished.js rename to exercise-15/complete/friend-detail/FriendDetail.js diff --git a/exercise-15/complete/friend-detail/FriendFlipper.css b/exercise-15/complete/friend-detail/FriendFlipper.css new file mode 100644 index 0000000..ffc1ad4 --- /dev/null +++ b/exercise-15/complete/friend-detail/FriendFlipper.css @@ -0,0 +1,78 @@ +.flipWrapper, +.front, +.back { + width: 150px; + height: 150px; +} + +/* flip speed goes here */ + +.flipper { + position: relative; + background-color: gray; +} + +/* hide back of pane during swap */ + +.front, +.back { + backface-visibility: hidden; + position: absolute; + top: 0; + left: 0; + box-shadow: 0 1px 2px; +} + +/* front pane, placed above back */ + +.flipperNav { + border: none; + padding: 5px 10px; + color: white; + text-decoration: underline; + cursor: pointer; + background: var(--brand-dark); +} +.flipperNav:focus { + opacity: 0.8; + outline: none; +} +.frontContents .flipperNav { + position: absolute; + bottom: 5px; + right: 5px; +} +.backContents { + font-size: 0.8rem; + color: white; + text-align: left; + height: calc(100% - 10px); + padding: 5px; + background: var(--brand-dark); +} +.backContents .flipperNav { + position: absolute; + bottom: 5px; + left: 5px; +} +.backContents img { + position: absolute; + top: 0; + right: 0; + width: 70px; + height: 70px; +} +.backContents h3:first-child { + margin-top: 0; +} +.backContents h3 { + font-size: 1em; + margin-bottom: 5px; +} +.backContents ul { + margin: 5px 0; + padding-left: 25px; +} +.backContents h4 { + margin: 5px 0; +} \ No newline at end of file diff --git a/exercise-15/complete/friend-detail/FriendFlipper.js b/exercise-15/complete/friend-detail/FriendFlipper.js new file mode 100644 index 0000000..8fd7568 --- /dev/null +++ b/exercise-15/complete/friend-detail/FriendFlipper.js @@ -0,0 +1,76 @@ +import React from 'react'; + +import styles from './FriendFlipper.css'; + +export default class FriendFlipper extends React.Component { + state = { + flipped: false, + }; + + handleFlipped = () => { + this.setState(prevProps => { + return { + flipped: !prevProps.flipped, + }; + }); + }; + + render() { + return ( +
+
+ {this.state.flipped ? null : this.renderFront()} + {!this.state.flipped ? null : this.renderBack()} +
+
+ ); + } + + renderFront() { + const { friend } = this.props; + return ( +
+
+ {friend.image} + +
+
+ ); + } + + renderBack() { + const { friend } = this.props; + return ( +
+
+ {friend.image} +
+

+ ID: + {friend.id} +

+

Colors:

+
    + {friend.colors.map(color => ( +
  • {color}
    • + ))} +
+
+ +
+
+ ); + } +} diff --git a/exercise-16/finished/friend-detail/get-friend-from-api.js b/exercise-15/complete/friend-detail/get-friend-from-api.js similarity index 100% rename from exercise-16/finished/friend-detail/get-friend-from-api.js rename to exercise-15/complete/friend-detail/get-friend-from-api.js diff --git a/exercise-15/complete/friends/FriendProfile.css b/exercise-15/complete/friends/FriendProfile.css new file mode 100644 index 0000000..bfecd11 --- /dev/null +++ b/exercise-15/complete/friends/FriendProfile.css @@ -0,0 +1,9 @@ +.friendProfile { + display: flex; + flex-direction: column; + align-items: center; +} + +.friendProfile h3 { + margin-bottom: 0; +} \ No newline at end of file diff --git a/exercise-12/friends/FriendProfile.finished.js b/exercise-15/complete/friends/FriendProfile.js similarity index 100% rename from exercise-12/friends/FriendProfile.finished.js rename to exercise-15/complete/friends/FriendProfile.js diff --git a/exercise-16/finished/friends/Friends.entry.js b/exercise-15/complete/friends/Friends.entry.js similarity index 100% rename from exercise-16/finished/friends/Friends.entry.js rename to exercise-15/complete/friends/Friends.entry.js diff --git a/exercise-15/complete/friends/Friends.js b/exercise-15/complete/friends/Friends.js new file mode 100644 index 0000000..70b880c --- /dev/null +++ b/exercise-15/complete/friends/Friends.js @@ -0,0 +1,19 @@ +import React from 'react'; + +import Page from '../shared/Page'; +import FriendProfile from './FriendProfile'; + +export default function Friends({ friends }) { + return ( + + {friends.map(friend => ( + + ))} + + ); +} \ No newline at end of file diff --git a/exercise-16/finished/friends/get-friends-from-api.js b/exercise-15/complete/friends/get-friends-from-api.js similarity index 100% rename from exercise-16/finished/friends/get-friends-from-api.js rename to exercise-15/complete/friends/get-friends-from-api.js diff --git a/exercise-15/complete/shared/Card.css b/exercise-15/complete/shared/Card.css new file mode 100644 index 0000000..3aa7162 --- /dev/null +++ b/exercise-15/complete/shared/Card.css @@ -0,0 +1,8 @@ +.card { + min-width: 150px; + background-color: var(--brand-light); + margin: 20px; + padding: 30px; + box-shadow: 0 1px 2px var(--brand-dark); +} + diff --git a/exercise-15/complete/shared/Card.js b/exercise-15/complete/shared/Card.js new file mode 100644 index 0000000..930d1e9 --- /dev/null +++ b/exercise-15/complete/shared/Card.js @@ -0,0 +1,7 @@ +import React from 'react'; + +import styles from './Card.css'; + +export default function Card({ children }) { + return
{children}
; +} \ No newline at end of file diff --git a/exercise-15/complete/shared/Page.css b/exercise-15/complete/shared/Page.css new file mode 100644 index 0000000..0681578 --- /dev/null +++ b/exercise-15/complete/shared/Page.css @@ -0,0 +1,17 @@ +.page { + display: flex; + flex-direction: row; + justify-content: center; + background: repeating-linear-gradient(to top, var(--brand-light), var(--brand-dark)); + height: calc(100vh - 140px); +} + +.content{ + background-color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + height: calc(100vh - 140px); + width: 1000px; +} \ No newline at end of file diff --git a/exercise-15/complete/shared/Page.js b/exercise-15/complete/shared/Page.js new file mode 100644 index 0000000..d4623b2 --- /dev/null +++ b/exercise-15/complete/shared/Page.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import styles from './Page.css'; + +export default function Page({ children }) { + return ( +
+
{children}
+
+ ); +} diff --git a/exercise-15/index.js b/exercise-15/index.js index 395b749..33da5f9 100644 --- a/exercise-15/index.js +++ b/exercise-15/index.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './App'; +import App from './complete/App'; ReactDOM.render(, document.getElementById('root')); diff --git a/exercise-16/README.md b/exercise-16/README.md index b4d4c70..e83547d 100644 --- a/exercise-16/README.md +++ b/exercise-16/README.md @@ -239,3 +239,7 @@ If you get stuck, [see a possible solution here](./SOLUTIONS.md#friendflipper-co At this point your entire app should change from green to purple and vice versa when the "Change Theme" button is clicked. If this doesn't happen, re-read the instructions above thoroughly. If you can't figure out what you missed, ask your neighbor, or raise your hand. + +### Extra Credit + +[Read about React Context vs Redux](https://daveceddia.com/context-api-vs-redux/). \ No newline at end of file diff --git a/exercise-16/finished/App.css b/exercise-16/complete/App.css similarity index 100% rename from exercise-16/finished/App.css rename to exercise-16/complete/App.css diff --git a/exercise-16/finished/App.js b/exercise-16/complete/App.js similarity index 100% rename from exercise-16/finished/App.js rename to exercise-16/complete/App.js diff --git a/exercise-16/finished/Header.css b/exercise-16/complete/Header.css similarity index 100% rename from exercise-16/finished/Header.css rename to exercise-16/complete/Header.css diff --git a/exercise-16/finished/Header.js b/exercise-16/complete/Header.js similarity index 100% rename from exercise-16/finished/Header.js rename to exercise-16/complete/Header.js diff --git a/exercise-16/complete/friend-detail/FriendDetail.css b/exercise-16/complete/friend-detail/FriendDetail.css new file mode 100644 index 0000000..1eac493 --- /dev/null +++ b/exercise-16/complete/friend-detail/FriendDetail.css @@ -0,0 +1,13 @@ +.friendDetail { + width: 50%; +} + +.cardContents { + display: flex; + flex-direction: column; + align-items: center; +} + +.toolbar { + margin: 1em 0; +} \ No newline at end of file diff --git a/exercise-16/finished/friend-detail/FriendDetail.entry.js b/exercise-16/complete/friend-detail/FriendDetail.entry.js similarity index 100% rename from exercise-16/finished/friend-detail/FriendDetail.entry.js rename to exercise-16/complete/friend-detail/FriendDetail.entry.js diff --git a/exercise-16/finished/friend-detail/FriendDetail.js b/exercise-16/complete/friend-detail/FriendDetail.js similarity index 100% rename from exercise-16/finished/friend-detail/FriendDetail.js rename to exercise-16/complete/friend-detail/FriendDetail.js diff --git a/exercise-16/finished/friend-detail/FriendFlipper.css b/exercise-16/complete/friend-detail/FriendFlipper.css similarity index 100% rename from exercise-16/finished/friend-detail/FriendFlipper.css rename to exercise-16/complete/friend-detail/FriendFlipper.css diff --git a/exercise-16/finished/friend-detail/FriendFlipper.js b/exercise-16/complete/friend-detail/FriendFlipper.js similarity index 100% rename from exercise-16/finished/friend-detail/FriendFlipper.js rename to exercise-16/complete/friend-detail/FriendFlipper.js diff --git a/exercise-16/complete/friend-detail/get-friend-from-api.js b/exercise-16/complete/friend-detail/get-friend-from-api.js new file mode 100644 index 0000000..1c2c57d --- /dev/null +++ b/exercise-16/complete/friend-detail/get-friend-from-api.js @@ -0,0 +1,7 @@ +import axios from 'axios'; + +export default async function(friendId) { + const response = await axios.get(`/api/friends/${friendId}`); + + return response.data; +} \ No newline at end of file diff --git a/exercise-16/complete/friends/FriendProfile.css b/exercise-16/complete/friends/FriendProfile.css new file mode 100644 index 0000000..bfecd11 --- /dev/null +++ b/exercise-16/complete/friends/FriendProfile.css @@ -0,0 +1,9 @@ +.friendProfile { + display: flex; + flex-direction: column; + align-items: center; +} + +.friendProfile h3 { + margin-bottom: 0; +} \ No newline at end of file diff --git a/exercise-16/complete/friends/FriendProfile.js b/exercise-16/complete/friends/FriendProfile.js new file mode 100644 index 0000000..d1e9a84 --- /dev/null +++ b/exercise-16/complete/friends/FriendProfile.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import Card from '../shared/Card'; + +import styles from './FriendProfile.css'; + +export default function FriendProfile({ id, name, image }) { + return ( + + +
+ {name} +

{name}

+
+ + + ); +} diff --git a/exercise-15/friends/Friends.entry.finished.js b/exercise-16/complete/friends/Friends.entry.js similarity index 100% rename from exercise-15/friends/Friends.entry.finished.js rename to exercise-16/complete/friends/Friends.entry.js diff --git a/exercise-16/complete/friends/Friends.js b/exercise-16/complete/friends/Friends.js new file mode 100644 index 0000000..70b880c --- /dev/null +++ b/exercise-16/complete/friends/Friends.js @@ -0,0 +1,19 @@ +import React from 'react'; + +import Page from '../shared/Page'; +import FriendProfile from './FriendProfile'; + +export default function Friends({ friends }) { + return ( + + {friends.map(friend => ( + + ))} + + ); +} \ No newline at end of file diff --git a/exercise-16/complete/friends/get-friends-from-api.js b/exercise-16/complete/friends/get-friends-from-api.js new file mode 100644 index 0000000..e387e07 --- /dev/null +++ b/exercise-16/complete/friends/get-friends-from-api.js @@ -0,0 +1,7 @@ +import axios from 'axios'; + +export default async function() { + const response = await axios.get('/api/friends'); + + return response.data; +} \ No newline at end of file diff --git a/exercise-16/finished/shared/Card.css b/exercise-16/complete/shared/Card.css similarity index 100% rename from exercise-16/finished/shared/Card.css rename to exercise-16/complete/shared/Card.css diff --git a/exercise-16/finished/shared/Card.js b/exercise-16/complete/shared/Card.js similarity index 100% rename from exercise-16/finished/shared/Card.js rename to exercise-16/complete/shared/Card.js diff --git a/exercise-16/finished/shared/Page.css b/exercise-16/complete/shared/Page.css similarity index 100% rename from exercise-16/finished/shared/Page.css rename to exercise-16/complete/shared/Page.css diff --git a/exercise-16/finished/shared/Page.js b/exercise-16/complete/shared/Page.js similarity index 100% rename from exercise-16/finished/shared/Page.js rename to exercise-16/complete/shared/Page.js diff --git a/exercise-16/finished/theme/Provider.js b/exercise-16/complete/theme/Provider.js similarity index 100% rename from exercise-16/finished/theme/Provider.js rename to exercise-16/complete/theme/Provider.js diff --git a/exercise-16/finished/theme/Switcher.css b/exercise-16/complete/theme/Switcher.css similarity index 100% rename from exercise-16/finished/theme/Switcher.css rename to exercise-16/complete/theme/Switcher.css diff --git a/exercise-16/finished/theme/Switcher.js b/exercise-16/complete/theme/Switcher.js similarity index 100% rename from exercise-16/finished/theme/Switcher.js rename to exercise-16/complete/theme/Switcher.js diff --git a/exercise-16/finished/theme/context.js b/exercise-16/complete/theme/context.js similarity index 100% rename from exercise-16/finished/theme/context.js rename to exercise-16/complete/theme/context.js diff --git a/exercise-16/finished/theme/static.js b/exercise-16/complete/theme/static.js similarity index 100% rename from exercise-16/finished/theme/static.js rename to exercise-16/complete/theme/static.js diff --git a/exercise-16/index.js b/exercise-16/index.js index 248ffd5..395b749 100644 --- a/exercise-16/index.js +++ b/exercise-16/index.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './finished/App'; +import App from './App'; ReactDOM.render(, document.getElementById('root')); diff --git a/exercise-17/complete/friend-detail/FriendDetail.spec.js b/exercise-17/complete/friend-detail/FriendDetail.spec.js new file mode 100644 index 0000000..9c959e8 --- /dev/null +++ b/exercise-17/complete/friend-detail/FriendDetail.spec.js @@ -0,0 +1,45 @@ +import React from 'react'; + +import { MemoryRouter } from 'react-router-dom'; +import ThemeProvider from '../../theme/Provider'; + +import { render } from 'react-testing-library'; + +import FriendDetail from '../../friend-detail/FriendDetail'; + +describe('./friend-detail/FriendDetail', () => { + it('COMPLETED TEST!!! renders loading if friend isn`t loaded yet', () => { + const friend = undefined; + + const context = render( + + + + + + ); + + expect(context.queryByText('Loading...')).not.toBeNull(); + }); + + it('COMPLETED TEST!!! renders a friend if friend is loaded', () => { + const friend = { + name: 'Mr. Smidgens', + colors: ['brown'], + bio: + "This little guy likes a bowl of milk at bedtime. Scratch his belly and he'll be your best friend.", + }; + + const context = render( + + + + + + ); + + expect(context.queryByText('Mr. Smidgens')).not.toBeNull(); + expect(context.queryByText('This little guy likes a bowl of milk at bedtime. Scratch his belly and he\'ll be your best friend.')).not.toBeNull(); + + }); +}); diff --git a/exercise-17/friend-detail/FriendDetail.spec.js b/exercise-17/friend-detail/FriendDetail.spec.js index 16c5f5e..7347730 100644 --- a/exercise-17/friend-detail/FriendDetail.spec.js +++ b/exercise-17/friend-detail/FriendDetail.spec.js @@ -24,41 +24,4 @@ describe('./friend-detail/FriendDetail', () => { // assert }); - - // FINISHED - - - it('renders loading if friend isn`t loaded yet', () => { - const friend = undefined; - - const context = render( - - - - - - ); - - expect(context.queryByText('Loading...')).not.toBeNull(); - }); - - it('renders a friend if friend is loaded', () => { - const friend = { - name: 'Mr. Smidgens', - colors: ['brown'], - bio: - "This little guy likes a bowl of milk at bedtime. Scratch his belly and he'll be your best friend.", - }; - - const context = render( - - - - - - ); - - expect(context.queryByText('Mr. Smidgens')).not.toBeNull(); - expect(context.queryByText('This little guy likes a bowl of milk at bedtime. Scratch his belly and he\'ll be your best friend.')).not.toBeNull(); - - }); }); diff --git a/exercise-18/README.md b/exercise-18/README.md index 60b2b58..c304dd3 100644 --- a/exercise-18/README.md +++ b/exercise-18/README.md @@ -175,3 +175,9 @@ If you get stuck, [see a possible solution here](./SOLUTIONS.md#back-assert). 👉 Check your console. You should see output that indicates your tests are passing. [The complete test can be seen here.](./SOLUTIONS.md#back-complete-test) + +### Extra Credit + +* Read about [the guiding principles behind react-testing-library](https://github.com/kentcdodds/react-testing-library#guiding-principles). + +* Read [an article I wrote](https://medium.com/@pepopowitz/chekhovs-gun-and-better-unit-tests-96fb439e6d0e), about what we can learn about testing from a long-dead Russian playwright. diff --git a/exercise-18/complete/friend-detail/FriendFlipper.js b/exercise-18/complete/friend-detail/FriendFlipper.js new file mode 100644 index 0000000..e5ba5cb --- /dev/null +++ b/exercise-18/complete/friend-detail/FriendFlipper.js @@ -0,0 +1,89 @@ +import React from 'react'; +import classNames from 'classnames'; +import ThemeContext from '../../theme/context'; + +import styles from './FriendFlipper.css'; + +export default class FriendFlipper extends React.Component { + state = { + flipped: false, + }; + + handleFlipped = () => { + this.setState(prevProps => { + return { + flipped: !prevProps.flipped, + }; + }); + }; + + render() { + return ( +
+
+ {this.state.flipped ? null : this.renderFront()} + {!this.state.flipped ? null : this.renderBack()} +
+
+ ); + } + + renderFront() { + const { friend } = this.props; + return ( + + {({ theme }) => ( +
+
+ {friend.image} + +
+
+ )} + + ); + } + + renderBack() { + const { friend } = this.props; + return ( + + {({ theme }) => ( +
+
+ {friend.image} +
+

+ ID: + {friend.id} +

+

Colors:

+
    + {friend.colors.map(color => ( +
  • {color}
    • + ))} +
+
+ +
+
+ )} + + ); + } +} diff --git a/exercise-18/complete/friend-detail/FriendFlipper.spec.js b/exercise-18/complete/friend-detail/FriendFlipper.spec.js new file mode 100644 index 0000000..8f99d95 --- /dev/null +++ b/exercise-18/complete/friend-detail/FriendFlipper.spec.js @@ -0,0 +1,57 @@ +import React from 'react'; +import { render, fireEvent } from 'react-testing-library'; +import { MemoryRouter } from 'react-router-dom'; +import ThemeProvider from '../../theme/Provider'; + +import FriendFlipper from './FriendFlipper'; + +describe('./friend-detail/FriendFlipper', () => { + it('defaults to the front side', () => { + const friend = { + name: 'Mr. Smidgens', + colors: ['brown'], + bio: + "This little guy likes a bowl of milk at bedtime. Scratch his belly and he'll be your best friend.", + }; + + const context = render( + + + + + + ); + + // things from the front side SHOULD be there + expect(context.queryByTestId('front')).not.toBeNull(); + + // things from the back side SHOULD NOT be there + expect(context.queryByTestId('back')).toBeNull(); + }); + + + it('flips to the back side after a button click', () => { + const friend = { + name: 'Mr. Smidgens', + colors: ['brown'], + bio: + "This little guy likes a bowl of milk at bedtime. Scratch his belly and he'll be your best friend.", + }; + + const context = render( + + + + + + ); + + fireEvent.click(context.getByText('Details >')); + + // things from the front side SHOULD NOT be there + expect(context.queryByTestId('front')).toBeNull(); + + // things from the back side SHOULD be there + expect(context.queryByTestId('back')).not.toBeNull(); + }); +}); diff --git a/exercise-18/friend-detail/FriendFlipper.js b/exercise-18/friend-detail/FriendFlipper.js index a5ac445..1e4d247 100644 --- a/exercise-18/friend-detail/FriendFlipper.js +++ b/exercise-18/friend-detail/FriendFlipper.js @@ -34,7 +34,7 @@ export default class FriendFlipper extends React.Component { {({ theme }) => (
-
+
{friend.image}
); diff --git a/exercise-9/README.md b/exercise-9/README.md index 9c2dd97..c20856b 100644 --- a/exercise-9/README.md +++ b/exercise-9/README.md @@ -87,3 +87,9 @@ index.js:2178 Warning: Failed prop type: The prop `image` is marked as required ``` If you get stuck, [see a possible solution here](./SOLUTIONS.md#removed-property). + +### Extra Credit + +* Read about [other the different types you can validate with PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html). + +* Read about [static typechecking, and why it might be better than using PropTypes](https://reactjs.org/docs/static-type-checking.html). \ No newline at end of file diff --git a/exercise-9/ExerciseFinished.js b/exercise-9/complete/Exercise.js similarity index 100% rename from exercise-9/ExerciseFinished.js rename to exercise-9/complete/Exercise.js diff --git a/module-0/README.md b/module-0/README.md deleted file mode 100644 index cf13e6b..0000000 --- a/module-0/README.md +++ /dev/null @@ -1,40 +0,0 @@ -tooling concepts: - npm - package.json - webpack - create-react-app - - -high-level es-modern concepts: - -fat arrow functions // A -import/export - import default // B - export default // C - import named // D - export named // E - import npm dependencies // F - - -class syntax (extends REact.component) - class definition // G - usage of a class // H - extends // I - class properties // J - instance methods // K - class props - event handlers // L - - -working with variables - template literals // M - ternary // N - object destructuring // O - arrays - array.map // P - array.filter // Q - - -spread // do we need this???? -rest //do we need this???? - -const/let? diff --git a/module-0/exercise-1/README.md b/module-0/exercise-1/README.md deleted file mode 100644 index 32e8fe6..0000000 --- a/module-0/exercise-1/README.md +++ /dev/null @@ -1,16 +0,0 @@ - - -0. Get your test suite running - a. npm run test-module-1 - b. You should see this test output (show) -1. Write a test of our `add` function. - a. Uncomment the test (in ./add.spec.js) (A!) - b. Import the `add` function (as a default import) (B!) - c. Mark the `add` function as a default export (C!) -2. Write a test of our `addThree` function. - a. Uncomment the test in ./add.spec.js (A!) - b. Import the `addThree` function (as a named import) (D!) - c. Mark the `addThree` function as a named export (E!) -3. Show an import from npm (F!) - - diff --git a/module-0/exercise-1/add.js b/module-0/exercise-1/add.js deleted file mode 100644 index 1c8c48e..0000000 --- a/module-0/exercise-1/add.js +++ /dev/null @@ -1,7 +0,0 @@ -function add(a, b) { - return a+b; -} - -function addThree(a) { - return add(a, 3); -} diff --git a/module-0/exercise-1/add.spec.js b/module-0/exercise-1/add.spec.js deleted file mode 100644 index af8f016..0000000 --- a/module-0/exercise-1/add.spec.js +++ /dev/null @@ -1,15 +0,0 @@ -// 1: Uncomment the next 5 lines to test the `add` function -// it('adds two numbers', function() { -// const result = add(1, 4); - -// expect(result).toEqual(5); -// }); - - - -// 2: Uncomment the next 5 lines to test the `addThree` function -// it('adds 3 to something', () => { -// const result = addThree(5); - -// expect(result).toEqual(8); -// }); diff --git a/module-0/exercise-2/README.md b/module-0/exercise-2/README.md deleted file mode 100644 index d0a1230..0000000 --- a/module-0/exercise-2/README.md +++ /dev/null @@ -1,27 +0,0 @@ -0. Get your test suite running - a. npm run test-module-1 - b. You should see this test output (show) -1. Test - "it is a thing" - a. Uncomment the first test - b. Test should pass! - c. Talk about declaration (G! class definition) - d. Talk about instantiation (H! class usage) -2. Test - "it inherits base properties" - a. Uncomment the test - b. Test should fail - c. Add thingOneProperty to ThingOne (J! class properties) - d. Add thingTwoProperty to ThingTwo - e. Test still fails - f. ThingTwo extends ThingOne (I! extends) - g. Tricky differences - prototypal inheritance (interview question) -3. Test - "it adds it up" (K! instance methods) - a. Uncomment the test - b. Test should fail - c. Write instance method additup() - d. talk about "this". -4. Test - "it subtracts" (L! class props/event handlers) - a. Uncomment the test - b. Test should fail - c. Write instance method subtractIt - d. Convert to class property/fat arrow - e. Right now, not much difference in "this", but when we get to event handling in React, we'll see some differences. diff --git a/module-0/exercise-2/things.js b/module-0/exercise-2/things.js deleted file mode 100644 index f5764a6..0000000 --- a/module-0/exercise-2/things.js +++ /dev/null @@ -1,13 +0,0 @@ -// a class in ES is not like you'd think of a class in C# or Java. -// It is "syntactical sugar" - this class gets turned into a normal ES object. -// We won't talk much about the differences between this and C#/Java. -// For now, know that this thing will mostly act like you'd expect -// an OOP class to act in your code. - -export class ThingOne { - -} - -export class ThingTwo { - -} diff --git a/module-0/exercise-2/things.spec.js b/module-0/exercise-2/things.spec.js deleted file mode 100644 index 24d22e2..0000000 --- a/module-0/exercise-2/things.spec.js +++ /dev/null @@ -1,35 +0,0 @@ -import { ThingOne, ThingTwo } from './things'; - -// 1: Uncomment the next 8 lines for test 1. -// it('is a thing', () => { -// // To "instantiate" a class, call `new ClassName()`. -// // We won't be doing very much of this, if any. -// // React will take care of this for us, behind the scenes. -// const thing = new ThingOne(); - -// expect(thing).not.toBeUndefined(); -// }) - - - - -// 2: Uncomment the next 8 for test 2. -// it('inherits base properties', () => { -// const thingTwo = new ThingTwo(); - -// // Since ThingOne extends Thing, we get both properties -// // on our instance of thingOne. -// expect(thingTwo.thingTwoProperty).toEqual(2); -// expect(thingTwo.thingOneProperty).toEqual(1); -// }) - - - - -// 3: Uncomment the next 6 lines for test 3. -// it('adds it up', () => { -// const thingTwo = new ThingTwo(); - -// // Here we're calling an instance method. -// expect(thingTwo.addItUp()).toEqual(3); -// }); diff --git a/module-0/exercise-3/README.md b/module-0/exercise-3/README.md deleted file mode 100644 index c24ba22..0000000 --- a/module-0/exercise-3/README.md +++ /dev/null @@ -1,29 +0,0 @@ -0. Get your test suite running - a. npm run test-module-1 - b. You should see this test output (show) -1. Test - "it builds a greeting" (M! template literals) - a. Uncomment test - b. Test fails! - c. Write with concatenation - d. Write with string template literal -2. Test - "it chooses a parting word" (N! ternary) - a. Uncomment test - b. Test fails! - c. Write with if statement - d. Write with ternary -3. Test - "it chooses a parting word with destructuring" (O! destructuring) - a. Uncomment test - b. Test fails! - c. Write with manual property assignment - d. Write with destructuring in the body - e. Write with destructuring in arguments -4. Test - "it maps parting words" (P! array.map) - a. Uncomment test - b. Test fails! - c. Write with looping - d. Write with array.map -5. Test - "it removes unknown languages" (Q! array.filter) - a. Uncomment test - b. Test fails! - c. Write with looping - d. Write with array.filter diff --git a/module-0/exercise-3/greetings.js b/module-0/exercise-3/greetings.js deleted file mode 100644 index 74697ed..0000000 --- a/module-0/exercise-3/greetings.js +++ /dev/null @@ -1,15 +0,0 @@ - -export function buildGreeting(name) { -} - -export function choosePartingWord(language) { -} - -export function choosePartingWordFromObject(data) { -} - -export function mapPartingWords(languages) { -} - -export function removeUnknownLanguages(languages) { -} diff --git a/module-0/exercise-3/greetings.spec.js b/module-0/exercise-3/greetings.spec.js deleted file mode 100644 index bacfad9..0000000 --- a/module-0/exercise-3/greetings.spec.js +++ /dev/null @@ -1,84 +0,0 @@ -import { - buildGreeting, - choosePartingWord, - choosePartingWordFromObject, - mapPartingWords, - removeUnknownLanguages, -} from './greetings'; - -// 1: Uncomment the next 6 lines for test 1. -// // Calling a function that is using string template literals. -// it('builds a greeting', () => { -// const greeting = buildGreeting('Matt'); - -// expect(greeting).toEqual('Hello, Matt! How are you?'); -// }); - - - -// 2: Uncomment the next 6 lines for test 2. -// // Calling a function that is making a decision with a ternary expression. -// it('chooses a parting word', () => { -// expect(choosePartingWord('Spanish')).toEqual('Adios!'); - -// expect(choosePartingWord('English')).toEqual('Goodbye!'); -// }); - - - - -// 3: Uncomment the next 11 lines for test 3. -// // We're calling a function that is destructuring an object we pass in. -// // Object destructuring is useful when you're passing JS objects as arguments to functions. -// it('chooses a parting word from an object', () => { -// const context = { -// name: 'Steve', -// language: 'English', -// age: 41, -// }; - -// expect(choosePartingWordFromObject(context)).toEqual('Goodbye, Steve!'); -// }); - - - -// 4: Uncomment the next 19 lines for test 4. -// // We're calling a function that takes an array, and returns a new array with each value modified. -// // (This is called "mapping" an array) -// it('maps to parting words', () => { -// const languages = [ -// 'Spanish', -// 'English', -// 'English', -// 'Spanish' -// ]; - -// const partingWords = mapPartingWords(languages); - -// expect(partingWords).toEqual([ -// 'Adios!', -// 'Goodbye!', -// 'Goodbye!', -// 'Adios!', -// ]) -// }); - - - -// 5: Uncomment the next 16 lines for test 5. -// // Calling a function that takes an array, but only returns some values, based on a condition. -// it('filters languages', () => { -// const languages = [ -// 'Spanish', -// 'English', -// 'German', -// 'French' -// ]; - -// const result = removeUnknownLanguages(languages); - -// expect(result).toEqual([ -// 'Spanish', -// 'English' -// ]); -// }); diff --git a/module-0/jest.config.js b/module-0/jest.config.js deleted file mode 100644 index f57c51a..0000000 --- a/module-0/jest.config.js +++ /dev/null @@ -1,30 +0,0 @@ -module.exports = { - rootDir: '../', - collectCoverageFrom: ['/module-0/**/*.{js,jsx,mjs}'], - setupFiles: ['/_not_important/config/polyfills.js'], - testMatch: [ - '/module-0/**/__tests__/**/*.{js,jsx,mjs}', - '/module-0/**/?(*.)(spec|test).{js,jsx,mjs}', - ], - testEnvironment: 'node', - testURL: 'http://localhost', - transform: { - '^.+\\.(js|jsx|mjs)$': '/node_modules/babel-jest', - '^.+\\.css$': '/_not_important/config/jest/cssTransform.js', - '^(?!.*\\.(js|jsx|mjs|css|json)$)': - '/_not_important/config/jest/fileTransform.js', - }, - transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$'], - moduleNameMapper: { - '^react-native$': 'react-native-web', - }, - moduleFileExtensions: [ - 'web.js', - 'js', - 'json', - 'web.jsx', - 'jsx', - 'node', - 'mjs', - ], -};