Styles und JavaScript‑Interaktionen für deine Web‑App
Erste Schritte: Styles und JavaScript‑Interaktionen für deine Web‑App: HTML / CSS / JS
Nachdem die PHP‑Logik steht, braucht deine Anwendung ein schickes Äußeres
und ein wenig Frontend‑Interaktivität.
Hier lernst du, wie du einfache CSS‑Styles definierst
und mit JavaScript DOM‑Elemente manipulierst –
ohne Framework‑Ballast, nur pures HTML/CSS/JS.
1. Grundgerüst – Einbinden von CSS & JS
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>TaskBoard</title> <!-- eigenes CSS --> <link rel="stylesheet" href="/assets/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- Seiteninhalt hier --> <!-- JavaScript erst nach dem Parsen laden --> <script src="/assets/app.js" defer></script> </body> </html>
Nutze dieses Muster immer dann, wenn ein <pre>‑Block HTML enthält –
so bleibt der Inhalt sichtbar und wird nicht von WordPress gefiltert.
- style.css und app.js liegen im public/assets/ Ordner.
- defer sorgt dafür, dass JS erst nach dem Parsen ausgeführt wird – kein Blocken.
2. CSS – Basis‑Styles & Layout
2.1 Farben, Typografie, Reset
/* assets/style.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, sans-serif;
line-height: 1.5;
background: #f4f6f8;
padding: 2rem;
color: #222;
}
h1 { margin-bottom: 1rem; }
a { color: #2563eb; text-decoration: none; }
button { cursor: pointer; }
2.2 Flex‑Layout für Task‑Spalten
.board {
display: flex;
gap: 1rem;
}
.column {
flex: 1;
background: #fff;
border-radius: .5rem;
padding: 1rem;
min-height: 60vh;
}
.card {
background: #fefefe;
border: 1px solid #e5e7eb;
border-radius: .3rem;
padding: .75rem;
margin-bottom: .5rem;
}
.status-open { border-left: 4px solid #f59e0b; } /* orange */
.status-doing { border-left: 4px solid #3b82f6; } /* blue */
.status-done { border-left: 4px solid #10b981; } /* green */
2.3 Responsives Verhalten
@media (max-width: 800px) {
.board { flex-direction: column; }
}
Bei schmalen Bildschirmen (max‑width 800px) stapeln sich die Spalten
untereinander – perfekt fürs Smartphone.
3. JavaScript – DOM‑Interaktion
3.1 Aufgaben live zwischen Spalten verschieben (Drag & Drop Mini)
// assets/app.js
document.addEventListener('DOMContentLoaded', () => {
const cards = document.querySelectorAll('.card');
const columns = document.querySelectorAll('.column');
cards.forEach(card => {
card.draggable = true;
card.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', card.dataset.id);
card.classList.add('dragging');
});
card.addEventListener('dragend', () => card.classList.remove('dragging'));
});
columns.forEach(col => {
col.addEventListener('dragover', e => e.preventDefault());
col.addEventListener('drop', async e => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
const card = document.querySelector(`.card[data-id="${id}"]`);
col.appendChild(card);
// Ajax‑Update an PHP‑Backend
await fetch('/task/' + id + '/update', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({ status: col.dataset.status })
});
});
});
});
- Jede Card trägt data-id; jede Column data-status.
- Beim Drop wird per fetch die neue Spalte an den Controller gemeldet.
- Funktioniert ohne externe Library; progressive Enhancement.
3.2 Form‑Validation (Client‑Side)
function validateTaskForm() {
const title = document.querySelector('#title');
if (!title.value.trim()) {
alert('Titel darf nicht leer sein');
title.focus();
return false;
}
return true;
}
/* in