Hallo thementholist,
wenn Du nicht tust worum ich gebeten habe, sondern was anderes, dann kann das auch nichts werden (leider ist die Umkehrung nicht zwingend richtig...).
Im JS Bereich wird kein HTML erwartet und schon gar nicht verstanden.
<script src="blabla.js"></script> ist HTML. Das hat im JS Bereich nichts zu suchen. Da muss der Inhalt der blabla.js Datei hin.
Und nun die erweiterte Anleitung 😀:
Achtung, das mit dem Kopieren gilt nicht für jQuery. Das lädst Du schon aus einer Internet-Ressource, und die kann man direkt einbinden. Dazu klickst Du auf das kleine Zahnrad oben links neben JS. Du bekommst einen Dialog mit 4 Eingabemöglichkeiten.
(1) JavaScript Preprocessor: Den lässt Du leer.
(2) Search CDNjs: Das Eingabefeld ist ein Fest für Gunnar 😂. Lass es leer. Da ist zwar auch ein jQuery bei, aber eine andere Version. Über Versionsinkompatibilitäten müssen wir nicht anfangen zu grübeln.
(3) Zwei Eingabefelder für andere Ressourcen. Trage in einem davon
https://code.jquery.com/jquery-1.12.4.min.js
ein.
Den Inhalt der beiden anderen Scripte kopierst Du hintereinander in das JS Feld. Vielleicht passt dann noch was nicht, aber das kriegen wir hoffentlich raus.
Im HTML Bereich nimmst Du die beiden <link href="..." rel="stylesheet">
Elemente von Google Fonts und kopierst sie in die Zwischenablage (ins Clipboard). Dann öffnest Du das Zahnrad-Menü von HTML und fügst das im Bereich "Stuff for <head>" ein.
Und nun löschst Du alles im HTML Bereich von <!doctype> bis <body>. Am Ende des HTML Bereichs löschst Du </body> und </html>.
JETZT hast Du einen Codepen. Du bekommst nämlich von codepen.io alles außer dem Body-Inhalt vorgegeben.
Rolf
sumpsi - posui - clusi