diff --git a/index.html b/index.html index bc185ad2..322154f3 100644 --- a/index.html +++ b/index.html @@ -1,42 +1,43 @@ - - - - Launch Checklist - - - - -

Launch Checklist Form

-
- -
-
-
-
- -
-
- -
-
- -
-
- -
- -
-
-
-

Awaiting Information Before Launch

-
-
    -
  1. Pilot Ready
    2. -
  2. Co-pilot Ready
    3. -
  3. Fuel level high enough for launch
    4. -
  4. Cargo mass low enough for launch
    5. -
-
-
- - + + + + Launch Checklist + + + + +

Launch Checklist Form

+
+ + +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+

Awaiting Information Before Launch

+
+
    +
  1. Pilot Ready
    2. +
  2. Co-pilot Ready
    3. +
  3. Fuel level high enough for launch
    4. +
  4. Cargo mass low enough for launch
    5. +
+
+
+ + diff --git a/script.js b/script.js index 8d2e0821..a33cb11c 100644 --- a/script.js +++ b/script.js @@ -1,13 +1,87 @@ -// 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. -
  2. Diameter: ${}
    3. -
  3. Star: ${}
    4. -
  4. Distance from Earth: ${}
    5. -
  5. Number of Moons: ${}
    6. -
- -*/ +// Write your JavaScript code here! + +// {/* /* This block of code shows how to format the HTML once you fetch some planetary JSON! +function randomizer(max){ + return Math.floor(Math.random() * Math.floor(max)); +} + +window.addEventListener("load",function() { + let form = document.getElementById("launchForm") + form.addEventListener("submit",function(event){ + fetch("https://handlers.education.launchcode.org/static/planets.json").then( function(response) { + response.json().then( function(json) { + let i = randomizer(6); + const div = document.getElementById("missionTarget"); + div.innerHTML= ` +

Mission Destination

+
    +
  1. Name: ${json[i].name}
    2. +
  2. Diameter: ${json[i].diameter}
    3. +
  3. Star: ${json[i].star}
    4. +
  4. Distance from Earth: ${json[i].distance}
    5. +
  5. Number of Moons: ${json[i].moons}
    6. +
+ ` + }); + }); +let pilot = document.querySelector("input[name=pilotName]"); +let copilot = document.querySelector("input[name=copilotName]"); +let fuel = document.querySelector("input[name=fuelLevel]"); +let cargo =document.querySelector("input[name=cargoMass]"); + + if (pilot.value === "" || copilot.value === "" || fuel.value === "" || cargo.value === ""){ + window.alert("All Fields are Required!"); + event.preventDefault(); + }else if(isNaN(fuel.value)||isNaN(cargo.value)){ + window.alert("Please Enter a Number for Cargo and Fuel Levels!"); + event.preventDefault(); + }else if(isNaN(pilot.value) === false ||isNaN(copilot.value) === false){ + window.alert("Please Enter a Valid Name for the Pilot and Copilot"); + event.preventDefault(); + } + }); + form.addEventListener("submit",function(event){ + let pilot = document.querySelector("input[name=pilotName]"); + let copilot = document.querySelector("input[name=copilotName]"); + let fuel = document.querySelector("input[name=fuelLevel]"); + let cargo =document.querySelector("input[name=cargoMass]"); + + if (fuel.value < 10000 && fuel.value > 0){ + launchStatus.innerHTML = "Shuttle not ready for launch" + faultyItems.style.visibility = 'visible'; + launchStatus.style.color = 'red'; + faultyItems.innerHTML= ` +
    +
  1. Pilot: ${pilot.value} Ready
    2. +
  2. Co-pilot: ${copilot.value} Ready
    3. +
  3. Fuel is too low for launch
    4. +
  4. Cargo mass low enough for launch
    5. +
+ +`; +event.preventDefault(); +} else if (cargo.value > 10000){ + launchStatus.innerHTML = "Shuttle not ready for launch" + faultyItems.style.visibility = 'visible'; + launchStatus.style.color = 'red'; + faultyItems.innerHTML= ` +
    +
  1. Pilot: ${pilot.value} Ready
    2. +
  2. Co-pilot: ${copilot.value} Ready
    3. +
  3. Fuel high enough for launch
    4. +
  4. Cargo mass too high for launch
    5. +
+ +`; +event.preventDefault(); + } + if( fuel.value > 10000 && cargo.value < 10000 ) { + launchStatus.innerHTML = "Shuttle is ready for launch"; + launchStatus.style.color = "green"; + faultyItems.style.visibility ='hidden'; + event.preventDefault(); + } + }); + }); + + diff --git a/styles.css b/styles.css index a2f31807..40d1f26f 100644 --- a/styles.css +++ b/styles.css @@ -1,53 +1,53 @@ -h1 { - text-align: center; -} - -div { - text-align: left; -} - -#faultyItems { - visibility: hidden; -} - -#launchForm { - background-color: #ECF0F1; - text-align: center; - margin: auto; - width: 25%; - border: 3px solid black; - padding: 10px; -} - -#launchStatusCheck { - background-color: #ECF0F1; - text-align: center; - margin: 50px auto; - width: 50%; - border: 3px solid black; - padding: 10px; -} - -#missionTarget img { - max-width: 40%; - max-height: 250px; -} - -#missionTarget { - background-color: #ECF0F1; - text-align: center; - margin: 50px auto; - width: 50%; - border: 3px solid black; - padding: 10px; -} - -button { - background-color: #419f6a; - border: none; - color: white; - border-radius: 8px; - width: 25%; - height: 30px; - margin: 10px 0; -} +h1 { + text-align: center; +} + +div { + text-align: left; +} + +#faultyItems { + visibility: hidden; +} + +#launchForm { + background-color: #ECF0F1; + text-align: center; + margin: auto; + width: 25%; + border: 3px solid black; + padding: 10px; +} + +#launchStatusCheck { + background-color: #ECF0F1; + text-align: center; + margin: 50px auto; + width: 50%; + border: 3px solid black; + padding: 10px; +} + +#missionTarget img { + max-width: 40%; + max-height: 250px; +} + +#missionTarget { + background-color: #ECF0F1; + text-align: center; + margin: 50px auto; + width: 50%; + border: 3px solid black; + padding: 10px; +} + +button { + background-color: #419f6a; + border: none; + color: white; + border-radius: 8px; + width: 25%; + height: 30px; + margin: 10px 0; +}