10 JavaScript -projektideer til begyndere

JavaScript er et af de mest værdifulde programmeringssprog, der bruges i webudvikling i dag. Med fremkomsten af ​​Express.js, backend-stakken af ​​JavaScript kombineret med en overflod af eksisterende og udviklende front-end-rammer, ser det ud til, at sproget vil blive ved med at revolutionere webprogrammering.

Så hvis du er JavaScript -nybegynder, skal du sidde stille. Disse JavaScript -projektideer vil øge din færdighed og gøre dig bekendt med JavaScripts grundlæggende koncepter. Lad os komme igang.

1. En simpel opgaveliste-app

Mens du opbygger en huskeliste ved hjælp af JavaScript, lærer du den grundlæggende logik bag CRUD-handlinger og udforsker begivenhedshåndteringsfunktionerne i JavaScript. I det væsentlige skal du lave dit script til at oprette opgaver, læse, opdatere og derefter slette dem.

Ved hjælp af begivenhedsbehandlere, vil du instantiere formularer til indtastning af hver opgave og vise dem ved indsendelse. Når JavaScript -koden til styring af din apps funktionalitet fungerer, kan du derefter bruge CSS -gittervisningsmetoden til at organisere hver opgave. Tildel dem derefter prioritet ved hjælp af

Betinget JavaScript -erklæring og datometoder.

Relaterede: Sådan opbygges en grundlæggende opgaveliste-app ved hjælp af JavaScript

Selvom det ikke er obligatorisk, kan du tage dette yderligere ved at gemme opgaver i en lokal database. Lagring af hvert input i en JSON-fil på din lokale maskine giver dig eksempelvis en idé om, hvordan du udfører CRUD-operationer, når du håndterer et virkeligt JSON-objekt, et array eller en NoSQL-database.

2. Opret en enkel timer

En timer er et af de nemmeste projekter, du hurtigt kan udføre ved hjælp af JavaScript. Selvom dette lyder temmelig grundlæggende, lærer det dig, hvordan du automatisk ændrer tilstanden for et element med intervaller ved hjælp af JavaScript.

For at gøre det mere unikt kan du bygge en nedtællingstimer, der stopper ved en brugerspecificeret værdi. Du behøver ikke at gemme nogen post i en database eller et JSON -objekt, da dette er en forekomst, som en bruger kan justere, som de vil.

Mens du koder timeren, gør du dig bekendt med JavaScript -funktioner. Plus, du lærer, hvordan du skriver JavaScript -kode til grundlæggende matematiske konverteringer, da du muligvis skal konvertere nogle tidsparametre.

3. Byg en billedkarrusel fra bunden

En karrusel er en af ​​de mest visuelt tiltrækkende tilføjelser til et websteds brugergrænseflade. Når det kombineres med fantastisk UX, tilføjer det en slank effekt til dit brugergrænseflade. Plus, det lader dig vise billeder eller genstande unikt.

For at bygge en funktionel og reaktiv karrusel skal du gøre dine hænder beskidte med JavaScript -loop. Du kan få dine billeder fra DOM og skubbe dem ind i et tomt JavaScript -array. Du tilføjer derefter klikhændelser til en næste og en tidligere knap for at vise billeder successivt, enten til højre eller venstre.

Det er dog ikke en streng tilgang. Du kan bruge enhver metode, der fungerer bedst for dig.

Hvis du er nysgerrig og vil gå den ekstra mil, kan du tilføje animationer til din skærm for at gøre dette mere realistisk og let at bruge.

4. Webberegner

JavaScript, ligesom andre programmeringssprog, understøtter adskillige matematiske operationer. Så mens du koder dette projekt, lærer du, hvordan du tilføjer klikhændelser til tilpassede knapper eller divs og organiserer dem til at blive en responsiv lommeregner, der vises i browseren.

Hvis du ikke allerede kender dem, kan du starte med at lege med JavaScript -operatører. Og vikl derefter dine hænder rundt om eventbehandlere for bedre at forstå konceptet bag dem.

Relaterede: Sådan opbygges en simpel lommeregner ved hjælp af HTML, CSS og JavaScript

Selvom det er mere omfattende, kan du starte med at skrive dit script proceduremæssigt. Men overvej at omarbejde det til funktioner, når din lommeregner begynder at fungere. Du kan nærme dig dette ved oprette en CSS flexbox. Tildel derefter værdier og operatorer til dem ved hjælp af HTML. Du kan derefter kalde din eventhåndteringsfunktion på hvert element i fleksboksen ved hjælp af JavaScript -loop.

5. Genoptag generator med JavaScript

Selvom du måske er lidt forvirret over, hvordan du starter med denne, er der et par genoptagelses-web-apps derude, hvor du kan få fat i din idé.

I sidste ende vil du lave en genanvendelig genoptagelsesbygger, der kan acceptere nye oplysninger og slippe eller opdatere eksisterende.

