# Ü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](workshop-anmeldung.html). Gerne können Sie dieses erweitern oder anpassen.
2. Sie können das folgende CSS-Stylesheet als Ausgangspunkt verwenden (freiwillig): [CSS-Stylesheet](styles_workshop.css). 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.

![Skizze mit Maßen](uebung01.png)

*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.

![Skizze mit Maßen](uebung02.png)

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