JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<main>
<form action="#" id="control">
<h2>Kundendienst</h2>
<fieldset class="kurz anrede"><legend>1. Anrede</legend>
<ul>
<li><label><input type="radio" name="anrede" checked value=""><span>Hallo</span></label></li>
<li><label><input type="radio" name="anrede" value="frau"><span>Frau</span></label></li>
<li><label><input type="radio" name="anrede" value="herr"><span>Herr</span></label></li>
<li><label><input type="radio" name="anrede" value="duh"><span>S.g.D&amp;H</span></label></li>
</ul>
</fieldset>
<fieldset class="nachname"><legend>2. Nachname des Kunden</legend>
<input type="text">
</fieldset>
<fieldset class="kurz anlass"><legend>Danke für...</legend>
<ul>
<li><label><input type="radio" name="anlass" checked data-anlass="Anfrage"><span>Anfrage</span></label></li>
<li><label><input type="radio" name="anlass" data-anlass="Antwort"><span>Antwort</span></label></li>
<li><label><input type="radio" name="anlass" data-anlass="Nachricht"><span>Nachricht</span></label></li>
</ul>
</fieldset>
<fieldset>
  <ul>
    <li><label><input type="radio" name="anliegen" value="reanf">Rechnungsanforderung</label></li>
    <li><label><input type="radio" name="anliegen" value="woist">Wo ist mein Paket?</label></li>
    <li><label><input type="radio" name="anliegen" value="geld">Ich will mein Geld zurück</label></li>
    <li><label><input type="radio" name="anliegen" value="falsch">Falsche Ware erhalten</label></li>
    <li><label><input type="radio" name="anliegen" value="defekt">Defekte Ware erhalten</label></li>
    <li><label><input type="radio" name="anliegen" value="blah">Problem 6</label></li>
    <li><label><input type="radio" name="anliegen" value="furz">Problem 7</label></li>
  </ul>
</fieldset>
<fieldset class="absender kurz">
  <ul>
    <li><label><input type="radio" name="signatur" data-absender="Karl Maier"><span>Karl Maier</span></label></li>
    <li><label><input type="radio" name="signatur" data-absender="Michael Döfchen"><span>Michael Döfchen</span></label></li>
...

CSS

main {
  display: grid;
  grid-template-columns: 25em 1fr;
  
}

#control {
  
}

#control h2 {
  font-size: 2rem;
  margin: 0;
}

#mustertext {
  border: 2px solid green;
}

fieldset {
  margin: 0;
  padding: 0.5em;
  user-select: none;
}
fieldset.kurz ul {
  display: flex;
  list-style: none;
}
fieldset ul {
  margin: 0;
  padding: 0;
}

fieldset.kurz input[type="radio"] {
  margin: 0;
  width: 0;
}

fieldset.kurz li {
  flex: 1 0 auto;
  margin-right: 0.2em;
}

fieldset.kurz li:last-of-type {
  margin-right: 0;
}
fieldset.kurz span {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0.2em 0;
  border: 1px solid #ffaa22;
  border-radius: 0.3em;
  background: linear-gradient(to bottom, #ffec64 0%, #ffaa22 100%);
}
fieldset.kurz input[type="radio"]:checked ~ span {
  background: linear-gradient(to bottom, #ffffe0 60%, #ffcaa2 100%);
}

.nachname input {
  width: 95%;
}

#mustertext {
  white-space: pre-wrap;
}

JavaScript

let control = document.getElementById("control");
control.addEventListener("input", updateBrief);
updateBrief();

function updateBrief() {
   let brief = getAnrede() + "\n\n" + 
                "vielen Dank für Ihre " + getAnlass() + ".\n\n" +
                getBrieftext() + "\n\n" +
                "Mit greundlichen Füßen\n\n" + 
                getAbsender() + "\n" + 
                "Versandhaus Nett & Lustig";
   document.getElementById("mustertext").textContent = brief;
   
   function getAnrede() {
      let anrede = control.querySelector(".anrede input:checked");
      let nachname = control.querySelector(".nachname input");
      if (!anrede || !nachname || !anrede.value) return "Hallo,";
      if (anrede.value == "frau") return "Sehr geehrte Frau " + nachname.value + ",";
      if (anrede.value == "herr") return "Sehr geehrter Herr " + nachname.value + ","
      if (anrede.value == "duh") return "Sehr geehrte Damen und Herren,";
      return "Hey du da!";
   }
   function getAnlass() {
      let anlass = control.querySelector(".anlass input:checked");
      if (!anlass) return "Nachricht";
      return anlass.dataset.anlass;
   }
   
   function getBrieftext() {
      return "Leider können wir Ihnen nicht helfen. Betrachten Sie Ihr Anliegen bitte als erledigt.";
   }
   
   function getAbsender() {
      let absender = control.querySelector(".absender input:checked");
      if (!absender) return "A. Nonym";
      return absender.dataset.absender;
   }

}