move solutions to /complete folders, & add extra credit

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.

_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

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() {

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;
+}

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 (
+      <div className="App">
+        <header className="App-header">
+          <h1 className="App-title">Exercise 10</h1>
+          <h2 className="sub-title">Component CSS Files</h2>
+        </header>
+        <div className="exercise">
+          <Exercise />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;

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;
+}

exercise-10/complete/Card.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import './Card.css';
+
+export default function Card({ children }) {
+  return <div className="card">{children}</div>;
+}

exercise-10/complete/Exercise.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Friends from './Friends';
+
+export default function Exercise() {
+  return <Friends friends={myFriends} />
+}
+
+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',
+  },
+];

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;
+}

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 (
+    <Card>
+      <div className="friend-profile">
+        <img src={image} alt={name} />
+        <h3>{name}</h3>
+      </div>
+    </Card>
+  );
+}

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 (
+    <Page>
+      {friends.map(friend => (
+        <FriendProfile
+          key={friend.id}
+          name={friend.name}
+          image={friend.image}
+        />
+      ))}
+    </Page>
+  );
+}

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;
+}

exercise-10/complete/Page.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import './Page.css';
+
+export default function Page({ children }) {
+  return (
+    <div className="page">
+      <div className="content">{children}</div>
+    </div>
+  );
+}

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).

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;
+}

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 (
+      <div className={styles.app}>
+        <header className={styles.appHeader}>
+          <h1 className={styles.appTitle}>Exercise 11</h1>
+          <h2 className={classNames(styles.subTitle, styles.emphasize)}>CSS Modules</h2>
+        </header>
+        <div className={styles.exercise}>
+          <Exercise />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;

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);
+}

exercise-11/complete/Card.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import styles from './Card.css';
+
+export default function Card({ children }) {
+  return <div className={styles.card}>{children}</div>;
+}