development-ib-fork/web/13/labor/13_aufgaben.md

Übungsblatt 13

Hinweise:

1. Aufgaben 1+2 werden erst im folgenden Labor besprochen und müssen abgegeben werden.
2. Aufgaben 3+4 werden im Labor bearbeitet und besprochen, daher ist für diese keine Abgabe erforderlich.

1. CSS und Javascript: Adventskalender

Abgabe erforderlich

Aufgabenstellung: Erstellen Sie einen einfachen Adventskalender in HTML, CSS und Javascript.

Arbeitsschritte

1. Erstellen Sie eine HTML-Seite mit der Überschrift "Adventskalender".
2. Es sollen 24 Kästchen (Türchen) auf der Webseite in ansprechenden/passenden Farben (Hintergrund und Rahmen) und Format zu sehen sein. Jedes Türchen trägt in der Mitte eine Nummer zwischen 1-24 als Inhalt.
3. Die Türchen werden so angeordnet, dass jedes Element links im Container ansetzt und die folgenden Elemente direkt daneben erscheinen, bis die verfügbare Breite erschöpft ist.
4. Beim Klicken auf ein Türchen wird zunächst geprüft, ob es überhaupt geöffnet werden darf (Türchen-Nummer mit heutigem Datum vergleichen).
5. Falls das Öffnen erlaubt ist, ändert sich die Hintergrundfarbe des Türchens und der Inhalt wird durch dieses Zeichen ausgetauscht: "\u{1F381}".
6. Falls das Öffnen noch nicht erlaubt ist, erscheint eine Meldung "Noch schläft das Türchen – wie ein Geschenk unter dem Baum.".

Hinweise

1. Die Kästchen dürfen auch dynamisch erzeugt werden (mit Javascript).
2. Für die Prüfung können Sie das Date-Objekt von Javascript verwenden.
3. Um einem DOM-Element dynamisch eine CSS-Klasse hinzufügen können Sie die classList-API in Javascript verwenden.

2. CSS-Übung

Abgabe erforderlich

Aufgabenstellung: Gestalten Sie das HTML-Formular zu Workshop-Anmeldung aus vorangegangen Übungsblättern individuell nach Ihren Ideen mit CSS.

Arbeitsschritte

1. Nehmen Sie folgendes HTML-Formular als Grundlage: Workshop-Anmeldung. Gerne können Sie dieses erweitern oder anpassen.
2. Sie können das folgende CSS-Stylesheet als Ausgangspunkt verwenden (freiwillig): CSS-Stylesheet. Hier sind ein paar Hilfestellungen zur Gestaltung von Checkbox, Radiobuttons und Select-Box bereits eingefügt (aus der Vorlesung nicht bekannt).
3. Ergänzen Sie das Stylesheet und ggf. das HTML-Dokument, so dass ein ansprechendes Design entsteht. (Umfang/Detailgrad und Stil wählen Sie selbst.)

3. CSS-Übung: Box-Modell

keine Abgabe erforderlich

Aufgabenstellung: Setzen Sie diese Skizze in HTML und CSS um. Alle wichtigen Maße und Angaben für Ihren <div>-Container sind vorgegeben.

Hinweis: Der gestrichelte Rahmen um den Text "Übung zum Box-Modell" dient nur der Veranschaulichung und soll in Ihrem Ergebnis NICHT angezeigt werden.

4. CSS-Übung: Positionierung

keine Abgabe erforderlich

Aufgabenstellung: Setzen Sie diese Skizze in HTML und CSS um. Alle wichtigen Maße und Angaben für die verschiedenen <div>-Container sind vorgegeben.

Hinweise

1. Sie dürfen 1cm in 1px darstellen.
2. Die Farben dürfen frei gewählt werden.