In questa challenge l’obiettivo è creare una web app che permette di scoprire le ricette di alcuni dei cocktail più famosi. Alla scelta dell’utente di un cocktail, il bicchiere presente nella pagina dovrà riempirsi con gli ingredienti del cocktail cliccato, nella giusta proporzione e nel giusto ordine!

Parti analizzando la struttura dati dei data (data.json). Inizialmente prova a creare il layout statico di un singolo cocktail. Poi prova ad animare gli ingredienti. Solo a quel punto puoi provare a rendere la pagina dinamica, con i pulsanti dei cocktail e il cambio degli ingredienti in base al cocktail selezionato. Per leggere il file json puoi usare fetch o axios. Font: Roboto.

Starter Kit

Nello starter kit troverete una cartella assets:

• img: qui ci saranno le immagini utilizzate per il layout (credits: https://it.freepik.com)
• screenshots: immagini del layout in versione desktop e mobile e il video con le animazioni degli ingredienti
• data.json: elenco dei dati di cocktail