From ba643efe61a23d32e5f52e82d6d0e9e2a6a261b4 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Thu, 10 Aug 2023 20:13:17 +0000 Subject: [PATCH 1/7] Setting up GitHub Classroom Feedback From e616207d93c7274beeb8443c84152a4d82201f46 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Thu, 10 Aug 2023 23:49:37 +0000 Subject: [PATCH 2/7] Update GitHub Classroom Autograding From f2b6fffa8879f2362c362a80604031c7221af099 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Thu, 10 Aug 2023 23:49:38 +0000 Subject: [PATCH 3/7] Update GitHub Classroom Autograding Workflow From 80afd711793f8c751f83b3df814268bd10a16623 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Fri, 11 Aug 2023 00:00:09 +0000 Subject: [PATCH 4/7] Update GitHub Classroom Autograding From 8e7f6962882f34a26c6fa4556204edf9dc4d2b54 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Fri, 11 Aug 2023 00:00:09 +0000 Subject: [PATCH 5/7] Update GitHub Classroom Autograding Workflow From 25074f2cd6ceaa714e5d85874aeb423f62512fb9 Mon Sep 17 00:00:00 2001 From: ubeb24 Date: Fri, 11 Aug 2023 19:58:42 -0400 Subject: [PATCH 6/7] initial attempt, still buggy --- index.html | 2 +- script.js | 68 +++++++++++++++++++++++++++++++++++++++++-------- scriptHelper.js | 61 +++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 116 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 8d93c57..e157d21 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + Launch Checklist diff --git a/script.js b/script.js index 80569e3..6e1332a 100644 --- a/script.js +++ b/script.js @@ -1,16 +1,62 @@ // Write your JavaScript code here! +// X const { formSubmission } = require("./scriptHelper"); + window.addEventListener("load", function() { + //Validate the user responses with `preventDefault()` to ensure the following: + // a. The user has entered something for every field. + //b. The user has entered string values for names and number for fuel and cargo levels. + //preventDefault is to stop "default functionality of browser" when we do not meet conditions. + let form = document.querySelector("form") + let list = document.getElementById("faultyItems") + //do i add another function here or do i add the submission form function in script helper when prevent defaulting the reloaded page + //formSubmission(event) {event.preventDefault()} + //form.addEventListener("submit",formSubmission) + //OR + //function noReload(event){event.preventDefault()} + //form.addEventListener("submit",formSubmission) + //OR + //do you event listen for "load" and if it does it without the stuff, it can't submit the stuff? + form.addEventListener("submit", function(event){ + event.preventDefault(); + //call form submission to pass these variables in + + let pilotNameInput = document.querySelector("input[name=pilotName]"); + let copilotNameInput = document.querySelector("input[name=copilotName]"); + let fuelLevelInput = document.querySelector("input[name=fuelLevel]"); + let cargoMassInput = document.querySelector("input[name=cargoMass]"); + // if (pilotNameInput.value === "" || copilotNameInput.value === "" || fuelLevelInput === "" || cargoMassInput === "") { + // alert("All fields are required!"); + // // stop the form submission + // } else if ((!String(pilotNameInput))||(!String(copilotNameInput))||(!Number(fuelLevelInput))||(!Number(cargoMassInput))) { + // alert("Please submit a proper input!"); + // } + formSubmission(document, list, pilotNameInput.value, copilotNameInput.value, fuelLevelInput.value, cargoMassInput.value) +//console.log(cargoMassInput.value) +// formSubmission(document, list, pilotNameInput.value, copilotNameInput.value, fuelLevelInput.value, cargoMassInput.value); +}); + function formSubmission(document, list, pilot, copilot, fuelLevel, cargoLevel) { + console.log(pilot) +} +// function validateInput(testInput) { +// let testInput = Number(testInput) +// if (testInput === Number) { +// return("Is a Number") +// } else if (isNaN(testInput)) { +// return("Not a Number") +// } else if (testInput === '') { +// return("Empty") +// } +// } - 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. - }) - +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. +}) }); \ No newline at end of file diff --git a/scriptHelper.js b/scriptHelper.js index 132331f..cfa9e3d 100644 --- a/scriptHelper.js +++ b/scriptHelper.js @@ -15,14 +15,69 @@ function addDestinationInfo(document, name, diameter, star, distance, moons, ima */ } - +// STEP #1: Valid information for the fields means that the user submits a value that is easily converted to the correct data type for our +//fellow engineers. The pilot and co-pilot names should be strings and the fuel level and cargo mass should be numbers. +//To do this, complete the helper function in your scriptHelper.js called validateInput(). +//validateInput() should take in a string as a parameter and return "Empty", "Not a Number", or "Is a Number" as appropriate. +//In scriptHelper.js, you will use validateInput() to complete the formSubmission() function. function validateInput(testInput) { - + let testInput = Number(testInput) + if (testInput === Number) { + return("Is a Number") + } else if (isNaN(testInput)) { + return("Not a Number") + } else if (testInput === '') { + return("Empty") + } } +// formSubmission() will take in a document parameter and strings representing the pilot, co-pilot, fuel level, and cargo mass. +// Using the values in those strings and the document parameter for your HTML document, update the shuttle requirements as described below. +//Make sure to call your formSubmission() function at the appropriate time in your script.js file! + +//document parameter is the form. we will be putting in the form in which was coded in the index where we ask the user to input info +//the values will come from the form submission. +// I am confused on the role of this function, is it just supposed to pass the values in? Or somehow turn on the faulty items list? +//FORM SUBMISSION DRAFTS + // if (pilotNameInput.value === "" || copilotNameInput.value === "" || fuelLevelInput === "" || cargoMassInput === "") { + // alert("All fields are required!"); + // ((!String(pilotNameInput))||(!String(copilotNameInput))(!Number(fuelLevelInput))||(!Number(cargoMassInput))) { + // alert("Please submit a proper input!"); + +// The point of using form submission function is to validate options and changing faulty items and the css code so that it relfects to the user they made mistakes in their inputs function formSubmission(document, list, pilot, copilot, fuelLevel, cargoLevel) { - + console.log(pilot) } + // let statusCheck = document.getElementById("launchStatus") + // if PILOT name is empty or it's number THEN {do this}. Otherwise it's correct and {you do this} + // if (validateInput(pilotNameInput) === "Is a Number" || validateInput(pilotNameInput) === "Empty") { + // alert("Please submit a proper input! All fields are required!"); + // } else { = document.querySelector("data-testid=pilotStatus") + + // } + // // if copilot name is empty or it's number THEN {do this}. Otherwise it's correct and {you do this} + // if (validateInput(copilotNameInput) === "Is a Number" || validateInput(copilotNameInput) === "Empty") { + // alert("Please submit a proper input! All fields are required!"); + // } else { + + // } + // // if fuelLevel is empty or it's not a number THEN {do this}. If not, but it is less than 10000L, THEN {do this}. Otherwise it's correct and {you do this} + // if (validateInput(fuelLevelInput)=== "Empty" || validateInput(fuelLevelInput) === "Not a Number") { + // alert("Please submit a proper input! All fields are required!"); + // } else if (fuelLevelInput<10,000) { + + // } else { + + // } + // // if cargomass is empty or it's not a number THEN {do this}. If not, but it is more than 10000L, THEN {do this}. Otherwise it's correct and {you do this} + // if (validateInput(cargoMassInput)=== "Empty" || validateInput(cargoMassInput) === "Not a Number") { + // alert("Please submit a proper input! All fields are required!"); + // } else if (cargoMassInput>10,000) { + + // } else { + +//} + async function myFetch() { let planetsReturned; From 49681e79d9b41e39ce9cd7b5442cee28e71a4b53 Mon Sep 17 00:00:00 2001 From: ubeb24 Date: Mon, 14 Aug 2023 20:16:00 -0400 Subject: [PATCH 7/7] fixed bugs --- script.js | 48 ++++++++--------- scriptHelper.js | 136 +++++++++++++++++++++++++++++++++++------------- 2 files changed, 124 insertions(+), 60 deletions(-) diff --git a/script.js b/script.js index 6e1332a..994077f 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,9 @@ // Write your JavaScript code here! +//const { addDestinationInfo } = require("./scriptHelper"); + +//const { pickPlanet } = require("./scriptHelper"); + // X const { formSubmission } = require("./scriptHelper"); window.addEventListener("load", function() { @@ -7,8 +11,15 @@ window.addEventListener("load", function() { // a. The user has entered something for every field. //b. The user has entered string values for names and number for fuel and cargo levels. //preventDefault is to stop "default functionality of browser" when we do not meet conditions. +// fetch("https://handlers.education.launchcode.org/static/planets.json").then(function(response){ +// response.json().then(function(json){ +// const div = document.getElementById("") +// div.innerHTML = `` +// }) +// }) let form = document.querySelector("form") - let list = document.getElementById("faultyItems") + let list = document.querySelector("#faultyItems") + console.log(list) //do i add another function here or do i add the submission form function in script helper when prevent defaulting the reloaded page //formSubmission(event) {event.preventDefault()} //form.addEventListener("submit",formSubmission) @@ -25,38 +36,27 @@ window.addEventListener("load", function() { let copilotNameInput = document.querySelector("input[name=copilotName]"); let fuelLevelInput = document.querySelector("input[name=fuelLevel]"); let cargoMassInput = document.querySelector("input[name=cargoMass]"); - // if (pilotNameInput.value === "" || copilotNameInput.value === "" || fuelLevelInput === "" || cargoMassInput === "") { - // alert("All fields are required!"); - // // stop the form submission - // } else if ((!String(pilotNameInput))||(!String(copilotNameInput))||(!Number(fuelLevelInput))||(!Number(cargoMassInput))) { - // alert("Please submit a proper input!"); - // } - formSubmission(document, list, pilotNameInput.value, copilotNameInput.value, fuelLevelInput.value, cargoMassInput.value) -//console.log(cargoMassInput.value) -// formSubmission(document, list, pilotNameInput.value, copilotNameInput.value, fuelLevelInput.value, cargoMassInput.value); + if (pilotNameInput.value === "" || copilotNameInput.value === "" || fuelLevelInput === "" || cargoMassInput === "") { + alert("All fields are required!"); + // stop the form submission + } else if (!(String(pilotNameInput)|| String(copilotNameInput)||Number(fuelLevelInput)||Number(cargoMassInput))) { + alert("Please submit a proper input!"); + } + +console.log(formSubmission(document, list, pilotNameInput.value, copilotNameInput.value, fuelLevelInput.value, cargoMassInput.value)) }); - function formSubmission(document, list, pilot, copilot, fuelLevel, cargoLevel) { - console.log(pilot) -} -// function validateInput(testInput) { -// let testInput = Number(testInput) -// if (testInput === Number) { -// return("Is a Number") -// } else if (isNaN(testInput)) { -// return("Not a Number") -// } else if (testInput === '') { -// return("Empty") -// } -// } + let listedPlanets; // Set listedPlanetsResponse equal to the value returned by calling myFetch() -let listedPlanetsResponse; +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. +addDestinationInfo(document, listedPlanets[pickPlanet(listedPlanets)].name, listedPlanets[pickPlanet(listedPlanets)].diameter, listedPlanets[pickPlanet(listedPlanets)].star, listedPlanets[pickPlanet(listedPlanets)].distance, listedPlanets[pickPlanet(listedPlanets)].moons, listedPlanets[pickPlanet(listedPlanets)].image) +//console.log(listedPlanets[pickPlanet(listedPlanets)].name) }) }); \ No newline at end of file diff --git a/scriptHelper.js b/scriptHelper.js index cfa9e3d..e0e1ff1 100644 --- a/scriptHelper.js +++ b/scriptHelper.js @@ -1,9 +1,30 @@ // Write your helper functions here! require('isomorphic-fetch'); +// First, review the comments in addDestinationInfo(). +//This is the format of the innerHTML for the missionTarget div, which you can locate using the document parameter of addDestinationInfo(). +// addDestinationInfo() does not need to return anything. function addDestinationInfo(document, name, diameter, star, distance, moons, imageUrl) { + const div = document.getElementById("missionTarget") + //console.log(name) + // console.log(json.name) + div.innerHTML = + ` +

