No Man's Sky - Solar / Battery Calculator

Calculates minimum requirements for amount of Solar Panels and Batteries to be used for a given amount of Power Consumption (kPs)

by Devilin Pixy

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>No Man's Sky - Solar / Battery Calculator</title>
</head>
<body>
    <div class="container">
        <h2 class="page-header">No Man's Sky - Solar/Battery Calculator</h2>
        <label>Total Power Consumption</label>
        <input id="tpc" type="number" min="0" max="50000" value="">
        <label>(kPs)</label>
        <hr>
        <hr>
        <h3><u>Requirements:</u></h3>
        <table class="requirements">
        <tr>
          <td></td>
          <td class="heading">Minimal</td>
          <td class="heading">Advised</td>
        </tr>
        <tr>
          <td></td>
          <td><hr></td>
          <td><hr></td>
        </tr>
        <tr>
          <td>Solar Panels: </td>
          <td id="msmr"></td>
          <td id="asmr"></td>
        </tr>
        <tr>
          <td>Batteries: </td>
          <td id="mbmr"></td>
          <td id="abmr"></td>
        </tr>
        <tr>
          <td><hr></td>
          <td><hr></td>
          <td><hr></td>
         </tr>
         <tr>
          <td>Total Power Consumption / sunrise: </td>
          <td id="mtpcsr"></td>
          <td id="atpcsr"></td>
        </tr>
        <tr>
          <td>Total Power Consumption / day: </td>
          <td id="mtpcd"></td>
          <td id="atpcd"></td>
        </tr>
        <tr>
          <td>Total Power Consumption / sunset: </td>
          <td id="mtpcss"></td>
          <td id="atpcss"></td>
        </tr>
        <tr>
          <td>Total Power Consumption / night: </td>
          <td id="mtpcn"></td>
          <td id="atpcn"></td>
        </tr>
        <tr>
          <td></td>
          <td><hr></td>
          <td><hr></td>
        </tr>
        <tr>
          <td>Total: </td>
          <td id="mtpc"></td>
          <td id="atpc"></td>
        </tr>
        <tr>
          <td><hr></td>
          <td><hr></td>
          <td><hr></td>
...

CSS

html, body {
    font-family: 'Roboto Condensed', sans-serif;
    width: auto;
    height: auto;
    margin: 0px;
    padding: 5px;
}

.container {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    height: auto;
}

@media only screen and (max-device-width: 768px) {
    .container {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
}

h1, h2, h3, h4, h5, input, button {
    font-family: 'Roboto Condensed', sans-serif !important;
}

label {
  font-size: 1.5em;
}

input {
  width: 100px;
  text-align: right;
  font-weight: bold;
  font-size: 1.5em;
  border-width: 3px;
  border-color: lightgreen;
}

.requirements td {
  text-align: right;
  padding-right: 20px;
}

.heading {
  font-weight: bold;
}

#msmr, #mbmr, #mtpcsr, #mtpcd, #mtpcss, #mtpcn, #mtpc, #mtsppsr, #mtsppd, #mtsppss, #mtsppn, #mtspp, #mtps, #mtpr, #mtpu, #mtpl,
#asmr, #abmr, #atpcsr, #atpcd, #atpcss, #atpcn, #atpc, #atsppsr, #atsppd, #atsppss, #atsppn, #atspp, #atps, #atpr, #atpu, #atpl {
  font-weight: bold;
}

#note {
  border: 1px solid orange;
  font-weight: bold;
}

.info, .info td {
  text-align: center;
  padding: 0px 10px;
  border: 2px solid black;
  border-collapse: collapse;
}

JavaScript

var tpc = document.getElementById('tpc'); // Total Power Consumption

//Minimal
var msmr = document.getElementById('msmr'); // Solar Minimal Requirement
var mbmr = document.getElementById('mbmr'); // Battery Minimal Requirement
var mtpcsr = document.getElementById('mtpcsr'); // Total Power Consumption / SunRise (1h10m = 70s)
var mtpcd = document.getElementById('mtpcd'); // Total Power Consumption / Day (11h = 660s)
var mtpcss = document.getElementById('mtpcss'); // Total Power Consumption / SunSet (1h10m = 70s)
var mtpcn = document.getElementById('mtpcn'); // Total Power Consumption / Night (10h40m = 640s)
var mtpc = document.getElementById('mtpc'); // Total Power Consumption
var mtsppsr = document.getElementById('mtsppsr'); // Total Solar Power Produced / SunRise (1h10m = 70s)
var mtsppd = document.getElementById('mtsppd'); // Total Solar Power Produced / Day (11h = 660s)
var mtsppss = document.getElementById('mtsppss'); // Total Solar Power Produced / SunSet (1h10m = 70s)
var mtsppn = document.getElementById('mtsppn'); // Total Solar Power Produced / Night (10h40m = 640s)
var mtspp = document.getElementById('mtspp'); // Total Solar Power Produced
var mtps = document.getElementById('mtps'); // Total Power Stored when night starts
var mtpr = document.getElementById('mtpr'); // Total Power Required when night starts
var mtpu = document.getElementById('mtpu'); // Total Power Unused
var mtpl = document.getElementById('mtpl'); // Total Power Lost

var note = document.getElementById('note'); // Note! Over-capacity

//Advised
var asmr = document.getElementById('asmr'); // Solar Minimal Requirement
var abmr = document.getElementById('abmr'); // Battery Minimal Requirement
var atpcsr = document.getElementById('atpcsr'); // Total Power Consumption / SunRise (1h10m = 70s)
var atpcd = document.getElementById('atpcd'); // Total Power Consumption / Day (11h = 660s)
var atpcss = document.getElementById('atpcss'); // Total Power Consumption / SunSet (1h10m = 70s)
var atpcn =...