Mini-homework 2

In questo MHW, proseguirete l’idea progettuale iniziata nel primo MHW, con l’obiettivo di integrare JavaScript all’interno della pagina che avete precedentemente realizzato.

Nello specifico, i requisiti di questo esercizio sono:

• usare addEventListener() per gestire eventi nella pagina;
• usare document.createElement() per creare dinamicamente oggetti HTML a partire da contenuti definiti in JavaScript;
• modificare dinamicamente l’URL di un’immagine tramite l’attributo src;
• modificare dinamicamente la classe degli elementi agendo sulla proprietà classList;
• mostrare o nascondere dinamicamente parti della pagina assegnando o rimuovendo classi CSS che modificano la proprietà display;
• utilizzare attributi data-*.

Alcuni esempi di funzionalità che potete aggiungere sono le seguenti:

• pulsante “leggi di più”, che mostra o nasconde dinamicamente alcuni elementi;
• cambiare una o più immagini della pagina quando l’utente clicca o si muove sopra certi elementi;
• aggiungere una classe “preferito” (con conseguenti modifiche estetiche definite in CSS) quando l’utente clicca su certi elementi della pagina;
• conservare informazioni negli attributi data-*, da usare per mostrare dati aggiuntivi quando l’utente clicca o si muove sopra certi elementi.

Consegna

La consegna del MHW dovrà essere effettuata sul vostro repository GitHub e dovrà includere:

• i file mhw2.html, mhw2.css, mhw2.js e le immagini da inserire nella pagina.

Importante: i file devono essere caricati direttamente nella cartella principale del repository, e non sotto forma di file compressi (es. zip). Inoltre, il nome del repository deve essere testualmente mhw2, non MHW2 o minihomework2 o qualunque altra cosa.

Altre specifiche

Per una piena valutazione, rispettate le seguenti specifiche:

• Utilizzate le nozioni di HTML, CSS e JavaScript che abbiamo visto a lezione.
• Rispettate la separazione delle responsabilità.
• Seguite le linee guida che abbiamo presentato durante le lezioni.
• Usate nomi descrittivi, indentate il codice, e in generale seguite le buone norme relativa alla programmazione.