13 JavaScript projectideeën voor beginners om je codeervaardigheden aan te scherpen
Theorieën zijn saai.
Als het op het leren van nieuwe vaardigheden aankomt, geef ik de voorkeur aan het praktische gedeelte.
Natuurlijk heb je de theorie nodig voordat je kunt oefenen. Maar besteed niet al je tijd aan de ene theorie en dan aan de andere. Je zult dat allemaal zeker vergeten.
Hieronder vind je 13 JavaScript-projectideeën voor beginners om het meeste uit je leerproces te halen.
Ik vind het altijd spannend om spelletjes te ontwikkelen. Het memorykaartspel is er een van.
Je kent de regel, toch? Kaarten liggen met de beeldzijde naar beneden op een bord. Als je twee kaarten klikt, houd je ze als ze overeenkomen, anders worden ze weer omgedraaid. Je speelt door totdat je alle kaarten hebt verzameld.
Popup
De popup zoals de alert() of prompt() heeft beperkingen. Ze zijn eenvoudig. Uw projecten vereisen altijd meer functies, zoals meer velden om weer te geven, het afhandelen van complexe acties, of een gepolijste UI.
Dus, laten we er een bouwen.
Fotogalerij
Elke e-commerce-website heeft een fotogalerij op de pagina met productdetails. U kunt er een maken met functies zoals zoom, volgende of vorige foto bekijken.
Calculator
Dit is het eerste project dat ik heb geoefend toen ik JavaScript leerde.
Het is eenvoudig genoeg om een beetje te begrijpen hoe je met JavaScript, HTML en CSS moet werken.
Je kunt beginnen met een paar eenvoudige operatoren zoals optellen, aftrekken, vermenigvuldigen en delen. Maak je rekenmachine daarna professioneler door wat complexe functies toe te voegen.
Todolijst
In plaats van andere todo-lijst-apps te gebruiken, waarom zou je er dan niet een voor jezelf maken?
De basisfuncties van een takenlijst zijn onder andere het toevoegen, verwijderen, bewerken en controleren van een item. Om het nog leuker te maken, kunt u animaties toevoegen zoals het langzaam aanslaan van een item wanneer u het hebt voltooid.
Formuliervalidatie
Je krijgt een formulier dat voornamelijk uit drie elementen bestaat – gebruikersnaam, wachtwoord, en een inlogknop.
Gebruikers moeten hun gebruikersnaam en wachtwoord invoeren en vervolgens op de inlogknop klikken. Uw missie is het valideren van gebruikersnaam en wachtwoord na het klikken op de knop. Als de gegevens geldig zijn dan het verlenen van toestemming aan gebruikers om de volgende stap te openen.
Klok
Wat voor soort klok vind je mooi? Analoog of digitaal? Je kunt beide maken met JavaScript, HTML en CSS. Voeg wat vloeiende animaties toe om het cool te maken.
Motiverende citaten
Elke keer dat je achter je bureau zit, de computer aanzet en een browser opent, zie je een motiverende quote die je inspireert voor een hele werkdag.
U kunt deze toepassing maken door een Chrome-extensie te bouwen.
Muziekinstrumenten
Van muziek houden. Waarom bouw je niet zelf een instrument? Een piano, een gitaar of een drumstel?
Je kunt elke toets op je keyboard simuleren als het geluid van het instrument dat je wilt bouwen.
Trouw me maar. Het is ontzettend leuk!
Voortgangsbalk
Deze voortgangsbalk wordt weergegeven wanneer gebruikers wachten tot de gegevens zijn geladen.
Je kunt er een eenvoudige animatie van maken of een complexe met een aantal fantastische effecten zoals het veranderen van kleuren.
Converters
Hoeveel soorten converters gebruikt u?
Voor mij zijn dat doc naar pdf, mp4 naar mp3, png naar jpeg, of een eenheidsconverter, enz.
Nu gaan we je eigen converter bouwen.
Note
Deze is bedoeld om aantekeningen te maken en je ideeën zo snel mogelijk op te schrijven.
Voor een eenvoudige versie volstaat het dat gebruikers een notitie kunnen maken, bewerken en verwijderen.
Om het interessanter te maken, voegen we een functie toe waarmee notities kunnen worden opgemaakt, zoals het veranderen van de tekstkleur, het weergeven van HTML/Markdown-indeling, enzovoort.
Quiz
Kent u het programma “Wie is de Miljonair?”show. In technisch opzicht is het niets meer dan een quiz-applicatie.
Gebruikers starten een quiz over willekeurige onderwerpen. Dan zien ze een vraag met 4 (kan meer of minder zijn) opties om uit te kiezen. Na het selecteren van een en het indienen van, zullen ze zien een andere vraag. Gebruikers blijven antwoorden tot de laatste vraag.
Op het resultatenscherm zien ze hoeveel scores ze halen en hoeveel vragen ze niet beantwoorden.
Conclusie
Ook hier geldt: oefening baart kunst. Met alle bovenstaande ideeën is de kans groot dat je je JavaScript-vaardigheden kunt aanscherpen.
Hoop dat je het nuttig vindt!