Skip to content

Launch-Checklist-Form-Cbowser36 #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Launch-Checklist-Form-Cbowser36 #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9631507
update script.js
cbowser36 Oct 28, 2020
d0b10bb
Add files via upload
cbowser36 Oct 29, 2020
b0f69f5
Add files via upload
cbowser36 Oct 29, 2020
bacc660
Add files via upload
cbowser36 Oct 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 43 additions & 42 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,43 @@
<!DOCTYPE>
<html>
<head>
<title>Launch Checklist</title>
<link rel = "stylesheet" type = "text/css" href = "styles.css" />
<script src = "script.js"></script>
</head>
<body>
<h1>Launch Checklist Form</h1>
<div id="missionTarget">
<!-- Fetch some planetary data -->
</div>
<div id="launchForm">
<form>
<div style="display:flex; flex-direction: row; justify-content: center; align-items: center; margin: 8 0;">
<label>Pilot Name <input type="text" name="pilotName" id="pilotName"/></label>
</div>
<div style="display:flex; flex-direction: row; justify-content: center; align-items: center; margin: 8 0;">
<label>Co-pilot Name <input type="text" name="copilotName"/></label>
</div>
<div style="display:flex; flex-direction: row; justify-content: center; align-items: center; margin: 8 0;">
<label>Fuel Level (L) <input type="text" name="fuelLevel"/></label>
</div>
<div style="display:flex; flex-direction: row; justify-content: center; align-items: center; margin: 8 0;">
<label>Cargo Mass (kg) <input type="text" name="cargoMass"/></label>
</div>
<button id="formSubmit">Submit</button>
</form>
</div>
<div id="launchStatusCheck">
<h2 id="launchStatus">Awaiting Information Before Launch</h2>
<div id="faultyItems">
<ol>
<li id="pilotStatus">Pilot Ready</li>
<li id="copilotStatus">Co-pilot Ready</li>
<li id="fuelStatus">Fuel level high enough for launch</li>
<li id="cargoStatus">Cargo mass low enough for launch</li>
</ol>
</div>
</div>
</body>
</html>
<!DOCTYPE>
<html>
<head>
<title>Launch Checklist</title>
<link rel = "stylesheet" type = "text/css" href = "styles.css" />
<script src = "script.js"></script>
</head>
<body>
<h1>Launch Checklist Form</h1>
<div id="missionTarget">

<!-- Fetch some planetary data -->
</div>
<div id="launchForm">
<form>
<div style="display:flex; flex-direction: row; justify-content: center; align-items: center; margin: 8 0;">
<label>Pilot Name <input type="text" name="pilotName" id="pilotName"/></label>
</div>
<div style="display:flex; flex-direction: row; justify-content: center; align-items: center; margin: 8 0;">
<label>Co-pilot Name <input type="text" name="copilotName" id="copilotName"/></label>
</div>
<div style="display:flex; flex-direction: row; justify-content: center; align-items: center; margin: 8 0;">
<label>Fuel Level (L) <input type="text" name="fuelLevel" id="fuelLevel"/></label>
</div>
<div style="display:flex; flex-direction: row; justify-content: center; align-items: center; margin: 8 0;">
<label>Cargo Mass (kg) <input type="text" name="cargoMass" id="cargoMass"/></label>
</div>
<button id="formSubmit">Submit</button>
</form>
</div>
<div id="launchStatusCheck">
<h2 id="launchStatus">Awaiting Information Before Launch</h2>
<div id="faultyItems">
<ol>
<li id="pilotStatus">Pilot Ready</li>
<li id="copilotStatus">Co-pilot Ready</li>
<li id="fuelStatus">Fuel level high enough for launch</li>
<li id="cargoStatus">Cargo mass low enough for launch</li>
</ol>
</div>
</div>
</body>
</html>
100 changes: 87 additions & 13 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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!
<h2>Mission Destination</h2>
<ol>
<li>Name: ${}</li>
<li>Diameter: ${}</li>
<li>Star: ${}</li>
<li>Distance from Earth: ${}</li>
<li>Number of Moons: ${}</li>
</ol>
<img src="${}">
*/
// 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= `
<h2>Mission Destination</h2>
<ol>
<li>Name: ${json[i].name}</li>
<li>Diameter: ${json[i].diameter}</li>
<li>Star: ${json[i].star}</li>
<li>Distance from Earth: ${json[i].distance}</li>
<li>Number of Moons: ${json[i].moons}</li>
</ol>
<img src="${json[i].image}">`
});
});
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= `
<ol>
<li>Pilot: ${pilot.value} Ready</li>
<li>Co-pilot: ${copilot.value} Ready</li>
<li>Fuel is too low for launch</li>
<li>Cargo mass low enough for launch</li>
</ol>

`;
event.preventDefault();
} else if (cargo.value > 10000){
launchStatus.innerHTML = "Shuttle not ready for launch"
faultyItems.style.visibility = 'visible';
launchStatus.style.color = 'red';
faultyItems.innerHTML= `
<ol>
<li>Pilot: ${pilot.value} Ready</li>
<li>Co-pilot: ${copilot.value} Ready</li>
<li>Fuel high enough for launch</li>
<li>Cargo mass too high for launch</li>
</ol>

`;
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();
}
});
});


106 changes: 53 additions & 53 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}