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 Einzelarbeit bis spätestens 11:40 Uhr in dem Ilias-Ordner Aufgaben/Workshop hoch.

Aufgabe

Erstellen Sie in Einzelarbeit 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 euren Studienfächern
  • 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ß!

Sternchen-Aufgabe: Versuchen Sie doch mal, dass der User sich die Rechenart aussuchen kann!

Abgaben

  • Workshopaufgabe: bis spätestens 11:40 Uhr in dem Ilias-Ordner Aufgaben/Workshop (siehe oben).
  • Hausaufgabe: als Nachbereitung in Ilias-Ordner Aufgaben/Hausaufgaben (wie alle anderen Hausaufgaben).

Beispiel-Video für die JS-Funktion