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

## Doel
Tot slot is de laatste stap het toevoegen van functionaliteit voor het filteren van de artikelen op onderwerp, wat zal worden geïmplementeerd met JavaScript.

## Mogelijke Prompt
Kan de functionaliteit voor het filteren van artikelen op onderwerp worden geïmplementeerd met HTML-knoppen en JavaScript?

## Resultaat
**index.html-bestand**
- Een `nav`-blok wordt toegevoegd aan de `header` waar de filterknoppen worden geplaatst;
- Elk artikel krijgt het attribuut `data-category` met de bijbehorende onderwerpwaarde;
- De link naar het `index.js`-bestand wordt toegevoegd vóór de afsluitende `body`-tag.

**index.css-bestand**<br>
Er worden enkele stijlen toegevoegd om de filterknoppen er aantrekkelijk uit te laten zien.

**index.js-bestand**<br>
Het script dat de filterlogica implementeert wordt toegevoegd.


Dit alles is uitgevoerd volgens de instructies van ChatGPT.

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 is het. Je hebt het gedaan. **Dit is je complete, volledig functionele website.** Goed gedaan!

Waarom voegen we een `data-category` attribuut toe (zoals `data-category="Health"`) aan elk `<article>` element?

Leer de basisprincipes van webontwikkeling en maak gebruik van AI-tools zoals ChatGPT. Begrijp de rol van HTML, CSS en JavaScript bij het bouwen van websites en hoe AI de snelheid en creativiteit van coderen kan verhogen. Oefen met het opstellen van effectieve prompts en het genereren van code met ChatGPT. Bouw een complete blogwebsite vanaf nul met behulp van AI-ondersteunde ontwikkeling en ontwikkel praktische vaardigheden voor webprojecten.

Maak kennis met de kernconcepten en technologieën in webontwikkeling, inclusief de rol van AI in moderne codering. Deze sectie legt de basis voor uw leertraject en behandelt de basisprincipes van webontwikkeling en hoe AI de productiviteit, creativiteit en efficiëntie in codering verbetert.

Leer de essentiële webontwikkelingstechnologieën. Verken de basisprincipes van HTML, CSS en JavaScript, waarbij hun individuele functionaliteiten en gezamenlijke rol in het vormgeven van het digitale landschap worden belicht.

Ontdek de kracht van ChatGPT door de mogelijkheden te verkennen en te leren hoe deze effectief kan worden ingezet. Inzicht verkrijgen in het opstellen van prompts en het werken met code via ChatGPT. Afsluiten met praktische tips voor het benutten van ChatGPT in diverse toepassingen.

Een volledige en functionele blogwebsite vanaf nul opzetten, waarbij diverse webontwikkelingstechnieken met ChatGPT worden geïntegreerd.

Filterfunctionaliteit Implementeren

Doel

Mogelijke Prompt

Resultaat