13 idee di progetti JavaScript per principianti per affinare le tue abilità di codifica
Le teorie sono noiose.
Quando si tratta di imparare nuove abilità, Preferisco la parte pratica.
Certo, hai bisogno della teoria prima di poter fare pratica. Ma non passate tutto il vostro tempo su una teoria e poi su un’altra. Di sicuro dimenticherete tutto.
Di seguito 13 idee di progetti JavaScript per principianti per sfruttare al meglio il vostro processo di apprendimento.
Mi entusiasma sempre sviluppare giochi. Il gioco delle carte di memoria è uno di questi.
Conosci la regola, vero? Le carte sono rivolte verso il basso su un tabellone. Quando clicchi due carte, le tieni se corrispondono, altrimenti vengono girate di nuovo a faccia in giù. Si continua a giocare finché non si raccolgono tutte le carte.
Popup
Il popup come l’alert() o il prompt() ha dei limiti. Sono semplici. I vostri progetti richiedono sempre più caratteristiche, come più campi da visualizzare, la gestione di azioni complesse, o un’interfaccia utente più curata.
Perciò, costruiamone uno.
Galleria fotografica
Ogni sito eCommerce ha una galleria fotografica nella pagina dei dettagli del prodotto. Puoi costruirne una con caratteristiche come lo zoom, la visualizzazione della foto successiva o precedente.
Calcolatrice
Questo è il primo progetto che ho praticato quando ho imparato JavaScript.
È abbastanza semplice per capire come lavorare con JavaScript, HTML e CSS fino a un certo punto.
Puoi iniziare con alcuni semplici operatori come aggiungere, sottrarre, moltiplicare e dividere. Poi rendete la vostra calcolatrice più professionale aggiungendo alcune funzioni complesse.
Lista delle cose da fare
Invece di usare altre app per le liste di cose da fare, perché non crearne una per te?
Le caratteristiche di base di una lista di cose da fare includono aggiungere, rimuovere, modificare e controllare un elemento. Per divertirti ancora di più, puoi aggiungere un’animazione come colpire lentamente un elemento quando lo completi.
Convalida del modulo
Si ottiene un modulo composto principalmente da tre elementi – username, password e pulsante di login.
Gli utenti devono digitare nome utente e password e poi cliccare sul pulsante di login. La vostra missione è convalidare nome utente e password dopo aver cliccato il pulsante. Se i dati sono validi, allora concedere il permesso agli utenti di accedere al passo successivo.
Orologio
Che tipo di orologio ti piace? Analogico o digitale? Puoi crearli entrambi usando JavaScript, HTML e CSS. Per renderlo fresco, aggiungi delle animazioni fluide.
Citazioni motivazionali
Ogni volta che ti siedi alla tua scrivania, accendendo il computer, aprendo un browser, vedi una citazione motivazionale che ti ispira per un’intera giornata di lavoro.
È possibile realizzare questa applicazione costruendo un’estensione di Chrome.
Strumenti musicali
Amo suonare la musica. Perché non costruire uno strumento da solo? Potrebbe essere un pianoforte, una chitarra o una batteria?
Puoi simulare ogni tasto della tua tastiera in modo che sia un suono del tipo di strumento che vuoi costruire.
Fidati di me. È estremamente divertente!
Barra di avanzamento
Questa barra di progresso sarà mostrata quando gli utenti aspettano il caricamento dei dati.
Puoi farne una semplice animazione o una complessa con alcuni effetti fantastici come il cambiamento dei colori.
Convertitori
Quanti tipi di convertitori usi?
Per me, sono doc in pdf, mp4 in mp3, png in jpeg, o un convertitore di unità, ecc.
Ora, costruiamo il tuo convertitore.
Note
Questo è per prendere appunti e scrivere le tue idee il più velocemente possibile.
Per una versione semplice, basta permettere agli utenti di creare, modificare e cancellare una nota.
Per renderla più interessante, aggiungiamo una funzione che permetta di formattare le note come cambiare il colore del testo, visualizzare il formato HTML/Markdown, ecc.
Quiz
Conosci “Chi è il milionario?”, il programma. In termini tecnici, non è altro che un’applicazione di quiz.
Gli utenti iniziano qualsiasi quiz su qualsiasi campo. Poi, vedono una domanda con 4 (può essere più o meno) opzioni da selezionare. Dopo averne selezionata una e averla inviata, vedranno un’altra domanda. Gli utenti continuano a rispondere fino alla domanda finale.
Nella schermata dei risultati, vedranno quanti punteggi hanno raggiunto e quante domande non hanno risposto.
Conclusione
Ancora una volta, la pratica rende perfetti. Con tutte le idee di cui sopra, è probabile che tu possa affinare le tue abilità JavaScript.
Spero che tu lo trovi utile!