Category
📚
LearningTranscript
00:00:00willkommen zum siebten kurstermin diese woche wie angekündigt virtuell und hauptziel ist dass
00:00:09man gemeinsam in das neue assignment einsteigen und noch mal paar dinge besprechen die wichtig
00:00:15sind für das umsetzen von diesem assignment die kurswebseite ist schon abgedatet 2. mai heute und
00:00:25ihr findet beim 29 4 für diese woche da die die seite für den heutigen termin wo ich mir alles
00:00:36kurz zusammengefasst habe wichtig fürs assignment sind die dinge die mehr oder weniger im lecture
00:00:4905 und lecture 06 besprochen haben also wie man das document object model quasi bearbeitet und wie
00:00:59man für dies klassen verwendet und immer für die klassen event händler dekoriert callback funktions
00:01:09definiert das haben wir uns bei dem converter beispiel angeschaut ich hab das im assignment
00:01:14nochmal genau zusammengeschrieben und letztes mal vor die osterferien haben wir uns gemeinsam
00:01:20angeschaut wie man zwischen zwei klassen quasi kommunizieren kann für dies quasi gibt es das
00:01:27beispiel und ich habe das damals glaube ich schon erwähnt es ist mehr oder weniger eine blaupause für
00:01:35das jetzige assignment sehr umfangreich das heißt die deadline ist sehr bewusst gewählt mit 20.05 also
00:01:46ob heute mehr oder weniger 18 tage zeit wobei wir sicher dann nächsten dienstag noch mal kurz zeit
00:01:55dafür verwenden werden und auch dann am 13.05 auch noch mehr zeit haben dass wir gewisse dinge klären uns
00:02:03fehlt nur ein teil dem er nächste woche besprechen lässt also css die styling von webseiten bei instieg
00:02:10damit der task 4 von diesem assignment dann für euch gelöst werden kann diese segment 05 ist verlinkt und
00:02:21ist jetzt quasi auch eine neue referenz auf der webseite verfügbar dass spezifisch die befehle für
00:02:29das manipulieren vom document object model im browser über javascript zusammenfasst die
00:02:37wesentlichen dinge also wir sind mit 05 deadline 20.05 das ist dann am kalender schaut der dienstag noch
00:02:52unseren kurstermin am abend bitte bis dahin hätte ich gern dass es jeder umsetzt die segment 04 haben
00:03:00jetzt richtig lange phase gehabt wo das möglich war das zu machen sollte jetzt jeder gemacht haben
00:03:05schon langsam wird es ein bisschen anspruchsvoller wir schauen trotzdem dass wir probieren dass wir alle
00:03:11im boot behalten und dass das jeder irgendwie schaffen sollte damit zusammengefasst aufbauend auf die beiden
00:03:21letzten kurstermine dieses assignment kurz hinschreiben niemals in der html benutzen da haben wir quasi die textmethode
00:03:33text content verwendet gibt es einfach probleme mit inner html sicherheitsrisiken und das war letztes mal wo man diese liste
00:03:41gehabt haben und listen items hinzugefügt haben mit der erweiterung mit so löschbuttons ich hoffe ihr könnt euch noch daran erinnern
00:03:51also diese callback function haben wir da erklärt beide die die code beispiele die was ich dann im kurs vorprogrammiert habe die sind da
00:04:02aus zip datei verlinkt schaut es dann einmal nach wie wir das gemacht haben das ist ganz wichtig
00:04:08so und ab diesem assignment jetzt bin ich sehr streng was das was die selbstständigkeit betrifft diese collaboration guidelines
00:04:21die habe ich erfunden ich habe auch nicht diese assignments erfunden und auch nicht die slides aber ich finde wie das gemacht ist
00:04:29ist sehr schlüssig und sehr wertvoll und vor allem was ich wertvoll finde sind diese collaboration guidelines
00:04:36und ich erwarte dass sich das jeder durchschaut und auch berücksichtigt also wenn das irgendwer von
00:04:42jemandem kopiert oder gemeinsam macht oder KI verwendet und das nicht zitiert dann gibt es sehr massive punkte abzüge
00:04:51das sind quasi diese guidelines es gibt quasi die hilfestellung die es erlaubt und keine erwähnung in
00:05:04code verwendet also können sie jederzeit mit einem kommentar irgendwo was anmerken und für mich
00:05:10lesbar machen damit ich weiß wo ihr das her habt natürlich ist es erlaubt dass ihr auf
00:05:20irgendwelche dokuseiten quasi code anschaut und auf basis für den code weiter programmiert aber
00:05:26das selber machen nicht mit anderen und auch nicht raus zu kopieren und die gröbsten dinge sind was nicht erlaubt
00:05:38ist antworten oder code von anderen kopieren den code von anderen durchlesen und dann auf basis dessen was man sich
00:05:47angeschaut hat oder schicken lassen und auf basis dessen dann das selber ausprogrammieren
00:05:53schon mal gut wenn man irgendein problem hat und dann vielleicht einmal kurz gefragt wie hast du das gemacht
00:05:59das ist aber weniger wie wenn man den code vom anderen durch schaut und dann genauso programmiert wie der
00:06:07das ist wie eine kopie von den
00:06:11ja KI ist auch ein Thema natürlich also KI generierter code ist nicht sinnvoll bei dem assignment
00:06:19ihr sollt es selber programmieren und das ist meine Hauptaufgabe quasi als Kursleiter sicherzustellen dass ihr selber
00:06:25programmiert und dabei was lernt also KI ist natürlich ein nützliches werkzeug und ihr werdet später auch KI verwenden
00:06:31ich verwende jetzt KI aber jetzt für so einen Grundlagenkurs da geht es darum
00:06:35dass man richtig selber mal einen Code ausprogrammiert damit man die Konzepte die was dahinter steckt
00:06:40vielleicht ein bisschen verinnerlicht und dann auch KI generierten Code besser verstehen kann
00:06:45ja gemeinsam programmieren ist nicht erlaubt und natürlich wenn ich sehe dass es unter einem Code austauscht
00:06:56ist der der was den Code zur Verfügung steht hat genauso ist es genauso nicht erlaubt wie wenn man den Code
00:07:02von einem anderen weiterverwendet
00:07:04lest euch das bitte durch
00:07:06steht da
00:07:08und berücksichtigt das
00:07:10mir ist jetzt ganz wichtig
00:07:12dass
00:07:14ihr das anhaltet
00:07:16bitte
00:07:20so stellen wir mal das mit der KI
00:07:22KI generierter Code ist nicht erlaubt
00:07:24also
00:07:26bitte nicht verwenden
00:07:28selber programmieren
00:07:30man kann sich vielleicht einmal anschauen wie eine KI was programmiert aber
00:07:34ist jetzt in dem Kontext auch nicht so sinnvoll
00:07:40also bitte
00:07:44berücksichtigen
00:07:46Ziel von diesem Assignment ist dass wir ein sogenanntes Taskboard erstellen
00:07:52wo man quasi drei Spalten hat
00:07:54wo man Aufgaben
00:07:58kategorisiert
00:08:00und wir sollten das quasi umsetzen
00:08:04für uns jetzt heute sind die Programmierteile das wichtigste
00:08:08wir werden zwar ein bisschen was layoutieren
00:08:12im vierten Task
00:08:14aber das ist nicht der Hauptpunkt in dem Assignment
00:08:16das kommt dann in Teil 2 noch
00:08:18wenn wir fertig sind
00:08:20wenn wir fertig sind
00:08:22sollte das jetzt irgendwie
00:08:24in dem Screenshot dargestellt
00:08:26ausschauen
00:08:28man sieht jetzt schon vom layout her
00:08:30nicht sehr anspruchsvoll
00:08:32aber jetzt von der Logik
00:08:34die was im Hintergrund mitprogrammiert werden muss
00:08:36ist ja schon einiges zum umsetzen
00:08:38wir haben drei Spalten
00:08:40bei uns sind das jetzt quasi untereinander angeordnet
00:08:42weil das machen wir dann erst im zweiten Schritt
00:08:44wenn wir die CSS Grundloggen gelernt haben
00:08:48jeder Task hat eine Überschrift
00:08:50eine Kategorie
00:08:52To-Do, Doing und Done
00:08:54und Text
00:08:56und jeden Task kann man quasi manipulieren, verschieben, löschen oder editieren
00:09:00oben ist dann quasi die Box
00:09:04wo man ein Task hinzufügen kann
00:09:06genau
00:09:08alles was hier zum Schnelldurchlaufen dazu ist
00:09:10dann natürlich sehr detailliert beschrieben für euch
00:09:14für euch der erste Schritt ist jetzt bitte
00:09:18dass ihr das Assignment von Github Classroom runterladet
00:09:24im Visual Studio Code
00:09:26öffnet es
00:09:28und
00:09:30dann die
00:09:32benötigten
00:09:34Bibliotheken installiert
00:09:36wenn ihr das Assignment dann runtergeladen habt
00:09:48wie immer
00:09:50öffnen in Visual Studio Code
00:09:52und
00:09:54mit
00:09:56npm install
00:09:58die benötigten
00:10:02Pakete noch installieren
00:10:04und
00:10:10im zweiten Schritt
00:10:24können wir dann das Projekt
00:10:26mit
00:10:28npm
00:10:30start
00:10:32den Server starten
00:10:34und das Projekt quasi
00:10:36öffnen
00:10:38so
00:10:40das Projekt läuft jetzt
00:10:42Localhost
00:10:44Port
00:10:461930
00:10:48Steuerung
00:10:50Maustaste
00:10:52und wir können es öffnen
00:10:54sehen
00:10:56jetzt sieht man da
00:10:58das ist das Grundgerüst
00:11:00ist für euch schon vorbereitet
00:11:02wir haben
00:11:04wir haben
00:11:06die drei Kategorien
00:11:08und haben da oben
00:11:10einen Titel
00:11:12den was wir eingeben wollen
00:11:14eine Farbe
00:11:16und dann wenn wir auf Add drucken
00:11:18dann sollte es da unten eingefügt werden
00:11:20das ist
00:11:22an die letzte Einheit
00:11:24da haben wir genau sowas gemacht
00:11:26also wir haben
00:11:28einen Add-Button gehabt
00:11:30wir haben Items mit Beschreibung gehabt
00:11:32und haben die hinzugefügt zu einer Liste
00:11:34und das sind zwar drei Listen
00:11:36aber das ist so ähnlich
00:11:38drei Kategorien
00:11:40im Public Follow drinnen
00:11:42sind die vorbereiteten
00:11:44Dateien
00:11:45ihr kennt das mittlerweile schon
00:11:46Index
00:11:47was wir uns gerade angeschaut haben
00:11:49und
00:11:50ich erkläre ganz kurz noch was
00:11:52es gibt einen Teil
00:11:56den habt ihr so vielleicht noch nicht gesehen
00:12:04und zwar das ist da unten
00:12:06ob Zeile 38
00:12:08da steht
00:12:09Template Card
00:12:10to be cloned in Javascript
00:12:12also den Text da
00:12:14Artikel Class
00:12:15Template Card
00:12:16wir besprechen das dann nächsten Dienstag nochmal
00:12:18wenn wir jetzt zurückschauen
00:12:20auf unsere Seiten
00:12:22man sieht das da nicht
00:12:24ist jetzt Absicht
00:12:25ist nämlich ein Teil
00:12:26dem was wir
00:12:28duplizieren wollen
00:12:29und jetzt wenn wir
00:12:30einen neuen Task hinzufügen
00:12:32ist das unser
00:12:34Grundgerüst
00:12:35duplizieren
00:12:36und dann aus neuen Task
00:12:37einfügen
00:12:38deswegen ist das da
00:12:39und
00:12:40man sieht jetzt eine Klasse
00:12:42die Klasse
00:12:43ist Template Card
00:12:44und
00:12:45ab nächster Woche reden wir
00:12:47über das layoutieren
00:12:48und
00:12:49wenn wir uns jetzt
00:12:50dieses Style Sheet anschauen
00:12:52ist das jetzt noch sehr
00:12:54sehr leer
00:12:55der To-Do-Tite ist da
00:12:56wo es irgendwo rein sollt
00:12:58auf alle Fälle
00:12:59haben wir da
00:13:00ein Klasse Template
00:13:01und eine Klasse Hidden
00:13:03und auf diese beiden Klassen
00:13:05gibt es eine Eigenschaft
00:13:06da steht Display None
00:13:08also wenn wir darüber vor
00:13:09dieser Beschreibung da
00:13:10dass
00:13:12es einfach nicht dargestellt wird
00:13:13es ist zwar da
00:13:14aber der Browser
00:13:16steht es nicht da
00:13:17also wir haben
00:13:18Klasse Template
00:13:20Abstand K
00:13:21das sind zwei Klassen
00:13:22diese
00:13:24dieser Artikel
00:13:27hat quasi
00:13:28Klasse Template
00:13:29damit man es gerade nicht sieht
00:13:30wenn man das wegnehmen würde
00:13:32dann würde man es sehen
00:13:33und es hat nochmal die Klasse Card
00:13:34aber
00:13:35das besprechen wir dann ab
00:13:36nächster Woche
00:13:37ein bisschen mehr
00:13:38dann haben wir die drei
00:13:39Editier Button
00:13:40also die drei Buttons
00:13:41zum
00:13:42zum modifizieren
00:13:43wo wir es verschirmen wollen
00:13:44löschen wollen
00:13:45oder editieren wollen
00:13:46also wenn wir auf anfangen
00:13:47die Buttons klicken
00:13:48das ist dann quasi Task
00:13:53zwei, drei
00:13:55wo wir dann
00:13:56wenn man einen bestehenden Task hat
00:13:57wo wir den verändern können
00:14:00mit Icons und so weiter
00:14:05in der Index Datei
00:14:07ich habe das schon öfter erklärt
00:14:09und da sieht man es jetzt
00:14:10ein bisschen klarer einmal
00:14:11wir haben
00:14:13unser
00:14:14Index
00:14:15ist quasi die
00:14:16die
00:14:17die Einsprung Datei
00:14:18für den ganzen
00:14:19Javascript Code
00:14:20und da drinnen
00:14:21werden quasi die ganzen
00:14:22Importe
00:14:23organisiert
00:14:25das heißt
00:14:26den Index
00:14:27HTML drinnen
00:14:28wo wir ganz oben
00:14:29im Code schauen
00:14:30wird genau
00:14:31eine Javascript Datei
00:14:32importiert
00:14:33und die erledigt für uns
00:14:35das Importieren
00:14:36von allen anderen
00:14:37Javascript
00:14:38Code Teile
00:14:39die was relevant sind
00:14:40für
00:14:41die aktuelle Seite
00:14:43also Index.js
00:14:45Einsprung
00:14:46ist ein Modul
00:14:47da drinnen
00:14:51importieren wir dann
00:14:52von der
00:14:54App.js
00:14:56die App
00:14:57das ist quasi
00:14:58unsere
00:14:59Klasse
00:15:01die die Logik
00:15:02organisiert
00:15:03für das Taskboard
00:15:05und was wir dann
00:15:06dann
00:15:07das habe ich mir erklärt
00:15:08am Anfang
00:15:09eine Funktion
00:15:10schon öfter
00:15:11gesagt
00:15:12Funktionen
00:15:13kann man meistens mit einer
00:15:14Konstante deklarieren
00:15:15weil die sollten sich
00:15:16eigentlich nicht ändern
00:15:17deswegen kann man es
00:15:18als Konstanten deklarieren
00:15:19da drinnen
00:15:20wird einfach eine neue
00:15:21App
00:15:22instanziert
00:15:23und dann werden
00:15:25dort
00:15:26zur Veranschaulichung
00:15:27werden
00:15:28drei
00:15:29sichern
00:15:30Karten
00:15:32also zwei sichern
00:15:33Karten hinzugefügt
00:15:34App
00:15:36add card
00:15:37doing
00:15:38red
00:15:39glass
00:15:40und die Form
00:15:41und da unten
00:15:42wird dann
00:15:43von einer Karte
00:15:44noch
00:15:45die description
00:15:46verändert
00:15:47also ein bisschen
00:15:48eine Code ist
00:15:49schon vorgefügt
00:15:50und momentan
00:15:51ist es halt so
00:15:52dass da drinnen
00:15:53noch nichts passiert
00:15:54also wenn man jetzt
00:15:55auf App.js schaut
00:15:56dann haben wir
00:15:57da jetzt
00:15:58ich habe gesagt
00:15:59von denen wird jetzt
00:16:00eine Instanz
00:16:01erzeugt
00:16:02beim Start
00:16:03beim Aufruf
00:16:05von der Index.html
00:16:06aber da drinnen
00:16:07ist noch alles leer
00:16:08wir haben jetzt
00:16:09dieses add card
00:16:10das heißt es gibt keinen Fehler
00:16:11wenn es aufgerufen wird
00:16:12aber es passiert auch nichts
00:16:13weil da drinnen
00:16:14nichts steht
00:16:15also unsere Aufgabe
00:16:16und von der
00:16:17Grundstruktur
00:16:18ist es jetzt schon so
00:16:19gemacht
00:16:20wie wir es in den Lectures
00:16:21besprochen haben
00:16:22bei card drinnen
00:16:24haben wir noch
00:16:26schon vorgefertigte
00:16:28Funktionen
00:16:30für einzelne Instanz
00:16:32von so einem Task
00:16:34das heißt wir haben
00:16:35einen Titel
00:16:36und eine Farbe
00:16:37wenn wir eine neue
00:16:38Instanz erzeugen
00:16:39wir wollen es
00:16:40zu einer gewissen
00:16:41Spalte verschieben
00:16:42bei uns sind jetzt
00:16:43vertikal angeordnet
00:16:45und
00:16:46seht die Description
00:16:47da ist schon die Variable
00:16:48drinnen
00:16:49der Parameter
00:16:50aber es passiert nichts
00:16:51also kurz nochmal zurück
00:16:53wenn man jetzt
00:16:55in index.js nachschaut
00:16:56wird da die App
00:16:57instanziert
00:16:58es werden ein paar
00:16:59Funktionsaufrufe gemacht
00:17:01aber die Funktionen
00:17:02sind derweil
00:17:03noch leer
00:17:04sobald wir das mit
00:17:05Leben befüllen anfangen
00:17:06sobald es auch
00:17:07ein bisschen Leben
00:17:08auf der
00:17:09Indexseite
00:17:10sichtbar sein
00:17:11also man kann dann
00:17:13quasi da drinnen
00:17:14wenn es sich so weit
00:17:15sind
00:17:16schreibt es ein bisschen
00:17:17um
00:17:18und fügt ein paar
00:17:19eigene Tasks ein
00:17:20damit man das nicht
00:17:21immer wieder
00:17:22rein machen muss
00:17:23wenn man die Seite
00:17:24neu lädt
00:17:25quasi wie das Handy
00:17:27schein tippen
00:17:28für irgendwelche
00:17:29Eingaben
00:17:30damit man es nicht mehr
00:17:31macht
00:17:32dann machen wir es
00:17:33programmiert man es
00:17:34da quasi aus
00:17:37ok
00:17:38schauen wir nochmal zurück
00:17:39zu unserem
00:17:40assignment
00:17:41zur Aufgabenstellung
00:17:48erste Aufgabe
00:17:49wir haben das jetzt
00:17:50schon kurz durchgeschaut
00:17:51gemeinsam
00:17:52damit wir das ein bisschen
00:17:53verstehen haben
00:17:54quasi unser Index
00:17:56HTML-File
00:17:57und unser Index
00:17:58JavaScript-File
00:17:59im Index
00:18:00JavaScript-File
00:18:01wird die
00:18:02App importiert
00:18:03eine Instanz
00:18:04erzeugt
00:18:05es werden jetzt
00:18:06auch schon
00:18:07einzelne Karten
00:18:08erzeugt
00:18:09aber
00:18:10der Code
00:18:13ist noch nicht
00:18:14so ausprogrammiert
00:18:15dass das dann
00:18:16im Document-Object-Model
00:18:17hinzugefügt wird
00:18:19wenn wir jetzt
00:18:22bei App
00:18:23jetzt können wir schon
00:18:24ein bisschen rein
00:18:25Add Card
00:18:26aufrufen
00:18:27sowie
00:18:28in
00:18:30Index.js
00:18:33Zeile 7
00:18:34da wird jetzt
00:18:35mit
00:18:36die drei
00:18:37Argumente
00:18:38eine neue Karte
00:18:39erzeugt werden
00:18:40dann
00:18:42dann
00:18:43sollt
00:18:44eine neue Karte
00:18:45erzeugt werden
00:18:46und
00:18:47hinzugefügt werden
00:18:49und
00:18:50zwar
00:18:51wohin
00:18:52da vorne
00:18:53das erste ist die Spalte
00:18:54entweder
00:18:55zu
00:18:56zu
00:18:57zu
00:18:58doing
00:18:59oder zu dann
00:19:00drei Möglichkeiten
00:19:01haben wir da
00:19:02und
00:19:04wenn das fertig ist
00:19:06wird eine Instanz
00:19:07zurückliefert
00:19:08ganz wichtig für uns
00:19:09also Add Card liefert
00:19:10am Ende eine Instanz
00:19:11zurück
00:19:12wenn wir uns
00:19:14Card anschauen
00:19:15da drinnen haben wir den
00:19:16Konstruktor
00:19:17die sind schon so ausprogrammiert
00:19:18und da ist
00:19:19quasi die Beschreibung
00:19:20wo es passiert wird
00:19:21also wenn wir jetzt
00:19:22über Add Card
00:19:23eine neue Instanz
00:19:24von einer Card
00:19:25also von Task
00:19:26oder von einer Card erzeugen
00:19:27sollte man mit
00:19:29der Farbe
00:19:30und mit dem Titel
00:19:31eine neue Karte erzeugen
00:19:32am Anfang ist der
00:19:34Text
00:19:35die Description leer
00:19:36die muss man dann
00:19:37nachher händisch
00:19:40noch einmal ändern
00:19:41mit Edit
00:19:42Add to Call
00:19:43da fügen wir es dann
00:19:44hinzu
00:19:49da kommen wir dann quasi zu dem
00:19:50was wir in
00:19:52Lecture
00:19:556 gelernt haben
00:19:56diese Interglas
00:19:58Kommunikation
00:19:59die wird erschlagend werden
00:20:00man sieht
00:20:01die Description
00:20:02das bezieht sich wieder
00:20:03auf
00:20:04auf
00:20:05die Instanz
00:20:06von der Karte selber
00:20:07also man sieht das schon
00:20:08das erzeugte
00:20:09Instanz Konstruktor
00:20:10wenn wir es dann
00:20:11zu einer gewissen
00:20:12Spalte hinzufügen
00:20:13wollen
00:20:14oder verschirmen
00:20:15dann brauchen wir
00:20:16irgendwie
00:20:17die Möglichkeit
00:20:19dass wir wieder zurück
00:20:20auf unsere App
00:20:21referenzieren
00:20:22da drinnen ist der
00:20:23Mover
00:20:24und der Mover
00:20:25Element
00:20:26das Bindeglied
00:20:27zwischen
00:20:28Card
00:20:29und App
00:20:30sein
00:20:31zu dem
00:20:32kommen wir dann
00:20:37was ihr jetzt machen müsst
00:20:39das sind dann immer die
00:20:40Deliverables
00:20:41da oben ist ein bisschen beschrieben
00:20:42um was das geht
00:20:43und was jede Funktion
00:20:44so machen sollte
00:20:45und
00:20:46da drinnen
00:20:48ist jetzt genau beschrieben
00:20:50was ihr macht
00:20:51und wie sie es auch macht
00:20:53also wenn man neue Karten erzeugt
00:20:55dann sollte man unten das
00:20:57Template
00:20:58duplizieren
00:20:59wir sollten
00:21:01Titel
00:21:02und Background
00:21:03Farb setzen
00:21:08wir sollten
00:21:09den
00:21:10Description auf
00:21:11No Description setzen
00:21:12weil das ist am Anfang leer
00:21:13und das sollte am
00:21:15Ende
00:21:16hinzugefügt werden
00:21:18die
00:21:19Description steht da
00:21:20wenn wir das aufrufen
00:21:21dann sollte der Text
00:21:22geändert werden
00:21:23und
00:21:24das Ganze
00:21:25so funktionieren
00:21:26dass wenn wir
00:21:27eh drucken
00:21:28dann startet der ganze
00:21:29Prozess
00:21:30von dem hinzufügen
00:21:32Aufbauend darauf
00:21:34findet ihr bei jedem Task
00:21:36dann nach
00:21:37dem Deliverable
00:21:38noch ein paar
00:21:40Hinweise
00:21:41zu den einzelnen
00:21:42Obleife
00:21:43wir schauen uns das gemeinsam
00:21:44beim
00:21:45Task 1
00:21:46den was wir jetzt fast
00:21:47komplett gemeinsam
00:21:48machen werden
00:21:49ein bisschen an
00:21:51und dann sollte eigentlich
00:21:52Task 2
00:21:53und Task 3
00:21:54für euch
00:21:55sehr gut machbar sein
00:21:56und Task 4
00:21:57mit dem Wissen
00:21:58das was wir dann
00:21:59in Lecture 08
00:22:00lernen werden
00:22:01sollte auch
00:22:02sehr einfach
00:22:03machbar sein
00:22:04also
00:22:05da ist keine Inniotik
00:22:06man kann das richtig
00:22:07selber mit
00:22:08ein bisschen ausprobieren
00:22:09lösen
00:22:10und
00:22:11den Code einfach
00:22:12anschreiben
00:22:13ein paar
00:22:14haben Sie mitgekriegt
00:22:15geben wir das Video
00:22:16jetzt schon zum dritten Mal auf
00:22:17und jetzt mal schaut die
00:22:18Lösung ein bisschen anders aus
00:22:19aber
00:22:20es hat immer noch funktioniert
00:22:21aber die Lösung ist auch
00:22:22jetzt mal ein bisschen anders
00:22:23nicht ganz gleich
00:22:25wir wechseln jetzt zurück
00:22:27zum
00:22:28Code
00:22:29zu unserem
00:22:30Grundgerüst
00:22:32das was ja schon
00:22:33verfügbar ist
00:22:34und probieren den Task 1
00:22:36also
00:22:37ausprogrammieren
00:22:38also Task 1
00:22:41wir haben da quasi
00:22:42unsere App
00:22:43und unsere Card
00:22:44und innerhalb von denen
00:22:46wollen wir jetzt
00:22:47programmieren
00:22:48dass wir neue Karten hinzufügen
00:22:49Schauen wir nochmal
00:22:50in Index.js
00:22:51das ist ja der Teil
00:22:52die was vom
00:22:53HTML-File eingebunden wird
00:22:55da drinnen haben wir schon
00:22:56ein bisschen Logik
00:22:57damit wir diese Karten
00:22:58nicht immer
00:22:59händisch erstellen müssen
00:23:00da werden drei Karten
00:23:02quasi erzeugt
00:23:04nachdem aber diese
00:23:05Klassen und Funktionen
00:23:07noch leer sind
00:23:08passiert da nichts
00:23:09und wir sollten die Logik
00:23:11jetzt ausprogrammieren
00:23:12auf Basis von der Anleitung
00:23:14grundsätzlich ist es so
00:23:17dass von App
00:23:18eine neue Instanz
00:23:19erzeugt wird
00:23:20und über Add Card
00:23:21diese neuen Karten
00:23:22erzeugt werden
00:23:23dann sieht man da
00:23:24dass dieses Add Card
00:23:25auch was zurückliefern
00:23:26sollt
00:23:27das heißt diese neue
00:23:28Instanz einer Karte
00:23:29die was dann da
00:23:30in einer Variable
00:23:31abgespeichert wird
00:23:32und wir haben da
00:23:33schon Aufruf von
00:23:34Set Description
00:23:35wo wir jetzt die Logik
00:23:37dazu programmieren
00:23:39das heißt wir wechseln
00:23:40einmal zur App
00:23:41JS
00:23:43da drinnen haben wir
00:23:44dieses Add Card
00:23:46dieses Add Card
00:23:48kriegt drei Parameter
00:23:50übergeben
00:23:53wie in die Funktionsaufrufe
00:23:54zum sehen ist
00:23:55drei Zeichenketen
00:23:57Column
00:23:58dann haben wir
00:23:59ein Title
00:24:00und ein Color
00:24:01mit dem sollten wir
00:24:02arbeiten
00:24:04jetzt schauen wir
00:24:05in der Beschreibung nach
00:24:06Add Card
00:24:08create a new Card
00:24:09Instance
00:24:10and add it to the board
00:24:11ok
00:24:12eine neue Instanz erzeugen
00:24:13die meiste Arbeit
00:24:15sollte
00:24:16aber in Card
00:24:17erledigt werden
00:24:18die Column
00:24:21wird spezifiziert
00:24:22über eine Zeichenkette
00:24:23to do
00:24:24doing or done
00:24:25und
00:24:27Title in Color
00:24:28sind auch Zeichenketten
00:24:29wichtig ist am Ende
00:24:30da wir die neue Instanz
00:24:31von der Karte
00:24:32zurückliefern
00:24:33ok
00:24:34eigentlich können wir
00:24:35dazu gar schon anfangen
00:24:36und zwar mit einer neuen
00:24:37Instanz
00:24:38einer Karte erzeugen
00:24:39und die Instanz
00:24:41am Ende
00:24:42zurückliefern
00:24:43auf die zwei Teile
00:24:44fokussieren wir
00:24:45jetzt nochmal
00:24:46Add to Column
00:24:48eine neue Instanz
00:24:53eine neue Instanz
00:24:55einer Karte erzeugen
00:24:56das heißt
00:24:57New Card
00:24:58ich bin in der falschen Klasse
00:25:03Entschuldigung
00:25:04in AppJs
00:25:07in AppJs
00:25:08Add Card
00:25:09dann sieht man oben
00:25:11die
00:25:12Card wird schon importiert
00:25:14das heißt wir können eine neue Instanz
00:25:19erzeugen
00:25:21erzeugen
00:25:22wie können wir eine neue Instanz erzeugen
00:25:28schauen wir nach
00:25:29wo es da möglich ist
00:25:31da wird uns eh geholfen
00:25:36und zwar das New Card benötigt
00:25:39im Konstruktor einen Titel und eine Farbe
00:25:42und da gehen wir einfach von oben
00:25:44Titel in Color weiter
00:25:47an
00:25:48den Konstruktor
00:25:49von der Klasse Card
00:25:51das darf man auch durchschleusen
00:25:54wir müssen uns das in der App-Klasse
00:25:56drumherum nicht merken
00:25:57in der Instanz
00:25:59also das wollen wir erzeugen
00:26:01und am Ende
00:26:02steht da
00:26:03wir sollten die Instanz zurückliefern
00:26:09New Card
00:26:12ist ein bisschen irreführend
00:26:14New Card
00:26:15und New Obstund Card
00:26:16so passt es jetzt
00:26:19so
00:26:22für uns jetzt
00:26:26eine neue Instanz erzeugt
00:26:28jetzt kümmern wir uns einmal um den Konstruktor
00:26:31in der Klasse CardJs
00:26:33im Konstruktor drinnen
00:26:36kriegen wir die Zeichenketen übergeben
00:26:39und ich neige immer dazu
00:26:41dass ich mir das
00:26:43was ich da beim Instanzieren kriege
00:26:45ein Merk innerhalb von der Instanz
00:26:48das heißt wir machen lokale Variablen
00:26:50mit den Werte
00:26:54die da übergeben werden
00:26:55jetzt
00:26:58schauen wir in der Aufgabe weiter
00:27:01die
00:27:03Delegieren
00:27:04das ist ein String
00:27:08Konstruktor in Card
00:27:10der
00:27:11Given Title in Color
00:27:12und die Card Description
00:27:15sollte
00:27:16empty sein
00:27:17gehen wir den Punkt weiter
00:27:23jetzt sehen wir an der Seite 2
00:27:24von CardJs
00:27:26das da drinnen steht
00:27:28NoDescription
00:27:29das ist der Standardwert
00:27:30und man dann auch jeder Karte
00:27:33die was wir neu erzeugen
00:27:35weiß man dann bei der Description
00:27:37ist gleich das was da oben
00:27:46in der Konstante abgelegt wird
00:27:48also Default mässig kann man dann immer stehen
00:27:51NoDescription
00:27:52und das sind auch die 3 Werte die was quasi ein Task ausmachen
00:27:58ein Titel
00:28:00eine Farbe
00:28:01und
00:28:02eine Beschreibung von dem Task
00:28:11so
00:28:12da drinnen
00:28:16ist ein Hinweis
00:28:18das ist ein guter Platz
00:28:19um die HTML Elemente
00:28:21für die Karten zu generieren
00:28:23zu dem kommen wir gleich
00:28:26für uns das Wichtige ist
00:28:28jetzt
00:28:29und wir sehen das in
00:28:30index.js
00:28:32wir übergeben da
00:28:34diese Werte
00:28:35und wenn wir
00:28:36AddCard ausführen
00:28:37hätten wir gern dass die
00:28:38Instanz erzeugt wird
00:28:39und
00:28:40dass sie dann ins
00:28:41Document Object Model
00:28:42richtig
00:28:43hinzugefügt wird
00:28:44die Frage ist
00:28:45was wird da hinzugefügt
00:28:47und
00:28:48da müssen wir ganz kurz
00:28:49in der Beschreibung ein bisschen
00:28:50durchschauen
00:28:51weil
00:28:53wenn wir
00:28:54über
00:28:59AddCard
00:29:00was hinzufügen
00:29:01dann
00:29:02steht dann da irgendwo
00:29:13zum Thema Template
00:29:15ich hoffe ich finde es
00:29:22oder auch nicht
00:29:26das kann es ein bisschen
00:29:29mithelfen
00:29:30also wenn man neue Karten erstellt
00:29:35über AddCard
00:29:36den App.js
00:29:37dann sollte man das
00:29:39Template aus dem index.html
00:29:42duplizieren
00:29:44und am Ende
00:29:45von der
00:29:46jeweiligen Spalten
00:29:47hinzufügen
00:29:49das ist quasi die
00:29:50Grundstrategie
00:29:51und unten
00:29:52bei den
00:29:53Tipps
00:29:54da steht dann drinnen
00:29:55dass
00:29:56man
00:29:57relevante
00:29:59Funktionen
00:30:00in der Referenz
00:30:01anschauen sollte
00:30:02und für uns
00:30:03jetzt war wichtig
00:30:04das Clone-Node
00:30:05zu dem
00:30:06kommen wir gleich
00:30:07ich greife ein bisschen vor
00:30:08und es geht auch ein bisschen schneller
00:30:09wenn wir uns auf das Server arbeiten
00:30:10würden
00:30:11aber das Clone-Node
00:30:13hilft uns
00:30:14dass wir ein gewisses
00:30:15Element suchen können
00:30:17im
00:30:18HTML-Gerüst
00:30:19und das dann
00:30:20duplizieren können
00:30:22eine
00:30:23Kopie davon erstellen können
00:30:24jetzt schauen wir noch
00:30:26in unserem HTML
00:30:28haben wir ganz unten
00:30:31so einen Blog
00:30:33Artikel
00:30:35mit einem Haufen
00:30:37Sub-Elemente
00:30:38und
00:30:39der Blog hat
00:30:42zwei Klassen
00:30:43und wir schauen dir jetzt ganz kurz
00:30:47in unser
00:30:48also wenn man die Seiten jetzt aufruft
00:30:50dann sollte euch eigentlich auffallen
00:30:58dass dieser Blog
00:31:00da nicht sichtbar ist
00:31:03der Blog ist aber trotzdem da
00:31:06also wenn ihr mit dem Inspektor dann
00:31:10das HTML-Grundgerüst durchschaut
00:31:12dann seht ihr da unten
00:31:15der Blog ist trotzdem da
00:31:17aber er ist grau
00:31:19wenn man draufdruckt
00:31:22sieht man die Klassen
00:31:23die was da
00:31:24oder die CSS-Regeln
00:31:25was drauf
00:31:26angewendet wurden
00:31:27und eine Regel ist
00:31:28von der Klasse
00:31:30Template
00:31:31gibt es ein Property
00:31:32Display
00:31:33auf None gesetzt
00:31:34das bewirkt
00:31:35dass das Ganze
00:31:36nicht taggestellt wird
00:31:37wenn man Display None
00:31:39deaktiviert
00:31:40händisch jetzt
00:31:41dann sieht man da unten
00:31:43diesen Template-Block
00:31:44wir lassen den drinnen
00:31:46und jetzt
00:31:47wenn wir neue Karten erstellen
00:31:48duplizieren wir den
00:31:50und fügen das dann quasi
00:31:51wieder neu ins
00:31:52Dokument-Object-Modeline
00:31:53da jetzt in der Beschreibung
00:31:57drinnen steht
00:31:58bei
00:32:03bei der
00:32:06Card
00:32:07steht da beim Konstruktor
00:32:09this is a good place
00:32:11to create
00:32:12the HTML Elements
00:32:13da drinnen
00:32:15sollte man
00:32:16das Template
00:32:18duplizieren
00:32:20und das Element
00:32:23quasi in dem Fall
00:32:24eine Variable zu erweisen
00:32:26und dann verändern
00:32:27das heißt
00:32:29wir gehen in unsere Karte
00:32:32ein
00:32:34und
00:32:36wir dann in den Schritt
00:32:39suchen wir
00:32:40Suche nach
00:32:42Template
00:32:44und
00:32:48Duplikat erstellen
00:32:50der erste Schritt
00:32:55so
00:32:57jetzt können wir schauen
00:32:58wie heißt
00:32:59dieses Template
00:33:00und zwar
00:33:03wir haben da
00:33:04einen Block
00:33:05mit der Klasse
00:33:07Template
00:33:08und mit der Klasse
00:33:10Card
00:33:11mit der Klasse
00:33:12Template
00:33:13und mit der Klasse Card
00:33:14jetzt können wir hergehen
00:33:20und können über
00:33:21Document
00:33:28Punkt
00:33:29und das haben wir
00:33:30in den letzten zwei Lectures
00:33:31auch schon gehabt
00:33:32es gibt den
00:33:33Curvy Selector
00:33:34können wir noch Elemente
00:33:36über CSS
00:33:37Selektoren suchen
00:33:39nachdem wir jetzt noch
00:33:41recht wenig CSS gehabt haben
00:33:43habe ich jetzt die Möglichkeit
00:33:46dass
00:33:47man sich da ein bisschen
00:33:48helfen lässt
00:33:49wenn man jetzt von Klasse
00:33:50redet
00:33:51spricht man ein Punkt an
00:33:52Hashtag
00:33:53spricht man etwas über
00:33:54ID an
00:33:57man kann das ganze aber
00:33:59mit Hilfe von der
00:34:00Developer Konsole
00:34:01ein bisschen ausprobieren
00:34:02und zwar
00:34:04ich habe das von vorher noch
00:34:06ausgewählt
00:34:07wo ich das jetzt auch gehabt
00:34:08mit dem Display nah
00:34:09und man kann bei so einem Element
00:34:11mit Rechtsklick draufklicken
00:34:12auf Copy gehen
00:34:15und kann sich dann den CSS Selector
00:34:18kopieren
00:34:19ja
00:34:20so
00:34:22haben wir es jetzt kopiert
00:34:25und
00:34:29dann nehme ich den Selector
00:34:31und füge ihn da ein
00:34:32also wenn wir
00:34:34oft haben wir
00:34:35recht komplizierte Selektoren
00:34:36und
00:34:38der Browser kann dir helfen
00:34:39dass man den Selector schreibt
00:34:41in dem Fall ist es so
00:34:43wir suchen ein Element mit der Klasse
00:34:46Template
00:34:47und mit der Klasse Card
00:34:49dann müsste ich schreiben
00:34:50Punkt Template
00:34:51Punkt Card
00:34:53zwei Klassen
00:34:55sind da drauf zu gewesen
00:34:56das wird uns jetzt ein kleiner
00:35:00noch einmal den Weg laufen
00:35:01dieses Element
00:35:05merkt man uns
00:35:06das ist die neue Karten
00:35:11Card Element
00:35:13also in dem Fall
00:35:16würde man dieses Element nehmen
00:35:19und
00:35:20die Referenz
00:35:21da zu Card Element zuweisen
00:35:23aber
00:35:24wir wollen ein Duplikat davon stellen
00:35:26und statt Duplikat
00:35:27gibt es halt da
00:35:28Clone Node
00:35:29machen wir die Klammern noch auf
00:35:34weil dann kriegen wir ein bisschen
00:35:35eine Hilfestellung
00:35:36ist jetzt wichtig
00:35:37und zwar
00:35:38wenn wir nichts einschreiben
00:35:40werden nur die Hülle kopiert
00:35:42wenn wir True einschreiben
00:35:44dann wird der Inhalt auch mitkopiert
00:35:46wir brauchen den Inhalt auch
00:35:49das heißt wir übergeben da True
00:35:51sonst hätten wir quasi nur
00:35:53den Container an sich
00:35:56ohne die Sub-Elemente
00:35:58die was darin beherbergt werden
00:36:00so
00:36:03für uns lädt das schlecht
00:36:04wenn wir im Moment
00:36:05das Element vielleicht später
00:36:06nochmal hernehmen
00:36:07und die Referenz merken
00:36:09das heißt
00:36:11das Element ist
00:36:12was jetzt bezirkt
00:36:13auf unser
00:36:14auf unseren Nine-Task
00:36:18das merken wir uns erinnern
00:36:19von der Instanz
00:36:20von der Klasse
00:36:21was wir in dem Schritt
00:36:25noch machen können
00:36:26wir können die Grundwerte
00:36:27jetzt noch
00:36:29gleich mit verändern
00:36:30wenn wir uns das Template
00:36:34nämlich anschauen
00:36:35dann sehen wir
00:36:38wir haben da drinnen
00:36:39Element mit der Klasse Title
00:36:41Element mit der Klasse
00:36:43Description
00:36:44und die zwei Werte
00:36:45wollen wir ändern
00:36:46das heißt ich suche innerhalb
00:36:49von meinem Element
00:36:50noch was mit der Klasse Title
00:36:53so
00:36:58Card
00:37:01da drinnen
00:37:03in dis.CardElement
00:37:05suche ich noch was
00:37:07und ich mache es
00:37:10absichtlich jetzt mal anders
00:37:11also der QuerySelector
00:37:13ist so das
00:37:14das flexibelste Werkzeug
00:37:16zum Suchen
00:37:17von Elementen
00:37:18im Document-Object-Model
00:37:19aber wenn ich noch was suche
00:37:20spezifisch mit einer
00:37:21Class
00:37:22einer Name oder
00:37:23Id
00:37:24gibt es für jeweilige Möglichkeit
00:37:25zum Beispiel
00:37:26GetElement
00:37:28bei
00:37:30Class gibt's
00:37:31es gibt
00:37:32GetElement
00:37:33bei Id
00:37:34und GetElement
00:37:35bei Name
00:37:36das dürft ihr genauso verwenden
00:37:37wir suchen
00:37:38innerhalb
00:37:39von
00:37:40CardElement
00:37:41noch ein Element
00:37:42bei
00:37:43Class
00:37:44und das Element
00:37:45hat die Klasse
00:37:46Title
00:37:49Punkt
00:37:50und jetzt weise ich nochmal drauf hin
00:37:54was mir wichtig ist
00:37:56in dem Assignment ist
00:37:58das habe ich ganz oben geschrieben
00:38:00bitte nie
00:38:04innerHTML verwenden
00:38:06also irgendwo habe ich das
00:38:07nochmal hingeschrieben
00:38:08never use innerHTML
00:38:10und wenn ihr jetzt in der Referenz
00:38:12nachschaut
00:38:13dann seht ihr irgendwo
00:38:17Beschreibung für Element Punkt Text Content
00:38:27über das kann man den
00:38:29Inhalt von Element genauso verändern
00:38:31ohne diese Sicherheitsrisiken
00:38:33was ich mir erklären wollte
00:38:34oder erklärt habe
00:38:35also ich werde dann immer über Text Content
00:38:37das Ganze verändern
00:38:39das heißt von dem Element
00:38:40will ich mir den Text Content setzen
00:38:44auf
00:38:45in dem Fall geht es um den Title
00:38:46Dis.title
00:38:48Dis.title
00:38:49Das gleiche machen wir dann
00:38:53schauen wir nach
00:38:54wir haben da innerhalb drinnen
00:38:56auch Elementen
00:38:57einen
00:38:58Absatz
00:38:59P für Paragraph
00:39:00und
00:39:01der hat die
00:39:02Klasse
00:39:03Description
00:39:08das heißt
00:39:09STRG C
00:39:10STRG V
00:39:11Das heißt
00:39:12wir duplizieren diesen HTML-Codeblock
00:39:23und dann innerhalb von dem dann
00:39:26gewisse Container Inhalte auch schon verändern
00:39:41in dem Fall Title und Description
00:39:43aber das Ganze ist nur quasi im Code drinnen
00:39:44wir haben es noch nie ins Dokument
00:39:46Object Model
00:39:47für diese ist diese Add-to-Cull Function verantwortlich
00:39:56und da müssen wir uns in der Beschreibung noch mal kurz anschauen
00:40:01und zwar das Add-to-Cull
00:40:11das sollte die Karten zum Board hinzufügen
00:40:14in den jeweiligen Spalten am Ende
00:40:18und das Cullum Element
00:40:20das ist das Document Object Model Element wo wir es einfügen sollten
00:40:24wenn wir oben schauen
00:40:27bei Add-Card
00:40:28da steht aber dass Cullum eine Zeichenkette ist
00:40:30Cullum ist ein String
00:40:31das heißt wir müssen
00:40:33da oben
00:40:34in App.js
00:40:35auf Basis für dem String
00:40:37das Element suchen
00:40:38und das Element
00:40:40übergehen wir nachher auf Add-to-Cull
00:40:42für uns jetzt auch wichtig ist das zweite
00:40:45das brauchen wir erst in Task 3
00:40:47das ist zum Verschieben von die Elemente
00:40:49das tun wir dabei ignorieren
00:40:51und deswegen übergehen wir dann Nullwerten
00:40:53das heißt ich gehe nochmal einen Schritt zurück
00:40:59auf App.js
00:41:02da drinnen
00:41:04wo wir neue Karten erzeugt haben
00:41:08wollen wir hergehen
00:41:10und wollen diese Karte dann
00:41:13in die jeweilige Spalte hinzufügen
00:41:17aber nicht auf Basis von der Zeichenkette da oben
00:41:19sondern wir übergeben dem Add-to-Cull schon
00:41:22die ist Element
00:41:24und in unserem Grundgerüst drinnen
00:41:28haben wir drei Bereiche
00:41:30mit Section Container
00:41:32die jeweils eine Klasse haben
00:41:34Klasse Column
00:41:36und die was über die IDs unsprechbar sind
00:41:40die was der jeweiligen
00:41:42To-to-Spalte entspricht
00:41:44also der jeweiligen Task-Spalte entspricht
00:41:46einmal To-to
00:41:47einmal To-to
00:41:48einmal To-in
00:41:49einmal To-in
00:41:50einmal To-in
00:41:51das heißt wir suchen auf Basis von der Zeichenkette
00:41:53nach dem jeweiligen Element
00:41:55jetzt gehen wir her
00:41:59Dokument
00:42:01suchen wir innerhalb von dem ganzen Dokument
00:42:03get
00:42:05element
00:42:13bei
00:42:15id
00:42:17id
00:42:19und wir suchen jetzt das Element mit der id
00:42:25cal
00:42:29get element bei id und decal
00:42:35und decal
00:42:37und decal
00:42:39das Element
00:42:40was wir da
00:42:41außer selektieren das merkt man uns
00:42:45und dann machen wir den Aufruf in NewCard
00:42:52und sagen wir wollen
00:42:56in dem Column Element was wir da rausgesucht haben
00:42:59die Karten oder den Task hinzufügen
00:43:03der Mover ist null
00:43:05den kennen wir noch nicht
00:43:06das kann beherrscht in Task 3
00:43:07also Element suchen wo es angekehrt
00:43:14und dann die Funktion
00:43:16add to cal aufrufen
00:43:18die wo es dann das hinzufügen
00:43:19bewerkstelligt
00:43:20die speichern wir jetzt einmal
00:43:26jetzt müssen wir da mal schauen
00:43:28weil ich glaube ich habe da einen Fehler gemacht
00:43:29und zwar das geht element by glass
00:43:32da schauen wir jetzt nochmal nach
00:43:36und zwar
00:43:39js
00:43:40get element by glass
00:43:43ob wir da einzelne Elemente zunahse kriegen
00:43:51weil sonst bin ich eher für
00:43:53und zwar
00:43:59und zwar
00:44:00ich bin jetzt gerade nicht ganz so überzeugt von der
00:44:09da kriegen wir nämlich eine Liste zurück
00:44:13und in dem Fall hätten wir gerne noch ein Element
00:44:15das heißt wir werden da unsere Strategie nochmal ein bisschen ändern müssen
00:44:20und wir gehen dann her und wechseln bitte da drinnen bei
00:44:27wo wir den title container aussuchen
00:44:31da nehmen wir den query selector her
00:44:33also bei id funktioniert es gut
00:44:36wenn man jetzt nach Klassen sucht
00:44:39ist es gescheiter wenn man
00:44:41richtig nach der Klasse sucht
00:44:43über den query selector
00:44:46über den query selector
00:44:48sonst müssen wir das nullte Element nehmen
00:44:50und das führt eher zu probleme
00:44:52also wir nutzen den query selector
00:44:55und suchen nach ein Element mit der Klasse
00:44:57also mit dot title
00:44:59ok
00:45:06wieder zurück
00:45:07wir haben in app.js ausprogrammiert
00:45:10dass add to call aufgerufen wird
00:45:12und das Element wird hinzugefügt
00:45:14und sollte jetzt in der Funktion hinzugefügt werden
00:45:17jetzt haben wir da
00:45:18die Referenz auf das HTML
00:45:21was wir einfügen wollen
00:45:22und wir haben da die Referenz wo wir es einfügen wollen
00:45:25das heißt wir wollen beim column element
00:45:28das wir mal jetzt machen
00:45:32am Ende append child
00:45:36das heißt hinzufügen
00:45:37wollen wir dis.cardElement hinzufügen
00:45:41column element dis.cardElement
00:45:47gehen wir her
00:45:51und schauen uns das Ganze mal an
00:45:53ob wir irgendwo Fehler haben
00:45:55aufwerfen
00:45:56aufwerfen
00:46:00hier dann Konsole drin
00:46:13dann haben wir jetzt keine Fehler
00:46:14trotzdem schaut das jetzt
00:46:16ist das nur leer
00:46:17die Frage ist warum ist da nichts drinnen
00:46:19schauen wir uns das dahinterliegende HTML an
00:46:23und schauen wir bei
00:46:25to do any
00:46:26dann sieht man
00:46:27da drinnen haben wir zwei sichere Templates
00:46:29was wir erstellt haben
00:46:30man sieht auch wir haben den title geändert
00:46:34aber man sieht auch
00:46:38dass das immer noch grau ist
00:46:40und warum ist das grau
00:46:41weil eben
00:46:42dieses Template
00:46:44die Klasse immer noch drinnen ist
00:46:46und dann haben wir da quasi
00:46:48und dann haben wir da quasi dieses display
00:46:51non property aktiv
00:46:54für uns heißt das wir müssen die
00:46:56Template Klasse
00:46:58da weg bringen
00:47:00und für dies gibt es die sogenannte
00:47:03class list
00:47:04da könnt ihr nachschauen in der
00:47:08Referenz auf unserer Seite
00:47:10class list get modify list
00:47:14auf css-classes
00:47:16auf ein Element
00:47:18wir nutzen das jetzt wie folgt
00:47:20und zwar wenn wir dieses Element hinzugefügt haben
00:47:23entweder vorher oder nachher
00:47:25entfernen wir diese Template Klasse
00:47:27das heißt bei this.car element
00:47:32hätten wir gern die
00:47:35class list
00:47:37und dann kann man remove machen
00:47:40und wir wollen die Klasse Template entfernen
00:47:52es gibt dann auch noch was zum Toggeln
00:47:55und auch noch was zum hinzufügen von einer Klasse
00:47:58wir wollen direkt da
00:48:00damit das ganze sichtbar wird
00:48:02speichern
00:48:03und wieder retour
00:48:08und voilà unsere Tasks die
00:48:15wo es in index.jstore
00:48:16dynamisch generiert werden
00:48:18erscheinen
00:48:19mit dem Titel
00:48:22mit dem Standard
00:48:23no description
00:48:24ok
00:48:29schauen wir nochmal zu
00:48:32unserer Task Beschreibung zurück
00:48:35wir haben gemacht
00:48:43das Karten hinzufügen
00:48:45den Punkt
00:48:48den haben wir
00:48:49nicht berücksichtigt
00:48:51den lasse ich euch über
00:48:52das ist dieses Hintergrundfarb ändern
00:48:55das bleibt über für euch als Aufgabe
00:48:58ich werde euch morgen im Kurs einen Hinweis geben
00:49:03wie das funktioniert
00:49:04aber ausprogrammieren
00:49:07setzt sich ihr
00:49:08set description
00:49:09das ist auch euch eine Aufgabe
00:49:11das heißt
00:49:12ich habe es dann im
00:49:14das könnt ihr jetzt schon ausprogrammieren
00:49:17aber es fällt noch nicht auf
00:49:18wenn man es nicht gemacht hat
00:49:19es fällt nur deswegen auf
00:49:21weil nämlich
00:49:22in index.js
00:49:25gibt es eine Zeile
00:49:26wo die description gesetzt wird
00:49:28das heißt
00:49:29eigentlich
00:49:30sollt bei dem Task
00:49:31der wo es unter
00:49:32to do steht
00:49:33andere description drinnen sein
00:49:36so wenn ihr es ausprogrammiert habt
00:49:37sollt eigentlich dann
00:49:39bei to do
00:49:41im zweiten Task
00:49:44sollt da andere description stehen
00:49:46das wird auf Basis von dem was wir jetzt gemacht haben
00:49:50mit title
00:49:51und description
00:49:53im Konstrukt
00:49:54das wird das schon möglich sein
00:49:55Element suchen
00:49:56und den Text ändern
00:49:57so
00:50:01Karten hinzufügen
00:50:04das ist für euch über
00:50:06weil ihr seht description
00:50:08was ich noch gerne gemeinsam mit euch machen würde
00:50:11damit wir dieses Event Händler
00:50:13nochmal kurz anreißen
00:50:15ist
00:50:16die Funktionalität
00:50:18für das Formular ausprogrammieren
00:50:20wir haben in unserem
00:50:22Index HTML
00:50:23oben drinnen
00:50:24dieses Formular
00:50:28und wenn der Benutzer was eingibt
00:50:31und auf add drückt
00:50:34oder enter drückt
00:50:35dann sollte
00:50:36also wenn du jetzt add drückt
00:50:39oder enter drückt
00:50:40in einer von den zwei Buchsen
00:50:41mit zwei Buchsen
00:50:42sollte der neue Karten
00:50:43erzeugt werden
00:50:44mit der jeweiligen
00:50:46Farbe
00:50:47und dem Titel
00:50:49zu dem Punkt
00:50:50kommt auch noch
00:50:51wenn der Benutzer kein Titel ergibt
00:50:53dann sollte ein Fehler kommen
00:50:55für uns wichtig ist
00:50:57jede neue Karten
00:50:58werden am Ende
00:50:59von to do
00:51:00und die Inputs
00:51:03sollten gelöscht werden
00:51:05für uns
00:51:08die Logik für das ganze
00:51:11gehört in dieses
00:51:14App.js
00:51:15weil das übernimmt quasi
00:51:17die Funktionalität für unser Taskboard
00:51:19wo dann die ganzen Karten Tasks
00:51:23dargestellt werden
00:51:27das heißt
00:51:29ich habe ein Formular
00:51:31und ich möchte das Formular
00:51:32die Logik von dem Formular
00:51:33in meiner
00:51:35in der App.js Klasse
00:51:37realisieren
00:51:39von App.js
00:51:40weil den Index.js eine Instanz generiert
00:51:43und über die Instanz
00:51:44kann man dann das Formular
00:51:45die Formularlogik deklarieren
00:51:47immer
00:51:49wenn ich dann so
00:51:50mit einem
00:51:51wir haben die Logik
00:51:52zu einem Element
00:51:53in meinem HTML
00:51:55und damit ich die Logik programmieren kann
00:51:57muss ich mir das Element merken
00:51:59in dem Fall geht es um ein Formular
00:52:01in dem Fall
00:52:02ich nehme es einfach
00:52:03dis.form
00:52:04in der Klasse
00:52:05und dann hole ich mir das Formular
00:52:07aus dem Document-Object-Model
00:52:09document.
00:52:12es geht jetzt genauso
00:52:13der Query-Selector
00:52:14aber wenn es um Formulare geht
00:52:16haben wir gesagt
00:52:18werden alle Formulare
00:52:19über Forms
00:52:20aufgelistet
00:52:21und dann können wir
00:52:23über den benannten
00:52:24die werden dann benannt
00:52:25nach dem Title
00:52:26unser Formular hat die ID
00:52:31addCard
00:52:32das heißt
00:52:33ich kann
00:52:34document.forms.addCard
00:52:36und dann kriege ich das Formular
00:52:38document.forms.addCard
00:52:41jetzt habe ich eine Referenz
00:52:45auf dieses Formular
00:52:47so
00:52:50wir haben jetzt
00:52:52die Anforderung
00:52:53dass
00:52:54wenn wir
00:52:56Enter drucken
00:52:57oder auf
00:52:58den Button drucken
00:53:00ein Event ausgelöst werden soll
00:53:03so
00:53:06dieses Formular
00:53:07hat ein Button
00:53:08und der Button ist
00:53:09vom Type-Submit
00:53:10letztes Mal
00:53:12haben wir
00:53:13auf den Button Event gelegt
00:53:16und haben gewartet
00:53:17dass der Button geklickt wird
00:53:18diesen Mal hätte ich gern
00:53:19dass ich auf ein anderes Event
00:53:21warte und das Event heißt
00:53:22Submit Event
00:53:23das wird immer dann ausgelöst
00:53:25wenn man ein Formular drinnen
00:53:26in ein Feld ist und Enter druckt
00:53:28oder wenn
00:53:30innerhalb von dem Formular
00:53:31ein Button ist
00:53:32vom Type-Submit
00:53:33wenn das gedruckt wird
00:53:34also
00:53:35eins für die Sachen eintritt
00:53:36dann wird ein
00:53:37sogenanntes Submit Event
00:53:38ausgelöst
00:53:39das heißt
00:53:40das Event wird nicht auf den Button gelegt
00:53:42sondern auf das ganze Formular
00:53:45im ersten Schritt aber
00:53:48brauchen wir aber eine Funktion
00:53:49die was ausgelöst wird
00:53:51oder abgefeuert wird
00:53:52wann dieses Submit Event eintritt
00:53:54dann schreiben wir das jetzt mit
00:53:57weil das gilt dann nachher auch
00:53:59erster Schritt
00:54:01Event Händler Function deklarieren
00:54:10in dem Fall haben wir
00:54:16hier haben wir
00:54:17was was
00:54:18was
00:54:19Handle
00:54:20Submit
00:54:22Form nenne ich es jetzt an
00:54:29und
00:54:30ich habe es schon einmal erklärt
00:54:31so eine Event Händler Function
00:54:33die kriege immer
00:54:35aus Parameter
00:54:36das Event an sich mit übergeben
00:54:38wir brauchen das nachher
00:54:40jetzt kommt ein e nennen
00:54:42oder Event
00:54:43und für uns ist immer nur interessant
00:54:48ob das Event überhaupt
00:54:50abgefeuert wird
00:54:51und damit ihr das sieht
00:54:53geht mir mal in der Konsole
00:54:55einen Hinweis aus
00:54:57und es funktioniert dann
00:54:59bei der Konsole inne eingeschrieben
00:55:03das haben wir gemacht
00:55:05das zweite ganz wichtig
00:55:07ist immer den Kontext penden
00:55:09sonst
00:55:10wenn man auf dem Button druckt
00:55:12war hat man sonst im Kontext von Button
00:55:15in dem Beispiel war sehr spannend
00:55:17weil dann
00:55:18wenn der Kontext ist
00:55:19weil das Formular das auslöst
00:55:21meistens tut man Kontext penden
00:55:24das heißt
00:55:25das
00:55:29muss auf die Klasse
00:55:31auf die Klasse gebunden werden
00:55:33dies Punkt
00:55:36händelsatmitform
00:55:38Punkt
00:55:43bind
00:55:44dies
00:55:45den Kontext penden
00:55:46auf den aktuellen Kontext
00:55:47das dritte ist
00:55:50jetzt können wir dazu
00:55:53jetzt kommen wir dazu
00:55:54den Zuweisen von
00:55:55Event
00:55:58Listener
00:55:59so
00:56:00im
00:56:05Lectio 06
00:56:06haben wir den Event Listener
00:56:07auf den Button
00:56:08zugewiesen
00:56:09heute haben wir auf das Formular
00:56:10weil wir auf jegliches
00:56:12Submit Event
00:56:13auf das Formular bezogen
00:56:14warten
00:56:15das Formular haben wir uns
00:56:16oben schon gemerkt
00:56:17dies Punkt Form
00:56:20auf dies
00:56:21will man ein Event Listener legen
00:56:24das Event ist jetzt kein Klick
00:56:30sondern jegliche Art von Submit Event
00:56:33was will man aufrufen
00:56:36Handle
00:56:37Submit
00:56:38Form
00:56:39Function deklarieren
00:56:43Kontext penden
00:56:45Event Listener
00:56:46hinzufügen
00:56:48oder deklarieren
00:56:49wenn das funktioniert
00:56:53dann
00:56:56sollte in der Konsole
00:56:57in ausgehen werden
00:57:02sichern wir da
00:57:05schauen wir ob wir keine Fehler haben
00:57:07jetzt hinher und drucken wir auf Add
00:57:13und das ist jetzt warum wir das so gemacht haben
00:57:15und zwar der Title war jetzt leer
00:57:20und es ist jetzt eine Meldung gekommen
00:57:22vom Browser dass da was drinnen sein muss
00:57:24und die Frage ist warum kommt das
00:57:26das kommt dann wenn man auf ein Submit Event wartet
00:57:30und im Grundgerüst bei einem Formularfeld ein Attribut
00:57:34ein Attribut
00:57:39Required gesetzt worden ist
00:57:41also
00:57:43der Submit Event ist ausgelöst worden
00:57:46aber der Browser schaut nach ob in die Formularfelder irgendwo ein Attribut oder Eigenschaft
00:57:53Required gesetzt worden ist
00:57:54wenn das dann fehlt
00:57:56dann wird das Event quasi
00:57:57das heißt Bubbling
00:57:59nicht weiter ausgeführt
00:58:01und es wird ein Hinweis gegeben dass da ein Wert fehlt
00:58:03das heißt wir können wir nicht zu unserem
00:58:06zu unserer Event Händler Function
00:58:08da muss zuerst was drinnen stehen
00:58:09bei der Form ist es nicht benötigt
00:58:11das heißt wenn ich das inni schreibe
00:58:16test
00:58:18jetzt drücken wir auf add
00:58:21dann steht da innen drinnen oder
00:58:24aber
00:58:25das da oben wird rausgelöscht
00:58:27und die Seiten werden eingeladen
00:58:29das passiert deswegen weil
00:58:32jeder lägliche Submit Event löst im gleichen Atemzug
00:58:35einen sogenannten Postrequest aus
00:58:38wenn man einmal die Formulardaten zu einem Server schickt
00:58:41wir wollen das aber nicht
00:58:42wir wollen auf unserer Seite bleiben
00:58:44und die Logik sieht weiterlaufen
00:58:46damit wir dieses Standardverhalten von den Postrequests unterbinden können
00:58:51brauchen wir dieses Event
00:58:54und zwar in unserem
00:58:58Händler Submit Form
00:59:03da haben wir das Event drinnen
00:59:05und damit wir dieses Standardverhalten von Postrequest unterbinden können
00:59:11haben wir schon mal gehört
00:59:13gibt es die Funktion Prevent Default
00:59:16die unterbindet das Wegschicken oder Standardaktionen
00:59:20wie diesen Postrequest absenden
00:59:25jetzt probieren wir das nochmal
00:59:27jetzt können wir beliebig oft draufdrucken
00:59:34und die Seite wird nicht neu geladen
00:59:37für uns ganz zentral
00:59:41wir bleiben auf der Seite
00:59:42die wird nicht neu geladen über den Postrequest
00:59:45und
00:59:48noch ein Vorteil
00:59:50durch Submit Event
00:59:53entweder wir drucken auf add
00:59:56aber das Ganze wird auch ausgelöst
00:59:59wenn man in einem Input-Födel ist und Enter druckt
01:00:02könnt ihr das ausprobieren
01:00:038, 9, 10
01:00:05ganz rechts unten mitschauen
01:00:06entweder wir drucken Enter
01:00:09oder wir drucken add
01:00:10Submit Event wird ausgelöst
01:00:12wird überprüft
01:00:13ob in alle Input-Födel
01:00:15wo Required drinnen steht
01:00:16der Wert steht
01:00:17und dann geht es weiter in unseren
01:00:19in unser Handle Add Event Function
01:00:24letzter Schritt
01:00:27den was wir gemeinsam machen
01:00:28ist jetzt dieses hinzufügen
01:00:30von dieser Karte
01:00:32das ist jetzt gar nicht mehr viel Arbeit
01:00:34diese LogMessage brauchen wir nicht mehr
01:00:40das hat funktioniert
01:00:41wir haben jetzt da unten diese Function
01:00:46addCard
01:00:47und die braucht drei Werte
01:00:49addCard braucht drei Werte
01:00:51und zwar
01:00:53das erste
01:00:55wie gesagt jede neue Karte
01:00:56wird in der Spalte
01:00:57ToDo hinzugefügt
01:00:59addCard kriegt das Ganze aus Zeichenkette
01:01:01die ein zwei Werte
01:01:03die fehlen uns noch
01:01:04der Title
01:01:05und die Color
01:01:07und da können wir jetzt
01:01:10über unser Formular
01:01:12auf die Formularfelder zugreifen
01:01:14das schauen wir uns an
01:01:17und zwar
01:01:18wir haben das Formular
01:01:20dis.form
01:01:22und jetzt bemüßigen wir nochmal die Referenz
01:01:27mdn-form-element
01:01:42schauen wir ob wir da irgendwo ein Beispiel finden
01:01:44Javascript brauchen wir
01:01:46Javascript brauchen wir
01:02:07so auf alle Fälle hat dieses Form-Element wieder ein Property
01:02:12das heißt Elements
01:02:14und da können wir auf alle Controls
01:02:16steht da innerhalb von dem Formular zugreifen
01:02:19und die haben dann
01:02:21sind dann benannt über NOM oder die ID
01:02:23und wir können dann ganz normal darauf zugreifen
01:02:25ich zeig das einmal her
01:02:27man könnte das auch mit dem QuerySelector machen
01:02:29aber in einem Formular ist das echt sehr praktisch
01:02:32dass man das so macht
01:02:33schauen wir noch
01:02:35unser Formular hat ein Input-Födel mit dem NOM-Title
01:02:38das heißt
01:02:41ich gehe her und
01:02:44such dis.form.elements.title
01:02:53jetzt kann man darauf zugreifen
01:02:58und nachdem diese Input-Födel ist
01:03:00hat diese sogenannten Value
01:03:02das heißt der Title
01:03:07der vom Formular ist gleich dies
01:03:09Formular in die Elemente
01:03:11in dem Vödel mit dem NOM-Title
01:03:13und dessen Wert
01:03:15die zweite Möglichkeit
01:03:17das machen wir jetzt für
01:03:19die Color
01:03:20nachdem wir wissen
01:03:24dass
01:03:25auf unserer Seite
01:03:27gibt es genau
01:03:28ein Element mit
01:03:29der ID CardColor
01:03:30komm her
01:03:33ein QuerySelector
01:03:34nehmen
01:03:35document.querySelector
01:03:40Hashtag
01:03:47und selektiere die Farbe über den QuerySelector
01:03:51da gehe ich aufs Formular
01:03:52und dann übergeben wir die zwei Werte
01:03:57an die Funktion
01:03:59AddCard
01:04:02die wir schon fertig ausprogrammiert haben
01:04:04und
01:04:06Color
01:04:08Schauen wir nach
01:04:13nur laden
01:04:18erster Blick ist immer mal
01:04:20ob irgendwo Fehler sind
01:04:22das 2
01:04:24Add
01:04:25das 2
01:04:26wird hinzugefügt
01:04:27das 3
01:04:29hinzugefügt
01:04:31alles was wir jetzt hinzufügen
01:04:33jeder Task
01:04:34wird immer wieder
01:04:35bei
01:04:36ToDo unten
01:04:37angehängt
01:04:38ok
01:04:42also wir haben
01:04:43die Formularfunktionalität
01:04:45entweder drucken
01:04:46oder auf dem Button drucken
01:04:48und das ganze wird hinzugefügt
01:04:51was jetzt noch fehlt
01:04:53ist folgendes
01:04:54das haben wir im Kurs einmal gemacht
01:04:56jetzt Formular hat eine Funktion
01:04:58damit man
01:04:59die Input-Födern wieder leert
01:05:01das müsst ihr bitte noch machen
01:05:04set a card description
01:05:09weil set description
01:05:10die Funktion noch ausprogrammieren
01:05:12dann
01:05:15das Default Behavior
01:05:20mit Event
01:05:22Prevent Default
01:05:24in den Griff bekommen
01:05:27das haben wir uns angeschaut
01:05:29mit dem
01:05:30Required Field
01:05:31das haben wir ausprobiert
01:05:36mit die Input-Normen
01:05:38mit die Förder
01:05:39oder wir gehen
01:05:40mit den Query-Selector drauf zur
01:05:42genau
01:05:43genau
01:05:44bitte noch
01:05:48Formular-Input-Födern
01:05:50nach hinzufügen
01:05:51löschen
01:05:52set description
01:05:53die Funktionalität
01:05:54ausprogrammieren
01:05:55und
01:05:56was man auf alle Fälle fällt
01:05:57ist die Hintergrundfarbe
01:05:59vom Task noch spezifizieren
01:06:04und ausprogrammieren
01:06:05ich werde euch morgen
01:06:07das ganz kurz noch zeigen
01:06:08ob ihr implementieren solltest
01:06:09dann im Task bitte jeder Server
01:06:11auf Task 2 bezogen
01:06:14da haben wir jetzt diese Funktionalität
01:06:16und das Prozedere ist jetzt immer das gleiche
01:06:19wenn ihr euch so ein Template anschaut
01:06:20von so einem Task
01:06:21haben wir drei Buttons
01:06:22und
01:06:25ihr müsst jetzt quasi Event-Händler
01:06:28für jeden Button definieren
01:06:31den Kontext binden
01:06:32und dann den Event-Händler zuweisen
01:06:35also Klick-Events sind das jetzt standardmäßig
01:06:38wenn wir löschen
01:06:39sollte das ganze wieder vom
01:06:40Document-Object-Model weg
01:06:42gemacht werden
01:06:43also weglöscht werden
01:06:46wenn wir es editieren wollen
01:06:47dann wollen wir den Titel
01:06:48oder die Script schon quasi editieren können
01:06:51genau
01:06:53die Script schon glaube ich kann
01:06:54wir editieren nicht den Titel
01:06:56das ganze
01:06:58ist zum Großteil
01:07:00in Card.js zu lösen
01:07:03schaut ihr das da oben
01:07:05so eine saubere Struktur habt
01:07:06keine Ahnung
01:07:07ich würde dann ganz gerne
01:07:09dass ich so habe
01:07:10dass ich da
01:07:11einen Bereich habe
01:07:12wo ich Kontext binden tue
01:07:13und einen Bereich mache ich mir
01:07:16für Event-Händler
01:07:18deklarieren
01:07:24oder kann ich jeder
01:07:25ein bisschen seinen eigenen Stil entwickeln
01:07:27ok
01:07:28ich glaube das waren nicht sehr viele Hinweise
01:07:29ein bisschen schneller
01:07:30jetzt wahrscheinlich
01:07:31im dritten Mal aufnehmen
01:07:32aber ich hoffe
01:07:33wenn es vielleicht ein bisschen langsamer schwitzt
01:07:34dass das für jeden gut machbar ist
01:07:35damit das für jeden gut machbar ist
01:07:37damit das für jeden gut machbar ist
01:07:38damit das für jeden gut machbar ist
01:07:42das für jeden gut machbar ist
01:07:46ganz sicher