forked from WEB-IB-SS26/development-ib
58 lines
3.1 KiB
Markdown
58 lines
3.1 KiB
Markdown
# Ü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.
|
||
|
||
|
||
|
||
*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. |