Dynamisches Erstellen von HTML Inhalten

[p-runge]

Vorbereitungen

• [x] Füge zuerst in den body deiner .html Datei ein Div mit der id "root" hinzu.
• [x] Füge außerdem zum Script Element, das die main.js einbindet, das Keyword defer hinzu. Letzteres bewirkt, dass das Script erst ausgeführt wird, nachdem der gesamte Body des HTML Dokuments geladen wurde, was dazu führt, dass das Script auf alle Inhalte des HTML Dokuments Zugriff hat. Mehr dazu hier: https://www.w3schools.com/tags/att_script_defer.asp

Ressourcen

https://www.w3schools.com/jsref/dom_obj_document.asp https://www.w3schools.com/jsref/met_document_getelementbyid.asp https://www.w3schools.com/jsref/met_document_createelement.asp https://www.w3schools.com/jsref/met_domtokenlist_add.asp

Aufgabe

• [x] Erstelle eine Komponente HelloWorld. Eine Komponente ist nichts anderes als eine Funktion. Allerdings mit einer bestimmten Eigenschaft, und zwar dass sie ein Element returnt. Zudem werden Komponenten anders als normaler Funktionen in PascalCase geschrieben. In diesem Falle soll die Funktion ein neues div Element erstellen, ihm den Text Hello world! als Inhalt geben, und dieses Element dann returnen.
• [x] Sobald diese Funktion steht, sollst du das Element mit der id "root" im DOM ausfindig machen, und die Komponente HelloWorld als Child einfügen.
• [x] Lege in /public eine global.css an, in der du eine Klasse .hello-world erstellst, welche ein paar Styles definiert
• [x] Verlinke die CSS Datei in deiner HTML Datei
• [x] Weise diese Klasse dem Element zu, welches in der HelloWorld Komponente erstellt wurde

Wenn alles klappt, sollte deine Seite Hello World! anzeigen und den text entsprechend stylen.