Spostamento oggetto

Creare una pagina web come in figura. Il blocco rosso è un div di dimensioni 300x300 px e contiene una tabella 3 x 3. I pulsanti hanno una dimensione di 80 x 80 px. Alla pressione di ogni pulsante il blocco si sposta nella direzione corrispondente al pulsante. 

Indicazioni su come svolgere l'esercizio.

La posizione del blocco rosso è gestita dalle seguenti proprietà CSS:

• position: // indica il tipo di posizionamento dell'oggetto. Nel nostro caso deve essere absolute ad indicare che la posizione dell'oggetto è assoluta e non relativa agli altri elementi della pagina html
• top:  // distanza verticale in pixel del blocco dall'angolo alto sinistro. I valori di questa proprietà devono contenere l'unità di misura. Esempio: 10px, 20px, ... 
• left: // distanza orizzontale in pixel del blocco dall'angolo alto sinistro. Come per la proprietà top, i valori di questa proprietà devono contenere l'unità di misura

Per memorizzare la posizione del blocco si usano due variabili: x e y (che corrispondono rispettivamente alle proprietà left e top).

Inizialmente la posizione del blocco è x=0, y=0. In corrispondenza ad ogni pulsante il valore di x o y verrà incrementato o decrementato di 10. Dopo aver aggiornato il valore di x o y è necessario aggiornare le proprietà left o top aggiungendo la stringa "px" al valore. 

Ad ogni pulsante deve essere abbinato il codice che cambia il valore di x o y in base al pulsante

<button onClick="
    // aggiornamento del valore della variabile y
	y = y ...
	// aggiornamento della proprietà top
	document.getElementById(...).style.top = y + 'px';
">