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

## Obiettivo
Infine, l’ultimo passaggio consiste nell’aggiungere la funzionalità di filtraggio degli articoli per argomento, che verrà implementata utilizzando JavaScript.

## Possibile Prompt
È possibile implementare la funzionalità di filtraggio degli articoli per argomento utilizzando pulsanti HTML e JavaScript?

## Risultato
**File index.html**
- Si aggiunge un blocco `nav` all’interno dell’`header` dove verranno posizionati i pulsanti di filtraggio;
- Si assegna a ciascun articolo l’attributo `data-category` con il valore corrispondente all’argomento;
- Si aggiunge il collegamento al file `index.js` prima del tag di chiusura `body`.

**File index.css**<br>
Si aggiungono alcuni stili per rendere i pulsanti di filtraggio più gradevoli.

**File index.js**<br>
Si incolla lo script che implementa la logica di filtraggio.


Tutto questo ci è stato suggerito da ChatGPT. Abbiamo seguito le sue istruzioni.

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+CiAgICAgIDxwPiZjb3B5OyAyMDI0IE15IEJsb2cuIEFsbCByaWdodHMgcmVzZXJ2ZWQuPC9wPgogICAgPC9mb290ZXI+CgogICAgPHNjcmlwdCBzcmM9ImluZGV4LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

LyogUmVzZXQgZGVmYXVsdCBtYXJnaW4gYW5kIHBhZGRpbmcgKi8KYm9keSwKaDEsCmgyLApwLAppbWcgewogIG1hcmdpbjogMDsKICBwYWRkaW5nOiAwOwp9CgovKiBBcHBseSBmb250IGFuZCBiYWNrZ3JvdW5kIGNvbG9ycyAqLwpib2R5IHsKICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UyZGZkMDsKICBjb2xvcjogIzMyMDEyZjsKfQoKLyogSGVhZGVyIHN0eWxpbmcgKi8KaGVhZGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTI0YzQyOwogIHBhZGRpbmc6IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9CgovKiBOYXZpZ2F0aW9uIHN0eWxpbmcgKi8KbmF2IHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgbWFyZ2luOiAyMHB4IDA7Cn0KCm5hdiBidXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICNmOTczMDA7CiAgYm9yZGVyOiBub25lOwogIGNvbG9yOiB3aGl0ZTsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgbWFyZ2luOiAwIDEwcHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIGZvbnQtc2l6ZTogMTZweDsKICBib3JkZXItcmFkaXVzOiA1cHg7Cn0KCm5hdiBidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMzMjAxMmY7Cn0KCi8qIE1haW4gY29udGVudCBzdHlsaW5nICovCm1haW4gewogIHBhZGRpbmc6IDIwcHg7Cn0KCi8qIEFydGljbGUgc3R5bGluZyAqLwphcnRpY2xlIHsKICBtYXJnaW4tYm90dG9tOiAzMHB4Owp9CgovKiBBcnRpY2xlIHRpdGxlIHN0eWxpbmcgKi8KYXJ0aWNsZSBoMiB7CiAgY29sb3I6ICMzMjAxMmY7CiAgZm9udC1zaXplOiAyNHB4OwogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCi8qIEFydGljbGUgcGFyYWdyYXBoIHN0eWxpbmcgKi8KYXJ0aWNsZSBwIHsKICBsaW5lLWhlaWdodDogMS42OwogIG1hcmdpbi1ib3R0b206IDE1cHg7Cn0KCi8qIEltYWdlIHN0eWxpbmcgKi8KYXJ0aWNsZSBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1heC13aWR0aDogMTAwJTsKICBoZWlnaHQ6IGF1dG87CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKLyogQ2F0ZWdvcnkgc3R5bGluZyAqLwphcnRpY2xlIHA6bGFzdC1jaGlsZCB7CiAgZm9udC1zdHlsZTogaXRhbGljOwogIGNvbG9yOiAjZjk3MzAwOwp9CgovKiBGb290ZXIgc3R5bGluZyAqLwpmb290ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICM1MjRjNDI7CiAgY29sb3I6ICNlMmRmZDA7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIHBhZGRpbmc6IDEwcHg7Cn0=

ZnVuY3Rpb24gZmlsdGVyQXJ0aWNsZXMoY2F0ZWdvcnkpIHsKICBjb25zdCBhcnRpY2xlcyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoIm1haW4gYXJ0aWNsZSIpOwoKICBhcnRpY2xlcy5mb3JFYWNoKGFydGljbGUgPT4gewogICAgaWYgKGNhdGVnb3J5ID09PSAiYWxsIiB8fCBhcnRpY2xlLmdldEF0dHJpYnV0ZSgiZGF0YS1jYXRlZ29yeSIpID09PSBjYXRlZ29yeSkgewogICAgICBhcnRpY2xlLnN0eWxlLmRpc3BsYXkgPSAiIjsKICAgIH0gZWxzZSB7CiAgICAgIGFydGljbGUuc3R5bGUuZGlzcGxheSA9ICJub25lIjsKICAgIH0KICB9KTsKfQ==

Ecco fatto. Ce l'hai fatta. **Questo è il tuo sito web completo e pienamente funzionante.** Ottimo lavoro!

Perché aggiungiamo un attributo `data-category` (come `data-category="Health"`) a ciascun elemento `<article>`?

Apprendi le basi dello sviluppo web sfruttando la potenza degli strumenti di intelligenza artificiale come ChatGPT. Comprendi i ruoli di HTML, CSS e JavaScript nella creazione di siti web e come l'IA può migliorare la velocità e la creatività nella programmazione. Esercitati nella creazione di prompt efficaci e nella generazione di codice con ChatGPT. Realizza un sito blog completo da zero utilizzando lo sviluppo assistito dall'IA, acquisendo competenze pratiche per i tuoi progetti web.

Introduzione ai concetti chiave e alle tecnologie nello sviluppo web, incluso il ruolo dell'IA nella programmazione moderna. Questa sezione pone le basi per il percorso di apprendimento, trattando le nozioni fondamentali dello sviluppo web e come l'IA migliori produttività, creatività ed efficienza nella programmazione.

Apprendere le tecnologie essenziali per lo sviluppo web. Esplorazione dei fondamenti di HTML, CSS e JavaScript, analizzando le loro funzionalità individuali e il ruolo collettivo nella definizione del panorama digitale.

Scopri la potenza di ChatGPT esplorandone le capacità e imparando come utilizzarlo in modo efficace.
Approfondimenti sulla creazione di prompt e sull'utilizzo del codice tramite ChatGPT.
Conclusione con suggerimenti pratici su come sfruttare ChatGPT in diverse applicazioni.

Creazione di un sito web di blog completo e funzionale da zero, integrando diverse tecniche di sviluppo web utilizzando ChatGPT.

Implementazione della Funzionalità di Filtraggio

Obiettivo

Possibile Prompt

Risultato

Stato del sito web