Det er ikke svært at komme med flere CV -skabeloner, når du forstår den grundlæggende logik. Så du kan starte med en enkelt skabelon og skalere op til mere iørefaldende designs som tiden går. Selvfølgelig vil du også tilføje en download -knap, så brugerne kan få deres CV som en PDF.

Et genoptagelsesprojekt hjælper dig med at forstå grundlæggende JavaScript CRUD-operationer. Derudover lærer du, hvordan du bruger loops, event-behandlere, betingelser og nogle af de indbyggede funktioner i JavaScript. Du kan også gemme brugernes oplysninger i et JSON -objekt, så dit program senere kan referere til det.

6. Byg en browserudvidelse

Det kan se komplekst ud at opbygge en browserudvidelse til et startprojekt. Men det er ikke, når du forstår kravene til kodning af en funktionel.

Det er en værdifuld opgave at påtage sig, især hvis du allerede har en grundlæggende viden om JavaScript og gerne vil lege med et udfordrende projekt.

Selvom det kan blive lidt trættende at justere din udvidelse til at fungere på tværs af flere browsere, kan du starte med en browserspecifik udvidelse. Og du behøver ikke at bygge en kompleks. Din kan f.eks. Være en simpel filoverførsel eller en billedresizer.

Mens du bygger din udvidelse, skal du også gøre den installerbar i browseren. Det er her, du angiver dine apps oplysninger i en "manifest.json" -fil, så browseren kan genkende og acceptere dem.

7. Lav en budgetteringsapplikation

Vi vil alle overvåge, hvordan vi bruger vores penge for at undgå at overskride budgettet. En budgetteringsapp lader dig spore dine udgifter, så du ikke bruger mere end du havde regnet med.

Uanset om du bygger dette for dig selv eller andre, er det en skat værd at gemme i dit lager. Oprettelse af en DIY-budget-app med JavaScript forbedrer ikke kun din viden om DOM-gengivelse, men du lærer også, hvordan du anvender JavaScript-operatører til at løse problemer i virkeligheden.

Mens du skriver din kode, indsamler du formularinput og fratrækker udgifter fra dit budget. Du kan tage dette yderligere ved at skrive kode for at indstille en automatisk advarsel til brugeren, når de er ved at overskride deres budget.

8. Enhedskonverter

Vil du lege med grundlæggende operatører og betingede udsagn i JavsScript? Derefter giver dig en fleksibilitet ved at oprette en enhedsomformer.

Ud over at skrive matematiske formler til konvertering af forskellige enheder frem og tilbage, lærer du, hvordan du justerer matematiske output i JavaScript og gengiver dem på klientsiden. Da din app sandsynligvis vil håndtere flere konverteringer, kan du oprette en rullemenu, hvor brugerne kan vælge deres valgenheder.

Logiske udsagn håndterer derefter, hvordan dit script konverterer parametrene baseret på brugerens valg. En enhedsomformer er faktisk et af de letteste projekter på listen.

9. Opret en dagbog

Her er et ret praktisk projekt for dem, der elsker at holde øje med deres daglige løb. En dagbogsapp med JavaScript er et alsidigt, men enkelt projekt, der er velegnet til begyndere.

Fordi det er en app til notering, og du skal angive datoer i henhold til aktiviteter, kan du gemme din input i en fil som et JSON -objekt og derefter referere til dem senere, når du skal spore din historik og gemme input.

Selvom det kan vise sig at være lidt kompliceret, kan du spare brugerne for at manuelt vælge tidspunktet for deres aktiviteter ved at skrive kode for at gemme tiden automatisk. Ligesom en opgave-app lærer dette dig også, hvordan du bygger en CRUD-applikation ved hjælp af JavaScript.

10. Brick Breaker Game

Hvis du ikke vidste det, kan du også bygge et simpelt spil ved hjælp af vanille JavaScript. Hvis du kender 2D -spil, skal du have spillet eller set et breakout -spil før.

Selvom det kan kræve en vis fremsynethed og eftertanke, er et af positive sider ved dette projekt det sjove, det bringer i sidste ende. Selvom det ikke er en sikker gateway til spiludvikling, lærer du om mange af JavaScript -funktionerne, mens du arbejder på denne opgave.

Funktionalitet er dog målet. Men du skal muligvis kombinere noget CSS med JavaScript her for at arrangere dine mursten jævnt. I sidste ende vil dit program diktere, hvornår en spiller vinder eller taber, og hvad der sker bagefter.

JavaScript: Bliv ved med at lære

En praktisk del af disse projektideer vil øge dine JavaScript-færdigheder og forberede dig på virkelige projekter. Når det er sagt, mens styling er afgørende i de fleste af disse projekter, skal du være forsigtig med ikke at blive distraheret af det førstehånds. Men fokus på den funktionalitet, som JavaScript tilbyder, og du begynder at bygge responsive websteder med JavaScript, før du ved af det. Glad kodning!

10 ideer til Python -projekt, der er velegnede til begyndere

Du kender det grundlæggende, og nu er du klar til at anvende dem. Kom i gang med disse Python -projekter!

Læs Næste

Om forfatteren