Mission Destination

+
    +
  1. Name: ${name}
    2. +
  2. Diameter: ${diameter}
    3. +
  3. Star: ${star}
    4. +
  4. Distance from Earth: ${distance}
    5. +
  5. Number of Moons: ${moons}
    6. +
+ + ` + + // Here is the HTML formatting for our mission target div. /* + document.querySelector("#missionTarget") =

Mission Destination

  1. Name:
    2. @@ -20,9 +41,9 @@ function addDestinationInfo(document, name, diameter, star, distance, moons, ima //To do this, complete the helper function in your scriptHelper.js called validateInput(). //validateInput() should take in a string as a parameter and return "Empty", "Not a Number", or "Is a Number" as appropriate. //In scriptHelper.js, you will use validateInput() to complete the formSubmission() function. -function validateInput(testInput) { - let testInput = Number(testInput) - if (testInput === Number) { +function validateInput(input) { + let testInput = Number(input) + if ((typeof testInput) === Number) { return("Is a Number") } else if (isNaN(testInput)) { return("Not a Number") @@ -46,49 +67,92 @@ function validateInput(testInput) { // The point of using form submission function is to validate options and changing faulty items and the css code so that it relfects to the user they made mistakes in their inputs function formSubmission(document, list, pilot, copilot, fuelLevel, cargoLevel) { - console.log(pilot) -} - // let statusCheck = document.getElementById("launchStatus") + //console.log(typeof pilot) + let statusCheck = document.getElementById("launchStatus") + console.log(typeof validateInput(pilot)) // if PILOT name is empty or it's number THEN {do this}. Otherwise it's correct and {you do this} - // if (validateInput(pilotNameInput) === "Is a Number" || validateInput(pilotNameInput) === "Empty") { - // alert("Please submit a proper input! All fields are required!"); - // } else { = document.querySelector("data-testid=pilotStatus") - - // } + + if (validateInput(pilot) === "Is a Number" || validateInput(pilot) === undefined|| validateInput(pilot) === "Empty") { + alert("Please submit a proper input! All fields are required!"); + } else { + document.getElementById("pilotStatus").innerHTML = `Pilot ${pilot} is ready for launch.` + } + // console.log(typeof pilot) // // if copilot name is empty or it's number THEN {do this}. Otherwise it's correct and {you do this} - // if (validateInput(copilotNameInput) === "Is a Number" || validateInput(copilotNameInput) === "Empty") { - // alert("Please submit a proper input! All fields are required!"); - // } else { - - // } - // // if fuelLevel is empty or it's not a number THEN {do this}. If not, but it is less than 10000L, THEN {do this}. Otherwise it's correct and {you do this} - // if (validateInput(fuelLevelInput)=== "Empty" || validateInput(fuelLevelInput) === "Not a Number") { - // alert("Please submit a proper input! All fields are required!"); - // } else if (fuelLevelInput<10,000) { - - // } else { - - // } - // // if cargomass is empty or it's not a number THEN {do this}. If not, but it is more than 10000L, THEN {do this}. Otherwise it's correct and {you do this} - // if (validateInput(cargoMassInput)=== "Empty" || validateInput(cargoMassInput) === "Not a Number") { - // alert("Please submit a proper input! All fields are required!"); - // } else if (cargoMassInput>10,000) { - - // } else { - -//} - + + if (validateInput(copilot) === "Is a Number" || validateInput(copilot) === undefined || validateInput(copilot) === "Empty") { + alert("Please submit a proper input! All fields are required!"); + } else { + document.getElementById("copilotStatus").innerHTML = `Co-pilot ${copilot} is ready for launch.` + } + + // if fuelLevel is empty or it's not a number THEN {do this}. If not, but it is less than 10000L, THEN {do this}. Otherwise it's correct and {you do this} + + if (validateInput(fuelLevel)=== "Empty" || validateInput(fuelLevel) === "Not a Number") { + alert("Please submit a proper input! All fields are required!"); + } else if (fuelLevel<10000) { + /// make faulty items visible + list.style.visibility = "visible" + // change the innerHTML on the faulty item list + document.getElementById("fuelStatus").innerHTML = `Fuel level too low for launch` + //The text of the h2 element, launchStatus, should also change to "Shuttle not ready for launch" and the color should change to red + statusCheck.innerHTML = `Shuttle Not Ready for Launch` + statusCheck.style.color = "rgb(199, 37, 78)" + } else if(document.getElementById("cargoStatus").innerHTML === `Cargo mass too heavy for launch`){ + document.getElementById("fuelStatus").innerHTML = `Fuel level high enough for launch` + } else if(document.getElementById("cargoStatus").innerHTML === `Cargo mass low enough for launch`){ + document.getElementById("fuelStatus").innerHTML = `Fuel level high enough for launch` + statusCheck.innerHTML = `Shuttle is Ready for Launch` + statusCheck.style.color = "rgb(65, 159, 106)" + } + + // // if cargomass is empty or it's not a number THEN {do this}. If not, but it is more than 10000L, THEN {do this}. Otherwise it's correct and {you do this} + + if (validateInput(cargoLevel)=== "Empty" || validateInput(cargoLevel) === "Not a Number") { + alert("Please submit a proper input! All fields are required!"); + } else if (cargoLevel>10000) { + ///make faulty items visisble + list.style.visibility = "visible" + //change the innerHTML on faulty item + document.getElementById("cargoStatus").innerHTML = `Cargo mass too heavy for launch` + //The text of the h2 element, launchStatus, should also change to "Shuttle not ready for launch" and the color should change to red + statusCheck.innerHTML = `Shuttle Not Ready for Launch` + statusCheck.style.color = "rgb(199, 37, 78)" + } else if(document.getElementById("fuelStatus").innerHTML === `Fuel level too low for launch`){ + document.getElementById("cargoStatus").innerHTML = `Cargo mass low enough for launch` + } else if (document.getElementById("fuelStatus").innerHTML === `Fuel level high enough for launch`) { + document.getElementById("cargoStatus").innerHTML = `Cargo mass low enough for launch` + statusCheck.innerHTML = `Shuttle is Ready for Launch` + statusCheck.style.color = "rgb(65, 159, 106)" + } +} +//list.style.visiblility = hidden or visible <-- async function myFetch() { let planetsReturned; +//const fetchPromise = fetch("https://handlers.education.launchcode.org/static/planets.json") +// fetchPromise.then( function(response) { +// const jsonPromise = response.json(); +// jsonPromise.then( function(json) { +//response.json().then(function(json){}) +// }) +// }) + // const jsonPromise = await response.json() + planetsReturned = await fetch("https://handlers.education.launchcode.org/static/planets.json").then( function(response) { +return response.json() +}) - planetsReturned = await fetch().then( function(response) { - }); return planetsReturned; -} +} +// fetch("https://handlers.education.launchcode.org/static/planets.json").then(function(response){}) +//response.json().then(function(json){}) +// pickPlanet() takes in one argument: a list of planets. +// Using Math.random(), return one planet from the list with a randomly-selected index. function pickPlanet(planets) { +return selectedPlanet = Math.floor(Math.random()*planets.length) +// return planets[selectedPlanet] } module.exports.addDestinationInfo = addDestinationInfo;