Summary  
This chapter covers how to implement code that filters displayed elements by attaching click handlers to buttons and using data attributes with DOM manipulation to show or hide items based on the selected category.

General domain of usage  
Blog websites

## Ziel
Abschließend wird als letzter Schritt die Funktionalität zum Filtern der Artikel nach Thema hinzugefügt, die mit JavaScript umgesetzt wird.

## Möglicher Prompt
Kannst du die Funktion zum Filtern von Artikeln nach Thema mit HTML-Buttons und JavaScript umsetzen?

## Ergebnis
**index.html Datei**
- Hinzufügen eines `nav`-Blocks im `header`, in dem die Filter-Buttons platziert werden;
- Jeder Artikel erhält das Attribut `data-category` mit dem entsprechenden Themenwert;
- Einfügen des Links zur `index.js`-Datei vor dem schließenden `body`-Tag.

**index.css Datei**<br>
Hinzufügen von Styles, um die Filter-Buttons optisch ansprechend zu gestalten.

**index.js Datei**<br>
Einfügen des Skripts, das die Filterlogik implementiert.


All dies wurde von ChatGPT vorgeschlagen. Wir haben die Anweisungen befolgt.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TXkgQmxvZzwvdGl0bGU+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9ImluZGV4LmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aGVhZGVyPgogICAgICA8aDE+V2VsY29tZSB0byBNeSBCbG9nPC9oMT4KICAgICAgPG5hdj4KICAgICAgICA8YnV0dG9uIG9uY2xpY2s9ImZpbHRlckFydGljbGVzKCdhbGwnKSI+QWxsPC9idXR0b24+CiAgICAgICAgPGJ1dHRvbiBvbmNsaWNrPSJmaWx0ZXJBcnRpY2xlcygnRW52aXJvbm1lbnQnKSI+RW52aXJvbm1lbnQ8L2J1dHRvbj4KICAgICAgICA8YnV0dG9uIG9uY2xpY2s9ImZpbHRlckFydGljbGVzKCdIZWFsdGgnKSI+SGVhbHRoPC9idXR0b24+CiAgICAgIDwvbmF2PgogICAgPC9oZWFkZXI+CgogICAgPG1haW4+CiAgICAgIDxhcnRpY2xlIGRhdGEtY2F0ZWdvcnk9IkhlYWx0aCI+CiAgICAgICAgPGgyPlVubG9ja2luZyB0aGUgUG93ZXIgb2YgRGFpbHkgSGFiaXRzIGZvciBPcHRpbWFsIEhlYWx0aDwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBNYWludGFpbmluZyBvcHRpbWFsIGhlYWx0aCBpcyBhIG11bHRpZmFjZXRlZCBlbmRlYXZvciwgb2Z0ZW4gYWNoaWV2ZWQgdGhyb3VnaCB0aGUKICAgICAgICAgIGNvbnNpc3RlbnQgcHJhY3RpY2Ugb2YgaGVhbHRoeSBoYWJpdHMuIE51dHJpdGlvbiBwbGF5cyBhIHBpdm90YWwgcm9sZSBpbiBvdXIgb3ZlcmFsbAogICAgICAgICAgd2VsbC1iZWluZywgc2VydmluZyBhcyB0aGUgZm91bmRhdGlvbiBmb3Igdml0YWxpdHkgYW5kIGRpc2Vhc2UgcHJldmVudGlvbi4gRW1icmFjaW5nIGEKICAgICAgICAgIGJhbGFuY2VkIGRpZXQgcmljaCBpbiBmcnVpdHMsIHZlZ2V0YWJsZXMsIGxlYW4gcHJvdGVpbnMsIGFuZCB3aG9sZSBncmFpbnMgZnVlbHMgb3VyIGJvZGllcwogICAgICAgICAgd2l0aCBlc3NlbnRpYWwgbnV0cmllbnRzIHdoaWxlIGZvcnRpZnlpbmcgb3VyIGltbXVuZSBzeXN0ZW1zLiBNb3Jlb3ZlciwgcHJpb3JpdGl6aW5nCiAgICAgICAgICBoeWRyYXRpb24gZW5zdXJlcyBwcm9wZXIgYm9kaWx5IGZ1bmN0aW9ucyBhbmQgc3VwcG9ydHMgY29nbml0aXZlIHBlcmZvcm1hbmNlLiBCeQogICAgICAgICAgaW50ZWdyYXRpbmcgbWluZGZ1bCBlYXRpbmcgcHJhY3RpY2VzIGFuZCBzdGF5aW5nIGh5ZHJhdGVkLCBpbmRpdmlkdWFscyBjYW4gZW5oYW5jZSB0aGVpcgogICAgICAgICAgZW5lcmd5IGxldmVscywgcHJvbW90ZSB3ZWlnaHQgbWFuYWdlbWVudCwgYW5kIHJlZHVjZSB0aGUgcmlzayBvZiBjaHJvbmljIGNvbmRpdGlvbnMgc3VjaAogICAgICAgICAgYXMgaGVhcnQgZGlzZWFzZSBhbmQgZGlhYmV0ZXMuCiAgICAgICAgPC9wPgogICAgICAgIDxpbWcKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE0NzczMzI1NTI5NDYtY2ZiMzg0YWVhZjFjP3E9ODAmdz0yOTQwJmF1dG89Zm9ybWF0JmZpdD1jcm9wJml4bGliPXJiLTQuMC4zJml4aWQ9TTN3eE1qQTNmREI4TUh4d2FHOTBieTF3WVdkbGZIeDhmR1Z1ZkRCOGZIeDhmQSUzRCUzRCIKICAgICAgICAgIGFsdD0iVW5sb2NraW5nIHRoZSBQb3dlciBvZiBEYWlseSBIYWJpdHMgZm9yIE9wdGltYWwgSGVhbHRoIgogICAgICAgICAgd2lkdGg9IjM2MCIKICAgICAgICAvPgogICAgICAgIDxwPgogICAgICAgICAgSW4gYWRkaXRpb24gdG8gbnV0cml0aW9uLCByZWd1bGFyIHBoeXNpY2FsIGFjdGl2aXR5IGlzIHBhcmFtb3VudCBmb3IgbWFpbnRhaW5pbmcgb3B0aW1hbAogICAgICAgICAgaGVhbHRoLiBFbmdhZ2luZyBpbiBtb2RlcmF0ZSBleGVyY2lzZSBmb3IgYXQgbGVhc3QgMzAgbWludXRlcyBtb3N0IGRheXMgb2YgdGhlIHdlZWsgb2ZmZXJzCiAgICAgICAgICBhIG15cmlhZCBvZiBiZW5lZml0cywgaW5jbHVkaW5nIGltcHJvdmVkIGNhcmRpb3Zhc2N1bGFyIGhlYWx0aCwgc3RyZW5ndGhlbmVkIG11c2NsZXMgYW5kCiAgICAgICAgICBib25lcywgYW5kIGVuaGFuY2VkIG1vb2QuIEZ1cnRoZXJtb3JlLCBjb25zaXN0ZW50IGV4ZXJjaXNlIGhlbHBzIG1hbmFnZSBzdHJlc3MgbGV2ZWxzIGFuZAogICAgICAgICAgcHJvbW90ZXMgYmV0dGVyIHNsZWVwIHF1YWxpdHksIGNydWNpYWwgY29tcG9uZW50cyBvZiBvdmVyYWxsIHdlbGwtYmVpbmcuIEJ5IGluY29ycG9yYXRpbmcKICAgICAgICAgIGVuam95YWJsZSBwaHlzaWNhbCBhY3Rpdml0aWVzIGludG8gZGFpbHkgcm91dGluZXMsIGluZGl2aWR1YWxzIGNhbiBjdWx0aXZhdGUgc3VzdGFpbmFibGUKICAgICAgICAgIGhhYml0cyB0aGF0IGNvbnRyaWJ1dGUgdG8gYSBoZWFsdGhpZXIsIG1vcmUgZnVsZmlsbGluZyBsaWZlLiBUaHJvdWdoIHRoZSBzeW5lcmd5IG9mCiAgICAgICAgICBudXRyaXRpb3VzIGVhdGluZyBhbmQgcmVndWxhciBleGVyY2lzZSwgaW5kaXZpZHVhbHMgY2FuIHVubG9jayB0aGUgcG93ZXIgb2YgZGFpbHkgaGFiaXRzCiAgICAgICAgICB0byBvcHRpbWl6ZSB0aGVpciBoZWFsdGggYW5kIHZpdGFsaXR5LgogICAgICAgIDwvcD4KICAgICAgICA8cD5DYXRlZ29yeTogPHN0cm9uZz5IZWFsdGg8L3N0cm9uZz48L3A+CiAgICAgIDwvYXJ0aWNsZT4KCiAgICAgIDxhcnRpY2xlIGRhdGEtY2F0ZWdvcnk9IkVudmlyb25tZW50Ij4KICAgICAgICA8aDI+VGhlIENydWNpYWwgUm9sZSBvZiBEYWlseSBBY3Rpb25zIGluIEVudmlyb25tZW50YWwgUHJlc2VydmF0aW9uPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIEVudmlyb25tZW50YWwgcHJlc2VydmF0aW9uIGlzIGEgY29sbGVjdGl2ZSByZXNwb25zaWJpbGl0eSB0aGF0IGhpbmdlcyBvbiB0aGUgZGFpbHkgYWN0aW9ucwogICAgICAgICAgb2YgaW5kaXZpZHVhbHMuIFNpbXBsZSB5ZXQgaW1wYWN0ZnVsIGhhYml0cyBjYW4gc2lnbmlmaWNhbnRseSBjb250cmlidXRlIHRvIHRoZSBoZWFsdGggb2YKICAgICAgICAgIG91ciBwbGFuZXQuIE9uZSBzdWNoIHByYWN0aWNlIGlzIHJlZHVjaW5nIHdhc3RlIHRocm91Z2ggbWluZGZ1bCBjb25zdW1wdGlvbiBhbmQgcmVjeWNsaW5nLgogICAgICAgICAgQnkgY2hvb3NpbmcgcmV1c2FibGUgcHJvZHVjdHMsIG1pbmltaXppbmcgc2luZ2xlLXVzZSBwbGFzdGljcywgYW5kIHByb3Blcmx5IHNvcnRpbmcKICAgICAgICAgIHJlY3ljbGFibGVzLCBpbmRpdmlkdWFscyBjYW4gZGVjcmVhc2UgdGhlIGFtb3VudCBvZiB3YXN0ZSB0aGF0IGVuZHMgdXAgaW4gbGFuZGZpbGxzIGFuZAogICAgICAgICAgb2NlYW5zLiBUaGlzLCBpbiB0dXJuLCBoZWxwcyBwcm90ZWN0IHdpbGRsaWZlIGFuZCByZWR1Y2VzIHBvbGx1dGlvbi4gTW9yZW92ZXIsIHN1cHBvcnRpbmcKICAgICAgICAgIHN1c3RhaW5hYmxlIHByb2R1Y3RzIGFuZCBwcmFjdGljZXMsIHN1Y2ggYXMgcHVyY2hhc2luZyBsb2NhbGx5LXNvdXJjZWQgYW5kIGVjby1mcmllbmRseQogICAgICAgICAgZ29vZHMsIGNhbiBmdXJ0aGVyIGRpbWluaXNoIG91ciBlbnZpcm9ubWVudGFsIGZvb3RwcmludC4KICAgICAgICA8L3A+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2ltYWdlcy51bnNwbGFzaC5jb20vcGhvdG8tMTUzNTkxNDI1NDk4MS1iNTAxMmVlYmJkMTU/cT04MCZ3PTI5NDAmYXV0bz1mb3JtYXQmZml0PWNyb3AmaXhsaWI9cmItNC4wLjMmaXhpZD1NM3d4TWpBM2ZEQjhNSHh3YUc5MGJ5MXdZV2RsZkh4OGZHVnVmREI4Zkh4OGZBJTNEJTNEIgogICAgICAgICAgYWx0PSJUaGUgQ3J1Y2lhbCBSb2xlIG9mIERhaWx5IEFjdGlvbnMgaW4gRW52aXJvbm1lbnRhbCBQcmVzZXJ2YXRpb24iCiAgICAgICAgICB3aWR0aD0iMzYwIgogICAgICAgIC8+CiAgICAgICAgPHA+CiAgICAgICAgICBBbm90aGVyIGNyaXRpY2FsIGFzcGVjdCBvZiBlbnZpcm9ubWVudGFsIHByZXNlcnZhdGlvbiBpcyBlbmVyZ3kgY29uc2VydmF0aW9uLiBTbWFsbAogICAgICAgICAgY2hhbmdlcyBpbiBvdXIgZGFpbHkgcm91dGluZXMgY2FuIGxlYWQgdG8gc3Vic3RhbnRpYWwgZW5lcmd5IHNhdmluZ3MuIEZvciBpbnN0YW5jZSwKICAgICAgICAgIHR1cm5pbmcgb2ZmIGxpZ2h0cyB3aGVuIG5vdCBpbiB1c2UsIHVucGx1Z2dpbmcgZWxlY3Ryb25pYyBkZXZpY2VzLCBhbmQgdXRpbGl6aW5nCiAgICAgICAgICBlbmVyZ3ktZWZmaWNpZW50IGFwcGxpYW5jZXMgY2FuIHNpZ25pZmljYW50bHkgcmVkdWNlIGhvdXNlaG9sZCBlbmVyZ3kgY29uc3VtcHRpb24uCiAgICAgICAgICBBZGRpdGlvbmFsbHksIG9wdGluZyBmb3IgcHVibGljIHRyYW5zcG9ydGF0aW9uLCBjYXJwb29saW5nLCBvciB1c2luZyBhbHRlcm5hdGl2ZSBtb2RlcyBvZgogICAgICAgICAgdHJhbnNwb3J0IGxpa2UgY3ljbGluZyBvciB3YWxraW5nIGNhbiBkZWNyZWFzZSBncmVlbmhvdXNlIGdhcyBlbWlzc2lvbnMuIFRoZXNlIHByYWN0aWNlcwogICAgICAgICAgbm90IG9ubHkgaGVscCBtaXRpZ2F0ZSBjbGltYXRlIGNoYW5nZSBidXQgYWxzbyBwcm9tb3RlIGNsZWFuZXIgYWlyIGFuZCBoZWFsdGhpZXIKICAgICAgICAgIGNvbW11bml0aWVzLiBCeSBpbnRlZ3JhdGluZyB0aGVzZSBlbnZpcm9ubWVudGFsbHkgY29uc2Npb3VzIGhhYml0cyBpbnRvIG91ciBkYWlseSBsaXZlcywKICAgICAgICAgIHdlIGNhbiBjb2xsZWN0aXZlbHkgbWFrZSBhIHNpZ25pZmljYW50IGltcGFjdCBvbiBwcmVzZXJ2aW5nIHRoZSBwbGFuZXQgZm9yIGZ1dHVyZQogICAgICAgICAgZ2VuZXJhdGlvbnMuCiAgICAgICAgPC9wPgogICAgICAgIDxwPkNhdGVnb3J5OiA8c3Ryb25nPkVudmlyb25tZW50PC9zdHJvbmc+PC9wPgogICAgICA8L2FydGljbGU+CgogICAgICA8YXJ0aWNsZSBkYXRhLWNhdGVnb3J5PSJIZWFsdGgiPgogICAgICAgIDxoMj5UaGUgSW1wb3J0YW5jZSBvZiBNZW50YWwgSGVhbHRoIGluIE92ZXJhbGwgV2VsbC1CZWluZzwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBNZW50YWwgaGVhbHRoIGlzIGFuIGludGVncmFsIGNvbXBvbmVudCBvZiBvdmVyYWxsIHdlbGwtYmVpbmcsIGluZmx1ZW5jaW5nIGhvdyB3ZSB0aGluaywKICAgICAgICAgIGZlZWwsIGFuZCBhY3QgaW4gb3VyIGRhaWx5IGxpdmVzLiBJdCBwbGF5cyBhIGNydWNpYWwgcm9sZSBpbiBkZXRlcm1pbmluZyBob3cgd2UgaGFuZGxlCiAgICAgICAgICBzdHJlc3MsIHJlbGF0ZSB0byBvdGhlcnMsIGFuZCBtYWtlIGNob2ljZXMuIFByb21vdGluZyBtZW50YWwgaGVhbHRoIHN0YXJ0cyB3aXRoCiAgICAgICAgICByZWNvZ25pemluZyBhbmQgYWRkcmVzc2luZyB0aGUgc2lnbnMgb2YgbWVudGFsIGhlYWx0aCBpc3N1ZXMsIHN1Y2ggYXMgcHJvbG9uZ2VkIHN0cmVzcywKICAgICAgICAgIGFueGlldHksIGFuZCBkZXByZXNzaW9uLiBSZWd1bGFyIG1lbnRhbCBoZWFsdGggY2hlY2staW5zLCB3aGV0aGVyIHRocm91Z2ggc2VsZi1yZWZsZWN0aW9uCiAgICAgICAgICBvciBwcm9mZXNzaW9uYWwgY291bnNlbGluZywgY2FuIGhlbHAgaW5kaXZpZHVhbHMgbWFuYWdlIHRoZWlyIGVtb3Rpb25zIGFuZCBtYWludGFpbiBhCiAgICAgICAgICBiYWxhbmNlZCBvdXRsb29rIG9uIGxpZmUuIFByaW9yaXRpemluZyBtZW50YWwgaGVhbHRoIGNhbiBsZWFkIHRvIGltcHJvdmVkIHJlbGF0aW9uc2hpcHMsCiAgICAgICAgICBwcm9kdWN0aXZpdHksIGFuZCBhIGJldHRlciBxdWFsaXR5IG9mIGxpZmUuCiAgICAgICAgPC9wPgogICAgICAgIDxpbWcKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE1MDYxMjY2MTM0MDgtZWNhMDdjZTY4NzczP3E9ODAmdz0yMjAyJmF1dG89Zm9ybWF0JmZpdD1jcm9wJml4bGliPXJiLTQuMC4zJml4aWQ9TTN3eE1qQTNmREI4TUh4d2FHOTBieTF3WVdkbGZIeDhmR1Z1ZkRCOGZIeDhmQSUzRCUzRCIKICAgICAgICAgIGFsdD0iVGhlIEltcG9ydGFuY2Ugb2YgTWVudGFsIEhlYWx0aCBpbiBPdmVyYWxsIFdlbGwtQmVpbmciCiAgICAgICAgICB3aWR0aD0iMzYwIgogICAgICAgIC8+CiAgICAgICAgPHA+CiAgICAgICAgICBJbmNvcnBvcmF0aW5nIG1lbnRhbCBoZWFsdGggcHJhY3RpY2VzIGludG8gZGFpbHkgcm91dGluZXMgaXMgZXNzZW50aWFsIGZvciBzdXN0YWluaW5nCiAgICAgICAgICBtZW50YWwgd2VsbC1iZWluZy4gVGVjaG5pcXVlcyBzdWNoIGFzIG1pbmRmdWxuZXNzLCBtZWRpdGF0aW9uLCBhbmQgcmVndWxhciBwaHlzaWNhbAogICAgICAgICAgYWN0aXZpdHkgY2FuIHJlZHVjZSBzdHJlc3MgYW5kIGVuaGFuY2UgbW9vZC4gTWluZGZ1bG5lc3MgZW5jb3VyYWdlcyBwcmVzZW50LW1vbWVudAogICAgICAgICAgYXdhcmVuZXNzLCBoZWxwaW5nIGluZGl2aWR1YWxzIG1hbmFnZSBvdmVyd2hlbG1pbmcgdGhvdWdodHMgYW5kIGVtb3Rpb25zLiBTaW1pbGFybHksCiAgICAgICAgICBtZWRpdGF0aW9uIHByb21vdGVzIHJlbGF4YXRpb24gYW5kIG1lbnRhbCBjbGFyaXR5LCB3aGlsZSBwaHlzaWNhbCBhY3Rpdml0eSByZWxlYXNlcwogICAgICAgICAgZW5kb3JwaGlucywgd2hpY2ggYXJlIG5hdHVyYWwgbW9vZCBsaWZ0ZXJzLiBFbnN1cmluZyBhZGVxdWF0ZSBzbGVlcCwgbWFpbnRhaW5pbmcgYSBoZWFsdGh5CiAgICAgICAgICBkaWV0LCBhbmQgZm9zdGVyaW5nIHNvY2lhbCBjb25uZWN0aW9ucyBhbHNvIGNvbnRyaWJ1dGUgdG8gbWVudGFsIHJlc2lsaWVuY2UuIEJ5IGVtYmVkZGluZwogICAgICAgICAgdGhlc2UgcHJhY3RpY2VzIGludG8gZGFpbHkgbGlmZSwgaW5kaXZpZHVhbHMgY2FuIHN1cHBvcnQgdGhlaXIgbWVudGFsIGhlYWx0aCwgbGVhZGluZyB0byBhCiAgICAgICAgICBtb3JlIGJhbGFuY2VkIGFuZCBmdWxmaWxsaW5nIGxpZmUuCiAgICAgICAgPC9wPgogICAgICAgIDxwPkNhdGVnb3J5OiA8c3Ryb25nPkhlYWx0aDwvc3Ryb25nPjwvcD4KICAgICAgPC9hcnRpY2xlPgogICAgPC9tYWluPgoKICAgIDxmb290ZXI+CiAgICAgIDxwPiZjb3B5OyBNeSBCbG9nLiBBbGwgcmlnaHRzIHJlc2VydmVkLjwvcD4KICAgIDwvZm9vdGVyPgoKICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogUmVzZXQgZGVmYXVsdCBtYXJnaW4gYW5kIHBhZGRpbmcgKi8KYm9keSwKaDEsCmgyLApwLAppbWcgewogIG1hcmdpbjogMDsKICBwYWRkaW5nOiAwOwp9CgovKiBBcHBseSBmb250IGFuZCBiYWNrZ3JvdW5kIGNvbG9ycyAqLwpib2R5IHsKICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UyZGZkMDsKICBjb2xvcjogIzMyMDEyZjsKfQoKLyogSGVhZGVyIHN0eWxpbmcgKi8KaGVhZGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTI0YzQyOwogIHBhZGRpbmc6IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9CgovKiBOYXZpZ2F0aW9uIHN0eWxpbmcgKi8KbmF2IHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgbWFyZ2luOiAyMHB4IDA7Cn0KCm5hdiBidXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICNmOTczMDA7CiAgYm9yZGVyOiBub25lOwogIGNvbG9yOiB3aGl0ZTsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgbWFyZ2luOiAwIDEwcHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIGZvbnQtc2l6ZTogMTZweDsKICBib3JkZXItcmFkaXVzOiA1cHg7Cn0KCm5hdiBidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMzMjAxMmY7Cn0KCi8qIE1haW4gY29udGVudCBzdHlsaW5nICovCm1haW4gewogIHBhZGRpbmc6IDIwcHg7Cn0KCi8qIEFydGljbGUgc3R5bGluZyAqLwphcnRpY2xlIHsKICBtYXJnaW4tYm90dG9tOiAzMHB4Owp9CgovKiBBcnRpY2xlIHRpdGxlIHN0eWxpbmcgKi8KYXJ0aWNsZSBoMiB7CiAgY29sb3I6ICMzMjAxMmY7CiAgZm9udC1zaXplOiAyNHB4OwogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCi8qIEFydGljbGUgcGFyYWdyYXBoIHN0eWxpbmcgKi8KYXJ0aWNsZSBwIHsKICBsaW5lLWhlaWdodDogMS42OwogIG1hcmdpbi1ib3R0b206IDE1cHg7Cn0KCi8qIEltYWdlIHN0eWxpbmcgKi8KYXJ0aWNsZSBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1heC13aWR0aDogMTAwJTsKICBoZWlnaHQ6IGF1dG87CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKLyogQ2F0ZWdvcnkgc3R5bGluZyAqLwphcnRpY2xlIHA6bGFzdC1jaGlsZCB7CiAgZm9udC1zdHlsZTogaXRhbGljOwogIGNvbG9yOiAjZjk3MzAwOwp9CgovKiBGb290ZXIgc3R5bGluZyAqLwpmb290ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICM1MjRjNDI7CiAgY29sb3I6ICNlMmRmZDA7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIHBhZGRpbmc6IDEwcHg7Cn0=

