JB-Walker · JB-Walker · Sep 7, 2017 · Sep 7, 2017 · Sep 11, 2017
diff --git a/05week/index.html b/05week/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+</body>
+<script src='spaceTravelToMars.js'></script>
+</html>
diff --git a/05week/spaceTravelToMars.js b/05week/spaceTravelToMars.js
@@ -1,32 +1,44 @@
 'use strict';
 
+// this Job-Type array provided for future development, but not used during
+// the current testing.
 let jobTypes = {
   pilot: 'MAV',
   mechanic: 'Repair Ship',
   commander: 'Main Ship',
   programmer: 'Any Ship!'
 };
 
+// This class is a CrewMember, who has a Name, performs a Job aboard a Ship,
+// has a Special Skill, and may be assigned to a Ship via the enterShip method.
 class CrewMember {
   constructor (name, job, specialSkill, ship) {
     this.name = name;
     this.job = job;
     this.specialSkill = specialSkill;
     this.ship = null;
   }
+  // This method 1) adds the crewMember to the Crew of the assigned Ship, and
+  // 2) adds the Name of the assigned Ship to the crewMember object.
   enterShip (assignedShip) {
     assignedShip.crew.push(this);
-    this.assignedShip = assignedShip;
+    this.ship = assignedShip;
   }
 }
 
