November-Workshop
Heute findet ein Workshop zu den bereits behandelten Kursinhalten zu HTML, CSS und JavaScript statt! Die Bearbeitungszeit endet um 11:30 Uhr, bitte laden Sie Ihre Lösung in der Gruppe bis spätestens 11:40 Uhr in dem Ilias-Ordner Aufgaben/Workshop hoch.
Aufgabe
Erstellen Sie in Kleingruppen eine Website als Portfolio zum Workshop mit Taschenrechnerfunktion. Gucken Sie sich dazu zunächst das Beispielvideo an.
Zeiteinteilung
Vorgesehen ist, dass Sie die Hälfte der Zeit für HTML und CSS und die andere Hälfte für JavaScript verwenden.
HTML
Erstellen Sie eine Website als Portfolio zum Workshop, auf der sich mindestens folgendes befindet:
- Eine Liste mit Auflistungszeichen die die Namen aller Gruppenmitglieder beinhaltet
- Das Bild des BSI-Kurses auf der Lehre-IDH-Seite (mittig positioniert)
- Überschrift
- Eine relative und absolute Verlinkung
CSS
- Runden Sie die Ecken des Bildes ab und passen Sie die Größe an
- Gestalten Sie den Hintergrund beliebig
- Geben Sie einer Containerbox ein Hintergrundbild
- (und alles, was Ihnen sonst noch einfällt :) )
JavaScript
- Beim Laden der Website erscheint ein Entscheidungsdialog, der fragt ob man rechen will oder nicht
- Wenn sich der Nutzer dazu entscheidet zu rechnen, hat er die Möglichkeit, zwei beliebige Zahlen miteinander zu multiplizieren
- Zuerst hat er die Möglichkeit, zwei beliebige Zahlen nacheinander in zwei Eingabefelder einzugeben
- Das Ergebnis wird in Form eines Pop-up-Fensters ausgegeben, welches dem Nutzer zusammen mit dem Text ‘Das Ergebnis lautet:‘ das Ergebnis der Multiplikation mitteilt
- Zeigen Sie den Programmablauf außerdem in der Konsole, indem Sie die Zahleneingabe und das Ergebnis durch console.log sichtbar machen
Viel Erfolg und Spaß!
Abgaben
- Workshopaufgabe: bis spätestens 11:40 Uhr in dem Ilias-Ordner Aufgaben/Workshop (siehe oben). Abgabe als Gruppe, wie ihr im Workshop gearbeitet habt.
- Hausaufgabe: als Nachbereitung in Ilias-Ordner Aufgaben/Hausaufgaben (wie alle anderen Hausaufgaben). Abgabe entweder (1) in der Workshop-Gruppe, (2) mit einzelnen Mitgliedern der Workshop-Gruppe oder einzeln.
Beispiel-Video für die JS-Funktion