ZnVuY3Rpb24gZmlsdGVyQXJ0aWNsZXMoY2F0ZWdvcnkpIHsKICBjb25zdCBhcnRpY2xlcyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoIm1haW4gYXJ0aWNsZSIpOwoKICBhcnRpY2xlcy5mb3JFYWNoKGFydGljbGUgPT4gewogICAgaWYgKGNhdGVnb3J5ID09PSAiYWxsIiB8fCBhcnRpY2xlLmdldEF0dHJpYnV0ZSgiZGF0YS1jYXRlZ29yeSIpID09PSBjYXRlZ29yeSkgewogICAgICBhcnRpY2xlLnN0eWxlLmRpc3BsYXkgPSAiIjsKICAgIH0gZWxzZSB7CiAgICAgIGFydGljbGUuc3R5bGUuZGlzcGxheSA9ICJub25lIjsKICAgIH0KICB9KTsKfQ==

Hier ist es. Du hast es geschafft. **Dies ist deine vollständige, voll funktionsfähige Website.** Großartige Arbeit!

Warum fügen wir jedem `data-category`-Element ein `data-category="Health"`-Attribut (wie `<article>`) hinzu?

Erlernen Sie die Grundlagen der Webentwicklung und nutzen Sie dabei die Leistungsfähigkeit von KI-Tools wie ChatGPT. Verstehen Sie die Aufgaben von HTML, CSS und JavaScript beim Erstellen von Websites und wie KI Ihre Codiergeschwindigkeit und Kreativität steigern kann. Üben Sie das Erstellen effektiver Prompts und das Generieren von Code mit ChatGPT. Entwickeln Sie eine vollständige Blog-Website von Grund auf mithilfe KI-gestützter Entwicklung und erwerben Sie praktische Fähigkeiten für Ihre Webprojekte.