+// This class creates a Ship object, which has a Name, a Type, an Ability,
+// and a Crew array. The ability is a string which describes its mission.
+// In order to perform its ability, the ship must have a crew of at least one.
 class Ship {
   constructor (name, type, ability) {
     this.name = name;
     this.type = type;
     this.ability = ability;
     this.crew = [];
   }
+  // If the ship is currently manned by at least one crewMember, this method
+  // will return its mission. Otherwise it will return a text string indicating
+  // that the ship is currently unable to perform its mission.
   missionStatement () {
     if (this.crew.length === 0) {
       return `Can't perform a mission yet.`;
@@ -35,6 +47,24 @@ class Ship {
   }
 }
 
+
+/***** MY TESTS USING HTML PAGE
+var crewMember1 = new CrewMember('Rick Martinez', 'pilot', 'chemistry');
+console.log("crewMember1.name, 'Rick Martinez' ||| crewMember1.job, 'pilot' ||| crewMember1.specialSkill, 'chemistry' ||| crewMember1.ship, null");
+let mav = new Ship('Mars Ascent Vehicle', 'MAV', 'Ascend into low orbit');
+crewMember1.enterShip(mav);
+console.log("crewMember1.ship, mav ||| mav.crew.length, 1 ||| mav.crew[0], crewMember1");
+console.log("mav.name, 'Mars Ascent Vehicle' ||| mav.type, 'MAV' ||| mav.ability, 'Ascend into low orbit' |||  mav.crew.length, 0");
+let hermes = new Ship('Hermes', 'Main Ship', 'Interplanetary Space Travel');
+let crewMember2 = new CrewMember('Commander Lewis', 'commander', 'geology');
+console.log("mav.missionStatement(), Can't perform a mission yet. ||| hermes.missionStatement(), Can't perform a mission yet.");
+console.log("mav.missionStatement(), Ascend into low orbit");
+crewMember2.enterShip(hermes);
+console.log("hermes.missionStatement(), Interplanetary Space Travel");
+*********/
+
+
+
 //tests
 let assert = require('assert');
 

diff --git a/08week/my-app/src/App.js b/08week/my-app/src/App.js
diff --git a/08week/my-app/src/logo.svg b/08week/my-app/src/logo.svg
diff --git a/08week/simpleStarWars/app.css b/08week/simpleStarWars/app.css
@@ -0,0 +1,54 @@
+.app {
+  text-align: center;
+  background-color: black;
+  width: 500px;
+}
+
+#title {
+  background-color: black;
+  height: 20px;
+  padding: 30px;
+  color: blue;
+}
+
+.name {
+  height: 35px;
+  width: 150px;
+  color: white;
+  background-color: blue;
+}
+
+.spacer {
+  height: 35px;
+  width: 60px;
+  color: black;
+  background-color: black;
+}
+
+.gender {
+  height: 35px;
+  width: 50px;
+  color: white;
+  background-color: blue;
+}
+
+.hair {
+  height: 35px;
+  width: 50px;
+  color: white;
+  background-color: blue;
+}
+
+.eyes {
+  height: 35px;
+  width: 50px;
+  color: white;
+  background-color: blue;
+}
+
+.year {
+  height: 35px;
+  width: 50px;
+  color: white;
+  background-color: blue;
+}
diff --git a/08week/simpleStarWars/app.js b/08week/simpleStarWars/app.js
@@ -0,0 +1,56 @@
+'use strict';
+
+class StarWars extends React.Component {
+  constructor (props) {
+    super(props);
+    this.resetState = {
+      characters: [],
+    }
+    this.state = {...this.resetState};
+  }
+
+  componentDidMount () {
+    fetch('https://swapi.co/api/people/')
+      .then((response) => response.json())
+      .then((responseJson) => {
+        return this.setState({characters: responseJson.results});
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
+
+  renderCharacterData () {
+    if (this.state.characters) {
+      return this.state.characters.map((character, index) => {
+        return (
+          <tr key={`Row-${index}`}>
+            <td key={`Name-${index}`} data-characterName={character.name} className='name'>{character.name}</td>
+            <td key={`Spacer-${index}`} data-characterName={character.name} className='spacer'>.</td>
+            <td key={`Gender-${index}`} data-characterName={character.name} className='gender'>{character.gender}</td>
+            <td key={`Eyes-${index}`} data-characterName={character.name} className='eyes'>{character.hair_color}</td>
+            <td key={`Hair-${index}`} data-characterName={character.name} className='hair'>{character.eye_color}</td>
+            <td key={`year-${index}`} data-characterName={character.name} className='year'>{character.birth_year}</td>
+          </tr>
+        );
+      });
+    }
+  }
+
+  render () {
+    return (
+      <div className='app'>
+        <h2 id='title'>Star Wars Trivia Matchup</h2>
+        <table>
+          <tbody>
+            {this.renderCharacterData()}
+          </tbody>
+        </table>
+
+      </div>
+    );
+  }
+}
+
+
+ReactDOM.render(<StarWars />, document.getElementById('game'));
diff --git a/08week/simpleStarWars/index.html b/08week/simpleStarWars/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Star Wars Trivia Game</title>
+  <link rel="stylesheet" href="app.css" />
+</head>
+<body>
+  <div id="game"></div>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>
+  <script type="text/babel" src="app.js"></script>
+</body>
+</html>
diff --git a/08week/my-app/.gitignore → 08week/starWars-app/.gitignore b/08week/my-app/.gitignore → 08week/starWars-app/.gitignore
diff --git a/08week/my-app/README.md → 08week/starWars-app/README.md b/08week/my-app/README.md → 08week/starWars-app/README.md
diff --git a/08week/my-app/package-lock.json → 08week/starWars-app/package-lock.json b/08week/my-app/package-lock.json → 08week/starWars-app/package-lock.json
diff --git a/08week/my-app/package.json → 08week/starWars-app/package.json b/08week/my-app/package.json → 08week/starWars-app/package.json
diff --git a/08week/my-app/public/favicon.ico → 08week/starWars-app/public/favicon.ico b/08week/my-app/public/favicon.ico → 08week/starWars-app/public/favicon.ico
diff --git a/08week/my-app/public/index.html → 08week/starWars-app/public/index.html b/08week/my-app/public/index.html → 08week/starWars-app/public/index.html
diff --git a/08week/my-app/public/manifest.json → 08week/starWars-app/public/manifest.json b/08week/my-app/public/manifest.json → 08week/starWars-app/public/manifest.json
diff --git a/08week/my-app/src/App.css → 08week/starWars-app/src/App.css b/08week/my-app/src/App.css → 08week/starWars-app/src/App.css
diff --git a/08week/starWars-app/src/App.js b/08week/starWars-app/src/App.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import './App.css';
+import CharacterCard from './CharacterCard.js';
+
+class App extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+        characters: [],
+    }
+  }
+
+  componentDidMount(){
+       fetch('https://swapi.co/api/people/')
+          .then((response) => response.json())
+          .then((responseJson) => {
+            return this.setState({characters: responseJson.results})
+          })
+          .catch((error) => {
+            console.error(error);
+          });
+    }
+
+    renderCharacters() {
+      console.log('in renderCharacters');
+
+      console.log('characters array', this.state.characters);
+      }
+
+  render() {
+    return (
+      <div>
+        <div className="App">
+          <div className="App-header">
+            <img src={logo} className="App-logo" alt="logo" />
+            <h2>Star Wars</h2>
+          </div>
+        </div>
+
+        <div className="App">
+          <img src={logo} className="App-logo" alt="logo" />
+          {this.renderCharacters()}
+        </div>
+      </div>
+    );
+  }
+}
+
+
+export default App;
diff --git a/08week/my-app/src/App.test.js → 08week/starWars-app/src/App.test.js b/08week/my-app/src/App.test.js → 08week/starWars-app/src/App.test.js
diff --git a/08week/starWars-app/src/CharacterCard.js b/08week/starWars-app/src/CharacterCard.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class CharacterCard extends Component {
+    render() {
+        console.log(this.props);
+        return (
+            <div className="card">
+                <h2>{this.props.name}</h2>
+                <p>{this.props.birth_year}</p>
+            </div>
+        );
+    }
+}
+
+export default CharacterCard;
diff --git a/08week/my-app/src/index.css → 08week/starWars-app/src/index.css b/08week/my-app/src/index.css → 08week/starWars-app/src/index.css
diff --git a/08week/my-app/src/index.js → 08week/starWars-app/src/index.js b/08week/my-app/src/index.js → 08week/starWars-app/src/index.js
diff --git a/08week/my-app/src/registerServiceWorker.js → ...starWars-app/src/registerServiceWorker.js b/08week/my-app/src/registerServiceWorker.js → ...starWars-app/src/registerServiceWorker.js