layout |
---|
page |
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.
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.
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.