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.

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.

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.