Einführung in die wichtigsten Konzepte und Technologien der Webentwicklung, einschließlich der Rolle von KI im modernen Programmieren. Dieser Abschnitt bildet die Grundlage für Ihren Lernweg, behandelt die Grundlagen der Webentwicklung und zeigt auf, wie KI Produktivität, Kreativität und Effizienz beim Programmieren steigert.

Erlernen der grundlegenden Webentwicklungstechnologien. Vertiefung in die Grundlagen von HTML, CSS und JavaScript, mit Erläuterung ihrer jeweiligen Funktionen und ihrer gemeinsamen Rolle bei der Gestaltung der digitalen Landschaft.

Erkunden Sie die Leistungsfähigkeit von ChatGPT, indem Sie dessen Fähigkeiten kennenlernen und erfahren, wie es effektiv genutzt werden kann.
Einblicke in die Erstellung von Prompts und die Arbeit mit Code durch ChatGPT.
Abschließende praktische Hinweise zur Nutzung von ChatGPT in verschiedenen Anwendungen.

Erstellen einer vollständigen und funktionsfähigen Blog-Website von Grund auf unter Einbeziehung verschiedener Webentwicklungstechniken mit ChatGPT.

Implementierung der Filterfunktionalität

Ziel

Möglicher Prompt

Ergebnis