#Frontenders Community
In questa challenge dovrete implementare un'app che, tramite drag and drop, permetta di trascinare dei pesci su una bilancia. Ogni pesce ha un peso (espresso in chili) e un prezzo al chilo. Man mano che trasciniamo i pesci il guadagno mostrato dalla bilancia aumenta.
Non è obbligatorio che il layout sia responsive, possiamo immaginarlo anche solo per tablet / desktop. Il drag and drop deve essere implementato in modo nativo con JS, quindi senza librerie.
Nello starter kit troverte
- assets: contiene le immagini necessarie per la creazione dell'app
- index.html: è il file HTML su cui lavorare, ha già collegati il file css e il file js
- css: contiene il file CSS e all'interno sono già importati i font necessari
- js: contiene il file JS con un array di partenza di pesci, ma sentitevi liberi di aggiungerne altri (troverete diverse immagini negli assets)
Partite con una struttura a blocchi che definisca il vostro layout (hint: flex o grid qui possono salvare diverse ore di lavoro). Una volta creati i blocchi iniziate ad inserire il contenuto. Una volta completato il layout, popolate i box di sotto con i pesci. Solo a questo punto iniziate a capire come implementare il drag and drop (API: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
HTML, CSS/SASS, JS (o qualsiasi framework tu preferisca) No librerie CSS