Feedback

index.html

@@ -15,7 +15,7 @@ <h1>Launch Checklist Form</h1>
         <div id="launchForm">
             <form data-testid="testForm">
                 <div class="formField">
-                    <label>Pilot Name <input type="text" name="pilotName" id="pilotName"/></label>
+                    <label>Pilot Name <input type="text" name="pilotName"/></label>
                 </div>
                 <div class="formField">
                     <label>Co-pilot Name <input type="text" name="copilotName"/></label>

script.js

@@ -1,16 +1,41 @@
 // Write your JavaScript code here!
+window.addEventListener("load", function() {
+    let form = document.querySelector("form");
+      form.addEventListener("submit", function(event) {
+
+        let list = document.getElementById("faultyItems");
+        let pilotNameInput = document.querySelector("input[name=pilotName]").value;
+        let copilotNameInput = document.querySelector("input[name=copilotName]").value;
+        let fuelLevelInput = document.querySelector("input[name=fuelLevel]").value;
+        let cargoMassInput = document.querySelector("input[name=cargoMass]").value;
+        event.preventDefault();
+        if (validateInput(pilotNameInput) === "Empty" || validateInput(copilotNameInput) === "Empty" || validateInput(fuelLevelInput) === "Empty" || validateInput(cargoMassInput) === "Empty") {
+            alert("All fields are required!");
+
+        } else if (validateInput(pilotNameInput) == "Is a Number" || validateInput(copilotNameInput) == "Is a Number" || validateInput(fuelLevelInput) == "Not a Number" || validateInput(fuelLevelInput) == "Not a Number") {
+            alert("Make sure to enter valid information for each field!");
+
+        } else {
+        formSubmission (document, list, pilotNameInput, copilotNameInput, fuelLevelInput, cargoMassInput);    
+        }
+    });
+
+});
+
 
 window.addEventListener("load", function() {
+
+    let listedPlanetsResponse = myFetch();
+    listedPlanetsResponse.then(function (result) {
+        listedPlanets = result;
+        console.log(listedPlanets);
+    }).then(function () {
+        console.log(listedPlanets);
+        // Below this comment call the appropriate helper functions to pick a planet fom the list of planets and add that information to your destination.
+        planetPicked = pickPlanet(listedPlanets);
+        console.log(planetPicked);
+        destination = addDestinationInfo(document, planetPicked.name, planetPicked.diameter, planetPicked.star, planetPicked.distance, planetPicked.moons, planetPicked.image);
+    })
+
+});   
 
-   let listedPlanets;
-   // Set listedPlanetsResponse equal to the value returned by calling myFetch()
-   let listedPlanetsResponse;
-   listedPlanetsResponse.then(function (result) {
-       listedPlanets = result;
-       console.log(listedPlanets);
-   }).then(function () {
-       console.log(listedPlanets);
-       // Below this comment call the appropriate helper functions to pick a planet fom the list of planets and add that information to your destination.
-   })
-
-});

scriptHelper.js

@@ -1,7 +1,6 @@
-// Write your helper functions here!
 require('isomorphic-fetch');
 
-function addDestinationInfo(document, name, diameter, star, distance, moons, imageUrl) {
+function addDestinationInfo(document, name, diameter, star, distance, moons, imageURL) {
    // Here is the HTML formatting for our mission target div.
    /*
                 <h2>Mission Destination</h2>
@@ -14,26 +13,86 @@ function addDestinationInfo(document, name, diameter, star, distance, moons, ima
                 </ol>
                 <img src="">
    */
-}
+
+
+        let destination = document.getElementById("missionTarget");
+
+        destination.innerHTML += `<h2>Mission Destination</h2>
+                <ol>
+                    <li>Name: ${name}</li>
+                    <li>Diameter: ${diameter}</li>
+                    <li>Star: ${star}</li>
+                    <li>Distance from Earth: ${distance}</li>
+                    <li>Number of Moons: ${moons}</li>
+                </ol>
+                <img src=${imageURL}></img>`;
+
+        console.log(destination);
+
+
+};
 
 function validateInput(testInput) {
-
-}
+    if (testInput.trim() == "") {
+        return ("Empty");
+    } else if (isNaN(testInput.trim())) {
+        return ("Not a Number");
+    } else if (!isNaN(testInput.trim())) {
+        return ("Is a Number");
+    }   
+};
+
 
 function formSubmission(document, list, pilot, copilot, fuelLevel, cargoLevel) {
-
-}
+        console.log(pilot);
+        document.getElementById("pilotStatus").innerHTML = `Pilot ${pilot} is ready for launch`;
+        document.getElementById("copilotStatus").innerHTML = `Co-pilot ${copilot} is ready for launch`;
 
-async function myFetch() {
-    let planetsReturned;
+
+        if ((fuelLevel < 10000) && (cargoLevel <= 10000)) {
+            document.getElementById("fuelStatus").innerHTML = `Fuel level too low for launch`;
+            document.getElementById("cargoStatus").innerHTML = `Cargo mass low enough for launch`;
+            document.getElementById("launchStatus").innerHTML = `Shuttle Not Ready for Launch`;
+            document.getElementById("faultyItems").style.visibility = "visible";
+            document.getElementById("launchStatusCheck").style.color = "#C7254E"; 
 
-    planetsReturned = await fetch().then( function(response) {
-        });
+        } else if ((fuelLevel >= 10000) && (cargoLevel > 10000)) {
+            document.getElementById("fuelStatus").innerHTML = `Fuel level high enough for launch`
+            document.getElementById("cargoStatus").innerHTML = `Cargo mass too heavy for launch`;
+            document.getElementById("launchStatus").innerHTML = `Shuttle Not Ready for Launch`;
+            document.getElementById("faultyItems").style.visibility = "visible";
+            document.getElementById("launchStatusCheck").style.color = "#C7254E";
 
-    return planetsReturned;
-}
+        } else if ((fuelLevel < 10000) && (cargoLevel > 10000) ) {
+            document.getElementById("fuelStatus").innerHTML = `Fuel level too low for launch`;
+            document.getElementById("cargoStatus").innerHTML = `Cargo mass too heavy for launch`;
+            document.getElementById("launchStatus").innerHTML = `Shuttle Not Ready for Launch`;
+            document.getElementById("faultyItems").style.visibility = "visible";
+            document.getElementById("launchStatusCheck").style.color = "#C7254E";
+
+        } else if ((fuelLevel >= 10000) && (cargoLevel <= 10000)) {
+           document.getElementById("faultyItems").style.visibility = "visible";
+           document.getElementById("launchStatus").innerHTML = `Shuttle is Ready for Launch`;
+           document.getElementById("launchStatusCheck").style.color = "#419F6A"; 
+           document.getElementById("fuelStatus").innerHTML = `Fuel level high enough for launch`;
+           document.getElementById("cargoStatus").innerHTML = `Cargo mass low enough for launch`;
+
+        };
+
+};
+
+async function myFetch() {
+
+    let response = await fetch("https://handlers.education.launchcode.org/static/planets.json");
+    let json = await response.json();
+    return json;
+};
 
 function pickPlanet(planets) {
+    let planetPicked; 
+    planetPicked = planets[Math.floor(Math.random()*planets.length)];
+    return planetPicked;
+
 }
 
 module.exports.addDestinationInfo = addDestinationInfo;