lab-development-imb/web/12/labor/12_aufgaben.md

# Übungsblatt 12

## 1. CSS-Übung: Box-Modell

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

## 2. CSS-Übung: Positionierung

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

## 3. CSS und Javascript: Adventskalender

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