Mars Horizon

by gdarussian

HTML

<label for="missions">Select a mission: </label>
<select id="missions" onchange="changeMission()">
  <option></option>
</select>
<table>
  <thead>
    <th>Upper</th>
    <th>Booster</th>
    <th>Time</th>
    <th>Cost</th>
    <th>Reliability</th>
    <th>Mission</th>
  </thead>
  <tbody id="minTime">
  </tbody>
</table>
<br />
<table>
  <thead>
    <th>Upper</th>
    <th>Booster</th>
    <th>Time</th>
    <th>Cost</th>
    <th>Reliability</th>
    <th>Mission</th>
  </thead>
  <tbody id="best">
  </tbody>
</table>
<br />
<table>
  <thead>
    <th>Upper</th>
    <th>Booster</th>
    <th>Time</th>
    <th>Cost</th>
    <th>Reliability</th>
  </thead>
  <tbody id="results">
  </tbody>
</table>

CSS

body {
    margin: 1em;
    font-size: 85%;
    font-family: arial, helvetica, sans-serif;
}
.charCell {
    cursor: pointer;
}
.slider {
    width: 50;
    height: 20;
}

input[type="text"] {
    width: 10px;
    text-align: right;
}

input[type="checkbox"] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}
.bad {
    color: red;
}

.good {
    color: green;
}
.unselectedCell {
    border: 1px solid transparent;
}
.selectedCell {
    border: 1px solid red;
}
p {
    font-size: 1em;
    margin: 0 0 .8em 0;
}

#chkMoveMenu {
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

.rightAligned {
    position: absolute;
    right: 55px;
}

.rightAligned2 {
    position: absolute;
    right: 30px;
}

.setName {
    font-style: italic;
}

html>body {
    font-size: 12px;
}

h1 {
    font-weight: bold;
    font-size: big;
}

th {
    text-align: left;
    padding: 1px 5px 0 0;
    border-bottom: 1px solid gray;
    padding: 3px;
}

td {
}

section {
    font-size: 1em;
    border: 3px solid white;
    margin: 10px 0 0 0;
    padding: 5px;
    vertical-align: middle;
    box-shadow: 0px 0px 20px 3px #d3d3d3;
    border-radius: 4px;
    background-color: #ffffff;
}

.best {
    background-color: lightcyan;
    font-weight: bold;
}

JavaScript

const locations = ["Earth", "Moon", "Inner", "Outer"]

const missions = [
  { name: "Satellite", payloadTime: 2, payloadCost: 100, payloadSize: 175, location: "Earth" },
  { name: "Lunar Orbit", payloadTime: 2, payloadCost: 200, payloadSize: 350, location: "Moon" },
  { name: "Digital Imaging", payloadTime: 3, payloadCost: 300, payloadSize: 1500, location: "Earth" },
  { name: "Earth Orbit", payloadTime: 3, payloadCost: 400, payloadSize: 1800, location: "Earth" },
  { name: "Inner Planet Flyby", payloadTime: 3, payloadCost: 600, payloadSize: 800, location: "Inner" },
  { name: "Earth Orbit 2", payloadTime: 4, payloadCost: 720, payloadSize: 3800, location: "Earth" },
  { name: "Inner Planet Orbit", payloadTime: 4, payloadCost: 840, payloadSize: 2200, location: "Inner" },
  { name: "Moon Landing", payloadTime: 6, payloadCost: 1200, payloadSize: 8000, location: "Moon" },
  { name: "Com Sattelite", payloadTime: 5, payloadCost: 960, payloadSize: 3600, location: "Earth" },
  { name: "Space Station", payloadTime: 6, payloadCost: 1320, payloadSize: 24000, location: "Earth" },
  { name: "Mars Lander", payloadTime: 5, payloadCost: 1320, payloadSize: 3500, location: "Inner" },
  { name: "Outer Flyby", payloadTime: 5, payloadCost: 1500, payloadSize: 2400, location: "Outer" },
  { name: "Space Station 2", payloadTime: 5, payloadCost: 3600, payloadSize: 20000, location: "Earth" },
  { name: "Space Station 3", payloadTime: 7, payloadCost: 4800, payloadSize: 20000, location: "Earth" },
  { name: "Space Station 4", payloadTime: 8, payloadCost: 6000, payloadSize: 24000, location: "Earth" },
  { name: "Outer Orbiter", payloadTime: 6, payloadCost: 2400, payloadSize: 4600, location: "Outer" },
  { name: "X-Ray Telescope", payloadTime: 8, payloadCost: 5400, payloadSize: 9000, location: "Earth" },
  { name: "Space Telescope", payloadTime: 7, payloadCost: 3000, payloadSize: 11000, location: "Earth" },
  { name: "Philae Landing", payloadTime: 10, payloadCost: 6000, payloadSize: 18000,...