JSFiddle - React, Tailwind, and code Playground

by Dustin Jaacks

HTML

<h1>Mein Profil</h1>

<div id="status-list">
    <div class="status">Liebe Welt, heute geht's mir wundervoll!</div>
</div>

<label for="neue_statusmeldung">Das Input-Field:</label>

<form name="statusmeldung" method="post">
    <input type="text" name="neue_statusmeldung" id="neue_statusmeldung" placeholder="Neue Statusmeldung" />
    <input type="submit" value="Senden" />
</form>

CSS

body {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    background: #FAFAFA;
    padding: 20px;
}

h1 {
    margin: 0;
    padding: 0;
}

#status-list {
    margin: 20px 0;
}

.status {
    font-size: 17px;
    border: 1px solid #CCC;
    background: white;
    padding: 20px;
    margin-top: 10px;
}

input {
    font-size: 17px;
    padding: 5px;
}

JavaScript

// Wir suchen im Dokument nach einem Formular (form) mit dem name "statusmeldung"
var form = document.forms.statusmeldung;

// Wir weisen dem gefundenen Formular eine Funktion zu, die beim "submit" ausgelöst wird.
// Das Submit-Event wird beim Klick auf "Senden" und beim Tastendruck auf "Enter" im Input-Field ausgelöst.
form.onsubmit = function() {
    // Finde innerhalb des Formulars ein Input-Element mit dem namen "neue_statusmeldung" ...
    var input = form.neue_statusmeldung;
    
    // ... und lies den Inhalt des Inputs.
    var inhalt = input.value;
       
    // Erstelle ein neues HTML Element
    var elem = document.createElement("div");
    
    // Damit das neue Element richtig gestylt wird, benennen wir es mit einer Class.
    elem.className = "status";
    
    // Den Inhalt des neuen Elements definieren wir als den zuvor gefunden Inhalt des Inputs.
    elem.innerHTML = inhalt;
    
    // Suche die Liste mit alles Statusse/Stati – wie schreibt man das!?.
    // Finde diese Liste über die ID des Elements.
    var list = document.getElementById('status-list');
    
    // Füge der Liste das Element an.
    list.appendChild(elem);
    
    // Wenn die Statusmeldung erfolgreich unserer Liste hinzugefügt wurde, leere das Input für die nächste Eingabe
    input.value = '';
       
    // return false, damit das Formular nicht tatsächlich abgeschickt wird. Das kommt erst bei der Server-Client Kommunikation zum Einsatz.
    return false;
};