Moved files

src/app/app.component.css

@@ -2,4 +2,21 @@
     display: flex;
     padding: 10px;
     justify-content: space-evenly;
+}
+h1 {
+    color: rgb(185, 135, 6);
+    font-family: 'Courier New', Courier, monospace;
+}
+h3 {
+    color: rgb(88, 67, 12);
+    font-size: 22px;
+    font-family: 'Courier New', Courier, monospace;
+}
+li,p {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 15px;
+}
+button {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 12px;  
 }

src/app/crew/crew.component.css

@@ -18,5 +18,7 @@ img {
 h3 {
     text-align: center;
 }
-
+.selected {
+    color: teal;
+}
 /* Add a 'selected' class here to style selected astronaut names a different color. */

src/app/crew/crew.component.html

@@ -1,14 +1,19 @@
 <div class="displayBox">
     <h3>Candidates</h3>
     <ul>
-        <li *ngFor="let member of candidates">{{member.name}}</li>
+        <li *ngFor="let member of candidates" 
+        (click)="addCrewMember(member)" 
+        [class.selected]="crew.includes(member)">{{member.name}}</li>
     </ul>
 </div>
 <hr>
 <div class="displayBox">
-    <h3>Crew <!-- Add a span tag here to display 'Full' when the crew reaches 3. --></h3>
+    <h3>Crew <span *ngIf="crew.length===3">Full</span> <!-- Add a span tag here to display 'Full' when the crew reaches 3. --></h3>
     <ol>
-        <li *ngFor="let astronaut of crew">{{astronaut.name}}</li>
+        <li *ngFor="let astronaut of crew"  
+        (mouseover)="selected=astronaut"
+        (mouseout)="selected=false">
+        {{astronaut.name}}</li>
     </ol>
-    <!-- Add an img tag here to display astronaut photos. -->
-</div>
+    <img *ngIf="selected" [src]="selected.photo"/><!-- Add an img tag here to display astronaut photos. -->
+</div>

src/app/crew/crew.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-crew',
   templateUrl: './crew.component.html',
-  styleUrls: ['./crew.component.css']
+  styleUrls: ['./crew.component.css', '../app.component.css']
 })
 export class CrewComponent implements OnInit {
 
@@ -24,6 +24,11 @@ export class CrewComponent implements OnInit {
 
   ngOnInit() { }
 
-  // Code the 'addCrewMember' function here:
+  addCrewMember(member){
+    if(!this.crew.includes(member)&&this.crew.length<3){
+      this.crew.push(member);
+    }
+
+  }
 
 }

src/app/equipment/equipment.component.css

@@ -6,13 +6,20 @@
 button {
     margin: 2px;
     cursor: pointer;
+
 }
 
 h3 {
     text-align: center;
 }
-
+.active {
+    background-color: gold;
+}
 /* Add an 'active' class to style the background of the 'Add to Cargo Hold' buttons. */
+.nearMaxMass {
+    color:red;
+    font-style: italic;
+    font-weight: bold;
+}
 
-
-/* Add the 'nearMaxMass' class style here: */
+/* Add the 'nearMaxMass' class style here: */

src/app/equipment/equipment.component.html

@@ -2,8 +2,9 @@
     <h3>Equipment</h3>
     <ol>
         <li *ngFor="let item of equipmentItems">
-            <!-- "Add to Cargo Hold" button goes here. -->
+            <button (click)="addItem(item)" [class.active]="cargoHold.length<maxItems && cargoMass+item.mass<2000" [disabled]="cargoMass+item.mass>maximumAllowedMass||buttonDisabled">Add to Cargo Hold</button>
             {{item.name}}, {{item.mass}} kg
+
         </li>
     </ol>
 </div>
@@ -13,10 +14,13 @@ <h3>Equipment</h3>
 <div class = "displayBox">
     <h3>Cargo Hold: {{cargoHold.length}}/{{maxItems}} Spots Filled</h3>
     <ol>
-        <li *ngFor="let equipment of cargoHold">{{equipment.name}}</li>
+        <li *ngFor="let equipment of cargoHold">{{equipment.name}}
+        <button (click)="removeItem(equipment)">Remove item</button>
+        </li>
     </ol>
     <p>Mass in Hold: {{cargoMass}} kg</p>
-    <p>Mass Budget Remaining: {{<!-- Calculate mass remaining here. -->}} kg</p>
-    <!-- Add the "Empty Hold" button here. -->
+    <p [class.nearMaxMass]="nearCapacity">Mass Budget Remaining: {{maximumAllowedMass - cargoMass}} kg</p>
+    <button (click)="emptyHold()" [class.active]="cargoHold.length>0" >Empty Cargo Hold</button>
 </div>
 
+

src/app/equipment/equipment.component.ts

@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-equipment',
   templateUrl: './equipment.component.html',
-  styleUrls: ['./equipment.component.css']
+  styleUrls: ['./equipment.component.css','../app.component.css']
+
 })
 export class EquipmentComponent implements OnInit {
    equipmentItems: object[] = [
@@ -21,11 +22,36 @@ export class EquipmentComponent implements OnInit {
    cargoMass: number = 0;
    maximumAllowedMass: number = 2000;
    maxItems: number = 10;
+   buttonDisabled: boolean = false;
+   active: boolean = true;
+   nearCapacity: boolean = false;
+
 
    constructor() { }
 
    ngOnInit() { }
 
    // Code your addItem function here:
-
+   addItem(item){
+     if(this.cargoHold.length<this.maxItems && this.cargoMass+item.mass<2000) {
+      this.cargoHold.push(item);
+      this.cargoMass += item.mass;
+      if(this.cargoMass>=1800){
+        this.nearCapacity = true;
+      }
+     }
+    else if(this.cargoHold.length>this.maxItems-1){
+      this.buttonDisabled = true;
+      alert(`Cargo Hold full`);
+    }
+   }
+   emptyHold(){
+     this.cargoHold = [];
+     this.cargoMass = 0;
+   }
+   removeItem(equipment){
+      let index = this.cargoHold.indexOf(equipment);
+      this.cargoHold.splice(index, 1);
+    }
+
 }

src/app/experiments/experiments.component.html

@@ -1,7 +1,18 @@
 <div class="displayBox">
     <h3>Possible Experiments</h3>
     <ul>
-      <li *ngFor="let experiment of experiments">{{experiment}}</li>
+      <li *ngFor="let experiment of experiments">{{experiment}}
+        <button (click)="addExperiment(experiment)" [disabled]="added.includes(experiment)||added.length===3">Add to Mission</button>
+      </li>
     </ul>
 </div>
 <hr>
+<div class = "displayBox">
+  <h3>Mission Experiments: </h3>
+  <ol>
+    <li *ngFor="let expAdded of added">{{expAdded}}
+      <button (click)="removeExperiment(expAdded)">Finished</button>
+    </li>
+
+  </ol>
+

src/app/experiments/experiments.component.ts

@@ -3,13 +3,21 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-experiments',
   templateUrl: './experiments.component.html',
-  styleUrls: ['./experiments.component.css']
+  styleUrls: ['./experiments.component.css', '../app.component.css']
 })
 export class ExperimentsComponent implements OnInit {
    experiments: string[] = ['Moon soil sample', 'Plant growth in orbit', 'Human bone density changes', 'Water droplet podcast for grades K-5', 'Satellite launch'];
-
+  added: string[] =[];
    constructor() { }
 
    ngOnInit() { }
-
+addExperiment(experiment){
+  if(this.added.length<3){
+    this.added.push(experiment);
+    }
+  }
+  removeExperiment(expAdded){
+    let index = this.added.indexOf(expAdded);
+    this.added.splice(index, 1);
+  }
 }

src/app/header/header.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.css']
+  styleUrls: ['./header.component.css', '../app.component.css']
 })
 export class HeaderComponent implements OnInit {