Guida Javascript HTML #2 MinitutorialJavascript - BitcoinConverter

MRPants

Helper
4 Gennaio 2015
103
16
75
111

CONVERTITORE BITCOIN IN EURO


Benritrovati compagni di viaggio nel magico mondo javascript , oggi alzeremo un pò il tiro sempre però proponendo lo stesso format veloce e leggero.
Proveremo a realizzare uno script che converte un numero di bitcoin da noi scelto nel suo effettivo valore in euro.

Prima di tutto creiamo la nostra cartella con il nome del progetto , e poi andiamo a creare i 3 rispettivi file : un html , un css e il nostro script javascript , in questo
caso si tratterà di una sola funzione , ma andremo a vedere come l'importante della programmazione è essere in grado di traslare le nostre idee sul codice, a questo
dobbiamo abituarci quando scriviamo , altrimenti siamo solo dei meri copi-incollatori , sulla base di questo vi invito a provare a fare il tipo di convertitore che più vi aggrada,
Gigabyte - byte , numeri esadecimali ecc il limite è la fantasia, l'importante è ragionare su quello che si và a scrivere. comunque , ritornando in tema, abbiamo la nostra cartella:
Screenshot from 2022-02-09 19-40-48.png



apriamo dal nostro editor , e andiamo ad inserire la seguente struttura html , ricordandosi di richiamare i corrispettivi fogli di stile e script , solitamente si usa mettere il css nell'head e lo script nel body, questo perchè teoricamente conviene sempre tenere tutta la parte di script come ultima per alleggerire il loading della pagina web , essendo che il caricamento viene eseguito dal browser leggendo "dall'alto verso il basso" ( in linea di massima) il codice html .
nella casella di input del numero di bitcoin da convertire , andiamo a richiamare la nostra funzione con l'aritmetica necessaria alla conversione , con "label" otterremo la scritta bitcoin come indicazione nella casella di inserimento.

Screenshot from 2022-02-09 19-11-13.png



fatto il nostro codice html, passiamo alla funzione javascript , niente di troppo complicato , definiamo una funzione con 2 variabili ; Varnum ovvero la variabile che si moltiplicherà per la cifra inserita nel corrispettivo valore in euro , e la variabile "n" ovvero la variabile dedicata all'inserimento della cifra interessata.
non è difficile capire come in 2 click potremmo trasformare questo script in un convertitore euro / "altra criptovaluta" , ma questa è una cosa che lascio a voi..

Screenshot from 2022-02-09 19-13-01.png



arrivati a questo punto , se abbiamo fatto tutto correttamente dovremo avere qualcosa del genere , a scanso di equivoci tasto destro sul file html e apri con il browser installato



Screenshot from 2022-02-09 19-13-17.png





Yeah i'ts working!
now it's the moment per dare un pò di colore , sul css non sento di voler soffermarmi più di tanto , a questo livello di utilizzo le meccaniche di css sono piuttosto banali e intuitive , magari più avanti con strumenti come tailwind tratteremo il css col dovuto rispetto , per il momento cè poco da dire.
Un piccolo spunto ...


Screenshot from 2022-02-09 19-22-08.png



come sempre , più si aggiunge più si impara , più si sbaglia più si migliora. Personalizzate a piacimento.

Ora abbiamo il nostro convertitore fatto e finito


Screenshot from 2022-02-09 19-23-58.png


Carino , può andare.
A questo punto non siamo messi così male , a grandi linee abbiamo visto come inserire del testo , come randomizzare la comparsa di una variabile e con questa puntata ci abbiamo messo dentro un po di matematica e logica, nelle prossime andremo a implementare altre funzionalità , consigli e idee sono sempre ben accetti! :D

Alla prossima

PS: più avanti andrò ad implementare i link github con il codice funzionante per ogni progetto ,
 

MRPants

Helper
4 Gennaio 2015
103
16
75
111
Bellissima condivisione fa capire anche chi non e' nel settore come il sottoscritto
Mi fa' molto piacere , uscirò con altre puntate aumentando gradualmente il livello di difficoltà , se hai perplessità o consigli non esitare a chiedere.
A breve pubblicherò il codice con la soluzione.
Grazie ancora e stay tuned!