diff --git a/Launch-Checklist-Form b/Launch-Checklist-Form new file mode 160000 index 00000000..a4698b83 --- /dev/null +++ b/Launch-Checklist-Form @@ -0,0 +1 @@ +Subproject commit a4698b836b1d7b62be70cfe86528999131cdc6fe diff --git a/index.html b/index.html index bc185ad2..6d1f11a0 100644 --- a/index.html +++ b/index.html @@ -12,19 +12,22 @@

Launch Checklist Form

-
- -
-
- -
-
- -
-
- -
- + +
+ +
+
+ +
+
+ +
+
+ +
+ + +
diff --git a/script.js b/script.js index 8d2e0821..a0936414 100644 --- a/script.js +++ b/script.js @@ -1,13 +1,108 @@ // Write your JavaScript code here! -/* This block of code shows how to format the HTML once you fetch some planetary JSON! -

Mission Destination

-
    -
  1. Name: ${}
  2. -
  3. Diameter: ${}
  4. -
  5. Star: ${}
  6. -
  7. Distance from Earth: ${}
  8. -
  9. Number of Moons: ${}
  10. -
- -*/ +window.addEventListener("load", function() { + const form = document.querySelector("form"); + const submit = document.getElementById("formSubmit"); + + /* SUBMIT BUTTON LISTENER */ + form.addEventListener("submit", function(submit) { + const pilotName = document.querySelector("input[name=pilotName]"); + const copilotName = document.querySelector("input[name=copilotName]"); + const fuelLevel = document.querySelector("input[name=fuelLevel]"); + const cargoMass = document.querySelector("input[name=cargoMass]"); + const pilotStatus = document.getElementById("pilotStatus"); + const copilotStatus = document.getElementById("copilotStatus"); + const cargoStatus = document.getElementById("cargoStatus"); + const fuelStatus = document.getElementById("fuelStatus"); + const launchStatus = document.getElementById("launchStatus"); + + /* BLANK FIELDS CHECK */ + if (pilotName.value === "" || copilotName.value === "" || fuelLevel.value === "" || cargoMass.value === "") { + document.getElementById("faultyItems").style.visibility = "hidden"; + alert("All fields are required!"); + submit.preventDefault(); + }else{ + document.getElementById("faultyItems").style.visibility ="visible" + } + + + /*PILOT NAME PLACEMENT */ + function allLetter(inputtxt) { + const letters = /^[A-Za-z]+$/; + if(inputtxt.value.match(letters)) { + return true; + }else{ + alert("Please only use letters in Pilot & Copilot's names"); + return false; + } + }; + + if ((allLetter(pilotName))=== false) { + pilotStatus.innerHTML ="[YET TO BE DEFINED]"; + }else{ + pilotStatus.innerHTML = `${pilotName.value} is ready for Launch`; + } + + if((allLetter(copilotName))=== false) { + copilotStatus.innerHTML ="[YET TO BE DEFINED]"; + }else{ + copilotStatus.innerHTML = `${copilotName.value} is ready for Launch`; + } + + + /* NUMBER ON LEVELS CHECK */ + if ((isNaN(fuelLevel.value)) === true || (isNaN(cargoMass.value)) === true) { + document.getElementById("faultyItems").style.visibility = "hidden"; + alert("Enter Valid Information for each field, please.") + submit.preventDefault(); + }else{ + if(fuelLevel.value < 10000 || cargoMass.value > 10000){ + launchStatus.innerHTML = `Shuttle not ready for launch`; + launchStatus.style.color = "red"; + document.getElementById("launchForm").style.backgroundColor = "red" + }else{ + launchStatus.innerHTML = `Shuttle ready for launch`; + launchStatus.style.color = "green"; + document.getElementById("launchForm").style.backgroundColor = "green" + } + } + + + if(Number(fuelLevel.value) < 10000){ + fuelStatus.innerHTML = `Fuel level too low for launch`; + submit.preventDefault(); + }else{ + fuelStatus.innerHTML = `Fuel level high enough for launch`; + } + + if(Number(cargoMass.value) > 10000){ + cargoStatus.innerHTML = `Cargo mass too high for launch`; + submit.preventDefault(); + }else{ + cargoStatus.innerHTML = `Cargo mass low enough for launch`; + } + + + + }); + /* FETCH PLANETARY JSON */ + fetch("https://handlers.education.launchcode.org/static/planets.json").then(function(response) { + response.json().then(function(json) { + const missionTarget = document.getElementById("missionTarget"); + const targetRandomizer = Math.floor(Math.random() * json.length); + missionTarget.innerHTML = ` +

MISSION DESTINATION

+
    +
  1. Name: ${json[targetRandomizer].name}
  2. +
  3. Diameter: ${json[targetRandomizer].diameter}
  4. +
  5. Star: ${json[targetRandomizer].star}
  6. +
  7. Distance from Earth: ${json[targetRandomizer].distance}
  8. +
  9. Number of Moons: ${json[targetRandomizer].moons}
  10. +
+ + ` + + }); + }); +}); +/*NOTES AT THE BOTTOM */