HTML Code Support für ein Formular

  • moebelzeile

    (@moebelzeile)


    vor 2 Jahren, 6 Monaten

    Hallo liebes Netzwerk,

    wir haben auf der Seite das gute Formular mit einem HTML Code eingebunden, allerdings bekommen wir den Code leider nicht dahingehend bearbeitet, dass das Element zentriert ist und die Buttonfarbe, sowie soll das Tortendiagramm angepasst werden.

    Es soll also folgendes geändert werden:
    1. Element auf der Seite zentrieren.
    2. Die Buttonfarbe soll von dem Lila zu #EC860B der Farbe geändert werden.
    3. Über dem Ergebnis des Rechners soll über den jeweiligen Säulen der Geldwert gezeigt werden.

    Vielen vielen Dank schon einmal im Voraus!

    Anbei der HTML Code:

    <!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,">
<title>Baumaschinen Finanzierungs- und Leasingrechner</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="w-96 p-6 bg-white rounded-lg shadow-md">
  <h1 class="text-2xl font-semibold mb-4">Baumaschinen Finanzierungs- und Leasingrechner</h1>
  <form id="rechner">
    <div class="mb-4">
      <label for="betrag" class="block text-sm font-medium text-gray-700">Betrag (in Euro):</label>
      <input type="number" id="betrag" name="betrag" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required>
    </div>
    <div class="mb-4">
      <label for="anzahlung" class="block text-sm font-medium text-gray-700">Anzahlung (in Euro):</label>
      <input type="number" id="anzahlung" name="anzahlung" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required>
    </div>
    <div class="mb-4">
      <label for="zinssatz" class="block text-sm font-medium text-gray-700">Zinssatz (in Prozent):</label>
      <input type="number" id="zinssatz" name="zinssatz" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required>
    </div>
    <div class="mb-4">
      <label for="laufzeit" class="block text-sm font-medium text-gray-700">Laufzeit (in Monaten):</label>
      <select id="laufzeit" name="laufzeit" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
        <!-- Füge Optionen für Laufzeit hinzu -->
        <option value="12">12 Monate</option>
        <option value="24">24 Monate</option>
        <option value="36">36 Monate</option>
        <option value="48">48 Monate</option>
        <option value="60">60 Monate</option>
        <option value="72">72 Monate</option>
    <option value="84">84 Monate</option>
    <option value="96">96 Monate</option>
    <option value="108">108 Monate</option>
        <option value="120">120 Monate</option>
      </select>
    </div>
    <button type="button" onclick="berechneRechnungen()" class="w-full bg-indigo-500 text-white py-2 px-4 rounded hover:bg-indigo-600 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50"style=>Berechnen</button>

  <div id="ergebnis" style="display: none;">
    <h2 class="text-xl font-semibold mt-6 mb-3">Finanzierungs- und Leasingrechner Ergebnisse</h2>
    <canvas id="diagramm" width="400" height="200"></canvas>
  </div>
</div>

<script>
function berechneRechnungen() {
  const betrag = parseFloat(document.getElementById("betrag").value);
  const anzahlung = parseFloat(document.getElementById("anzahlung").value);
  const zinssatz = parseFloat(document.getElementById("zinssatz").value) / 100;
  const laufzeit = parseInt(document.getElementById("laufzeit").value);

  const darlehensbetrag = betrag - anzahlung;
  const monatlicheRate = (darlehensbetrag * zinssatz + darlehensbetrag) / laufzeit;
  const gesamtbetrag = monatlicheRate * laufzeit;
  
  zeichneDiagramm(monatlicheRate, darlehensbetrag, gesamtbetrag);
  
  document.getElementById("ergebnis").style.display = "block";
}

function zeichneDiagramm(monatlicheRate, darlehensbetrag, gesamtbetragLeasing) {
  const ctx = document.getElementById("diagramm").getContext("2d");
  
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Monatliche Rate', 'Darlehensbetrag', 'Gesamtbetrag (Leasing)'],
      datasets: [{
        label: 'Betrag in Euro',
        data: [monatlicheRate, darlehensbetrag, gesamtbetragLeasing],
        backgroundColor: ['#ff9999', '#66ff66', '#9999ff']
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
}
</script>
</body>
</html>

    <canvas width=“400″ height=“200″></canvas>

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 1 Antwort (von insgesamt 1)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 2 Jahren, 6 Monaten

    Hallo,
    du kannst die Farbe des Buttons unter Design > Customizer > Zusätzliches CSS wie folgt eingeben:

    button.w-full.bg-indigo-500.text-white.py-2.px-4.rounded.hover\:bg-indigo-600.focus\:outline-none.focus\:ring.focus\:ring-indigo-200.focus\:ring-opacity-50 {
    background-color: #EC860B;
}

    Das ist aber an sich die einzige Sache, die ich hier bei einem kurzen Blick sehe.

    Grundsätzlich hat das Problem aber eher etwas mit HTML zu tun. Wir bieten hier (übrigens in unserer Freizeit) in erster Linie Hilfe bei Anwendungsproblemen rund um WordPress an. Bei Problemen mit HTML ist dieses Forum eher die falsche Adresse.
    Oder du musst dir einen Dienstleister suchen, der sich damit beschäftigt.
    Sicherheitshalber: Jobangebote (dazu gehören auch Anfragen, wer sich kostenlos an einem Projekt beteiligt) sind hier im Forum ausdrücklich unerwünscht.

    Viele Grüße
    Hans-Gerd

    • Diese Antwort wurde vor 2 Jahren, 6 Monaten von Hans-Gerd Gerhards geändert. Grund: Ergänzung
Ansicht von 1 Antwort (von insgesamt 1)

Das Thema „HTML Code Support für ein Formular“ ist für neue Antworten geschlossen.

Schlagwörter