import React from "react";

import Navbar4 from "../components/navbar4";
import Footer15 from "../components/footer15";
import "./home.css";

const Data = (props) => {
  //JS Code

  return (
    <div className="home-container">
      <div className="home-navbar1">
        <Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
      </div>

      <div class="container">
        <div class="box">
          <h1>Wetterdaten abrufen</h1>
          <div class="filter">
            <label for="city">Stadt:</label>
            <input type="text" id="city" placeholder="Stadt" />
            <br />
            <label for="start">Startdatum:</label>
            <input type="date" id="start" value="2024-04-24" />
            <br />
            <label for="end">Enddatum:</label>
            <input type="date" id="end" value="2024-05-08" />
            <br />
            <label for="storage">Speicherort:</label>
            <select id="storage">
              <option value="local">Lokal</option>
              <option value="database">Datenbank</option>
            </select>
            <br />
            <label for="format">Datenformat:</label>
            <select id="format">
              <option value="json">JSON</option>
              <option value="csv">CSV</option>
              <option value="xml">XML</option>
            </select>
            <br />
            <button onclick="getData()">Daten abrufen</button>
          </div>
        </div>

        <div class="box">
          <h2>Wetterdaten</h2>
          <pre id="weatherData"></pre>
        </div>
      </div>

      <div className="home-footer11">
        <Footer15></Footer15>
      </div>
    </div>
  );
};

export default Data;