Aufgaben

HTML

• Bei h1 ändere Summenrechner in Taschenrechner um.
• Bei input ändere beim Platzhalter (placeholder) Zahl eintippen in Wert eintippen um.
• Bei button ändere Berechne! in Kalkuliere! um

CSS + HTML

• Füge die Schrift Cabin in HTML hinzu. Kopiere das Link-Element von Webfonts.
• Ändere die Schriftart der Überschrift von Schoolbell nach Cabin.
• Suche dir drei Farben von der Webseite ColorCodes aus. Zum Beispiel: ein normales Rot, ein Hellrot und ein Dunkelrot.
• Ändere die Farben im CSS Bereich. Entweder verwendest du den Farbcode #abcdef (geht immer) oder den Farbnamen (geht nicht immer).
• Ändere den Hintergrund (background) von body und h1 in die normale Farbe.
• Ändere den Hintergrund von .Zeile in die helle Farbe.
• Ändere die Schriftfarbe (color) von in die dunkle Farbe.
• Ändere den Rahmen (border) bei button in die dunkle Farbe.
• Versuche Button farblich anzupassen. Bedenke auch button:hover!
• Verändere bei .Tabelle die Breite (width) von 500px (Pixel) auf 700.
• Verändere bei .Zeile die Polsterung (padding) auf 3%.
• Nimm selbstständig Änderungen vor und beobachte, was passiert!

JavaScript

• Bei results sollen die Variablen a und b subtrahiert werden.
• Bei results sollen die Variablen a und b multipliziert werden.
• Bei results sollen die Variablen a und b dividiert werden.
• Bei results sollen die Variablen a und b addiert und verzehnfacht werden.

JavaScript + HTML

• Bei HTML füge eine weiteres div-Element mit input-Element hinzu.
1. Kopiere div class=Zeile von Summand 1 inklusive dem input-Element.
2. Du musst auch das /div nach dem input-Element kopieren!
3. Füge die Kopie nach der Zeile von Summand 2 ein.
4. Ändere bei der kopierten Zeile Summand 1 in Summand 3 um. Mach das auch bei id=Summand_1, indem du die Änderung auf id=Summand_3 vornimmst.
• Füge bei button bei Summe(...) den dritten Summanden hinzu.
1. Nach document.getElementById('Summand_2').value mach einen Beistrich.
2. Füge nach dem Beistrich document.getElementById('Summand_3').value hinzu.
• Jetzt ändere bei JavaScript Summe(sum1, sum2) nach Summe(sum1, sum2, sum3).
• Wandle sum3 in eine Zahl um, indem du schreibst let c = Number(sum3).
• Nun ergänze result mit der neuen Variable c!
• Probiere eine Wachstumsfunktion, indem Summand 1 = k, Summand 2 = x und Summand 3 = d ist. Zum Beispiel: Anfahrtskosten 30€, Kosten pro Stunde 20€ und Anzahl der Stunden = 4h.