GrünstromIndex

Nutzung via Javascript

by stromdao

HTML

<html>

  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://unpkg.com/gruenstromindex/public/js/main.js"></script>
  </head>

  <body>
    <div class="container" id="app">
      <h1>Beispiel Abruf des <a href="http://gruenstromindex.de/">GrünstromIndex</a> mit Javascript</h1>
      <form action="#" id="zipInput">
        <div class="input-group">
          <span class="input-group-text">Postleitzahl</span>
          <input class="form-control" id="fldZip" type="text" minlength="5" maxlength="5" required inputmode="numeric" />
          <button class="btn btn-primary" type="submit">Abrufen</button>
        </div>
      </form>
      <hr>
      <div id="result">

      </div>
    </div>
  </body>

</html>

JavaScript

$(document).ready(function() {

  const renderGSI = async function() {
    const r = await GSI.prediction($('#fldZip').val());
    let html = '<table class="table table-condensed">';
    html += '<tr><th>Zeit</th><th>GrünstromIndex</th><th>CO2/kWh</th></tr>';
    for (let i = 0; i < r.forecast.length; i++) {
      html += '<tr>';
      html += '<td>' + new Date(r.forecast[i].timeStamp).toLocaleString() + '</td>';
      html += '<td>' + r.forecast[i].gsi + '</td>';
      html += '<td>' + r.forecast[i].co2_g_standard + '</td>';
      html += '</tr>';
    }
    html += '</table>';
    $('#result').html(html);
  }

  $('#zipInput').on('submit', function(e) {
    e.preventDefault();
    renderGSI();
    return false;
  });

});