Flere projektidéer til forbedring af dine kodefærdigheder

For to uger siden offentliggjorde jeg en artikel, der indeholder 15 projektideer, som du kan opbygge for at udjævne dine kodningsfærdigheder, og folk var meget begejstrede for den ressource.

App-ideer-arkivet har også fået næsten 3000 stjerner siden jeg offentliggjorde den artikel. Det er sindssygt! ?

Tak alle for det! ?

I dette indlæg gennemgår vi nogle nye projekter, der blev føjet til lageret siden da.

Som en hurtig påmindelse er alle projekterne opdelt i tre niveauer baseret på den viden og erfaring, der kræves for at gennemføre dem. Tjek beskrivelsen af niveauer i lageret.

Nedenfor finder du 2 begyndere , 4 mellemliggende og 3 avancerede projektidéer.

1. BEREGNER

Niveau: 1 - Begynder

Regnemaskiner er ikke kun et af de mest nyttige værktøjer til rådighed, men de er også en fantastisk måde at forstå UI og hændelsesbehandling i en applikation på. I dette problem opretter du en lommeregner, der understøtter grundlæggende aritmetiske beregninger på heltal.

Stylingen er op til dig, så brug din fantasi og bliv kreativ! Du kan også finde det værd at bruge tid på at eksperimentere med lommeregner-appen på din mobile enhed for bedre at forstå grundlæggende funktionalitet og kanttilfælde.

Begrænsninger

  • Du kan ikke bruge eval()funktionen til at udføre beregninger

Brugerhistorier

  • Brugeren kan se et display, der viser det aktuelle indtastede nummer eller resultatet af den sidste handling.
  • Brugeren kan se en indtastningstastatur, der indeholder knapper til cifrene 0–9, operationer - '+', '-', '/' og '=', en 'C' -knap (til sletning) og en 'AC' -knap (for ryd alle).
  • Brugeren kan indtaste tal som sekvenser på op til 8 cifre ved at klikke på cifre i indtastningstastaturet. Indtastning af cifre mere end 8 ignoreres.
  • Brugeren kan klikke på en operationsknap for at få vist resultatet af denne handling på: _ resultatet af den foregående operation og det sidst indtastede nummer ELLER _ de sidste to indtastede tal ELLER * det sidst indtastede nummer
  • Brugeren kan klikke på 'C' knappen for at rydde det sidste nummer eller den sidste handling. Hvis brugerens sidste post var en handling, opdateres skærmen til den værdi, der gik forud for den.
  • Brugeren kan klikke på knappen 'AC' for at rydde alle interne arbejdsområder og indstille displayet til 0.
  • Brugeren kan se 'ERR' vises, hvis en handling overstiger det maksimale med 8 cifre.

Bonusfunktioner

  • Brugeren kan klikke på knappen '+/-' for at ændre tegnet på det nummer, der aktuelt vises.
  • Brugeren kan se en decimaltegn (.) På indtastningstastaturet, der gør det muligt at indtaste flydende numre op til 3 steder og udføre operationer til det maksimale antal indtastede decimaler for et enkelt nummer.

Nyttige links og ressourcer

  • Lommeregner (Wikipedia)
  • MDN

Eksempel på projekter

2. OPDRAGSAPP

Niveau: 1 - Begynder

Du har måske ikke indset dette, men opskrifter er ikke andet end kulinariske algoritmer. Ligesom programmer er opskrifter en række vigtige trin, der, hvis de følges korrekt, resulterer i en velsmagende skål.

Målet med appen Opskrift er at hjælpe brugeren med at administrere opskrifter på en måde, der gør dem nemme at følge.

Begrænsninger

  • I den oprindelige version af denne app kan opskriftsdataene være kodet som en JSON-fil. Efter implementering af den oprindelige version af denne app kan du udvide dette for at vedligeholde opskrifter i en fil eller database.

Brugerhistorier

  • Brugeren kan se en liste over opskrifttitler
  • Brugeren kan klikke på en opskriftstitel for at få vist et opskriftskort, der indeholder opskriftens titel, måltidstype (morgenmad, frokost, aftensmad eller snack), antallet af personer, det serverer, dets sværhedsgrad (begynder, mellemliggende, avanceret), ingredienslisten (inklusive deres beløb) og forberedelsestrinene.
  • Bruger klikker på en ny opskriftstitel for at erstatte det aktuelle kort med en ny opskrift.

Bonusfunktioner

  • Brugeren kan se et foto, der viser, hvordan elementet ser ud, når det er forberedt.
  • Brugeren kan søge efter en opskrift, der ikke er på listen over opskriftstitler, ved at indtaste måltidets navn i et søgefelt og klikke på knappen 'Søg'. Enhver open source opskrift API kan bruges som kilde til opskrifter (se The MealDB nedenfor).
  • Brugeren kan se en liste over opskrifter, der matcher søgeudtrykkene
  • Bruger kan klikke på navnet på opskriften for at få vist sit opskriftskort.
  • Brugeren kan se en advarselsmeddelelse, hvis der ikke blev fundet nogen matchende opskrift.
  • Brugeren kan klikke på knappen 'Gem' på kortene til opskrifter, der findes via API'en, for at gemme en kopi til denne opskriftsfil eller database.

Nyttige links og ressourcer

  • Brug af Fetch
  • Axios
  • MealDB API

Eksempel på projekter

3. TEGNINGSAPP

Niveau: 2 - Mellemliggende

Opret digitalt kunstværk på et lærred på nettet for at dele online og også eksportere som billeder.

Brugerhistorier

  • Brugeren kan tegne et canvasved hjælp af musen
  • Brugeren kan ændre farven
  • Brugeren kan ændre størrelsen på værktøjet
  • Brugeren kan trykke på en knap for at rydde canvas

Bonusfunktioner

  • Brugeren kan gemme illustrationen som et billede ( .png, .jpgosv format)
  • Brugeren kan tegne forskellige figurer ( rectangle, circle, star, etc.)
  • Brugeren kan dele illustrationer på sociale medier

Nyttige links og ressourcer

  • Lær hvordan du opretter en tegningsapplikation ved hjælp af p5js

Eksempel på projekter

4. EMOJI TRANSLATOR

Niveau: 2 - Mellemliggende

Emojis er blevet det moderne samfunds lingua franca . De er en sjov og hurtig måde at kommunikere på, men også en ekstremt udtryksfuld mekanisme til at kommunikere følelser og reaktioner.

Formålet med Emoji Translator-appen er at oversætte tekst, der er indtastet af brugeren, til en tilsvarende streng emoji, oversat fra et eller flere ord i den originale tekst, og ord, for hvilke der ikke er nogen tilsvarende emoji.

Brugerhistorier

  • Brugeren kan indtaste en streng med ord, tal og tegnsætning i et tekstfelt
  • Brugeren kan klikke på knappen 'Oversæt' for at oversætte ord i den indtastede tekst til deres tilsvarende emoji.
  • Brugeren kan se en advarselsmeddelelse, hvis der blev klikket på 'Oversæt', men inputtekstfeltet var tomt eller uændret fra den sidste oversættelse.
  • Brugeren kan se tekstelementer i den indtastede tekst oversat til deres ækvivalente emojis i et outputtekstfelt. Tekstelementer, hvor der ikke er nogen emoji, forbliver uændrede.
  • Brugeren kan klikke på knappen 'Ryd' for at rydde input- og outputtekstfelterne.

Bonusfunktioner

  • Udvikler implementerer en emoji-synonymfunktion, så appen kan oversætte et bredere udvalg af ord til emoji.
  • Brugeren kan vælge det sprog, inputteksten indtastes fra en rulleliste med sprog.

Nyttige links og ressourcer

Fuld Emoji-liste v12.0

Eksempel på projekter

Emoji Oversæt

5. MEME GENERATOR APP

Niveau: 2 - Mellemliggende

Tillad brugere at generere brugerdefinerede memer ved at tilføje tekst over et billede.

Brugerhistorier

  • Brugeren kan uploade et billede, der vises på et lærred
  • Brugeren kan tilføje tekst i den øverste del af billedet
  • Brugeren kan tilføje tekst i den nederste del af billedet
  • Brugeren kan vælge farven på teksten
  • Brugeren kan vælge størrelsen på teksten
  • Brugeren kan gemme den resulterende meme

Bonusfunktioner

  • Brugeren kan vælge skrifttypefamilien til teksten
  • Brugeren kan dele meme på sociale medier (twitter, reddit, facebook osv.)
  • Brugeren kan trække teksten rundt og placere den, hvor han vil, oven på billedet
  • Brugeren kan tegne figurer oven på billedet (cirkler, rektangler eller gratis tegning med musen)

Nyttige links og ressourcer

At arbejde med lærred gøres meget let af p5js-biblioteket.

Eksempel på projekter

Meme Generator af imgflip

6. TYPNINGSPRAKSIS

Niveau: 2 - Mellemliggende

Nogle ting er så indlysende, at de let kan overses. Som udvikler er din evne til at skrive hurtigt og præcist en faktor, der påvirker din udviklingsproduktivitet. Målet med Typing Practice-appen er at give dig skriveøvelse sammen med metrics, så du kan måle dine fremskridt.

Indtastningsøvelse viser et ord, som du derefter skal skrive inden for et bestemt tidsinterval. Hvis ordet er skrevet forkert, forbliver det på skærmen, og tidsintervallet forbliver det samme. Men når ordet er skrevet korrekt, vises et nyt ord, og tidsintervallet reduceres lidt.

Forhåbentlig hjælper denne gentagne praksis dig med at forbedre både din skrivehastighed og nøjagtighed.

Brugerhistorier

  • Brugeren kan se tidsintervallet ord skal indtastes vises i app-vinduet.
  • Brugeren kan se antallet af vellykkede forsøg og antallet af samlede forsøg i en score-boks.
  • Brugeren kan klikke på knappen 'Start øvelse' for at starte træningssessionen.
  • Brugeren kan se promptordet vises i et tekstfelt.
  • Brugeren kan begynde at skrive ordet i et tekstinputfelt.
  • Brugeren kan se de bogstaver, der er blevet skrevet, blinke, hvis der er indtastet et forkert bogstav, og tekstindtastningsfeltet ryddes.
  • Brugeren kan se en meddelelse ved siden af ​​tekstindtastningsfeltet, der angiver, at brugeren skal prøve igen, hvis der er indtastet et forkert bogstav.
  • Brugeren kan se antallet af samlede forsøg, der er steget i scoringsfeltet.
  • Brugeren kan se en tillykke, hvis ordet er korrekt skrevet.
  • Brugeren kan se tidsintervallet ord skal indtastes reduceret med en lille mængde, hvis ordet er korrekt skrevet.
  • Brugeren kan se antallet af vellykkede forsøg steget i score-feltet, hvis ordet blev skrevet korrekt.
  • Brugeren kan klikke på knappen 'Stop øvelse' for at stoppe træningssessionen.

Bonusfunktioner

  • Brugeren kan høre en unik lydsignal, når et nyt ord vises, et ord er korrekt indtastet, eller et forkert bogstav er skrevet i ordet.
  • Brugeren kan logge ind på appen
  • Brugeren kan se kumulative præstationsstatistikker på tværs af alle sine træningssessioner.

Nyttige links og ressourcer

  • keydown
  • setInterval

Eksempel på projekter

Twiddler Typing Tutor

7. Elevator

Niveau: 3 - Avanceret

Det er svært at tænke på en verden uden elevatorer. Især hvis du skal gå op og ned 20 trapper hver dag. Men hvis du tænker over det, var elevatorer en af ​​de originale implementeringer af begivenheder og begivenhedshåndterere længe før webapplikationer kom på scenen.

Målet med Elevator-appen er at simulere driften af ​​en elevator og endnu vigtigere, hvordan man håndterer de begivenheder, der genereres, når beboerne bruger den. Denne app simulerer beboere, der opfordrer til en elevator fra enhver etage og trykker på knapperne inde i elevatoren for at indikere det gulv, de ønsker at besøge.

Begrænsninger

  • Du skal implementere en enkelt begivenhedshåndterer til knapperne op og ned på hver etage. For eksempel, hvis der er 4 etager, skal en enkelt begivenhedshåndterer implementeres i stedet for 8 (to knapper pr. Etage).
  • Tilsvarende skal der implementeres en enkelt begivenhedshåndterer for alle knapper på kontrolpanelet i elevatoren snarere end en unik begivenhedshåndterer for hver knap.

Brugerhistorier

  • Brugeren kan se et tværsnitsdiagram over en bygning med fire etager, en elevatorskakt, elevatoren og en op-knap på første sal, op og ned-knapper på anden og tredje etage og en ned-knap på fjerde etage.
  • Brugeren kan se elevatorens kontrolpanel med en knap til hver etage til siden af ​​diagrammet.
  • Brugeren kan klikke på op og ned-knappen på enhver etage for at ringe til elevatoren.
  • Brugeren kan forvente, at ved at klikke på knapperne op og ned på et hvilket som helst gulv for at anmode om elevatoren, vil de blive sat i kø og serviceret i den rækkefølge, de blev klikket på.
  • Brugeren kan se elevatoren bevæge sig op og ned på skaftet til det gulv, den blev kaldt til.
  • Brugeren kan klikke på elevatorens kontrolpanel for at vælge det gulv, det skal rejse til.
  • Brugeren kan forvente, at elevatoren holder pause i 5 sekunder og venter på, at der klikkes på en gulvknap på kontrolpanelet. Hvis der ikke klikkes på en gulvknap inden for det tidsrum, behandler elevatoren den næste opkaldsanmodning.
  • Brugeren kan forvente, at elevatoren vender tilbage til første sal, når der ikke er anmodninger om behandling.

Bonusfunktioner

  • Brugeren kan se en advarselsmeddelelse, hvis antallet af elevatoranmodninger overstiger det maksimale tilladte antal. Denne grænse overlades til udvikleren.
  • Brugeren kan høre en lyd, når elevatoren ankommer til et gulv.
  • Brugeren kan se en beboer tilfældigt ankomme til et gulv for at angive, hvornår brugeren skal klikke på opkaldsknappen op eller ned på denne etage.
  • Brugeren kan angive tidsintervallet mellem nye beboere, der ankommer for at ringe til en elevator.

Nyttige links og ressourcer

Første ind, først ud kø (Wikipedia)

Eksempel på projekter

8. Hurtig mad simulator app

Niveau: 3 - Avanceret

Fast Food-appen simulerer driften af ​​en simpel take-away-restaurant og er designet til at hjælpe udvikleren med at få deres viden om løfter og SOLID-designprincipper til at fungere.

Denne app simulerer kunder i en take-away restaurant, der placerer ordrer og venter på, at de skal være forberedt og leveret til en afhentningsdisk. Efter afgivelse af ordren venter kunden på ordren, der skal meddeles, inden den afhentes og fortsætter til spisepladsen.

Brugerhistorierne, der udgør denne app, centrerer omkring fire forskellige roller:

  • Bruger - slutbrugeren, der bruger applikationen
  • Kunde - den simulerede kunde
  • Order Taker - den simulerede Order Taker
  • Cook - den simulerede Cook
  • Server - den simulerede server

Denne app har en hel række brugerhistorier. Vær dog ikke overvældet. Tag dig tid til at skitsere ikke kun brugergrænsefladen, men hvordan de forskellige aktører (roller) interagerer og trinvist bygger appen efter Agile-principper.

Begrænsninger

  • Bestil billetter kan repræsenteres som to forskellige typer løfter - den ene serveren venter på, mens kokken forbereder ordren, og den anden kunden venter på, mens han er i serveringslinjen.
  • Brug den oprindelige ækvivalent til JS Promises på det sprog, du vælger at udvikle dig på. JS-udviklere skal bruge native Promises og ikke async/await.
  • Opret denne app ved hjælp af funktioner på modersmål. Du må IKKE bruge en simuleringspakke eller et bibliotek.
  • Nye kunder ankommer i ordrelinjen med et fast tidsinterval. Med andre ord ankommer nye kunder med en konstant hastighed.
  • Bestil billetter opfyldes også med et fast tidsinterval. De udføres konstant.

Brugerhistorier

Betjening af applikationen

  • Brugeren kan se et inputområde, der tillader indtastning af tidsintervallet for kundens ankomst og et tidsinterval for udførelsen af ​​en ordrebillet af kokken.
  • Brugeren kan se en tilpasset advarselsmeddelelse, hvis kundens ankomstinterval eller ordreudførelsesintervallet er forkert indtastet.
  • Brugeren kan starte simuleringen ved at klikke på en Start-knap.
  • Brugeren kan se et ordrelinjeområde, der indeholder et tekstfelt, der viser antallet af kunder, der venter på at afgive ordrer.
  • Brugeren kan se et ordreområde, der indeholder tekstfelter, der viser det ordrenummer, der aktuelt tages.
  • Brugeren kan se et køkkenområde, der indeholder et tekstfelt, der viser ordrenummeret , der forberedes, og et tekstfelt, der viser de ventende ordrer i rækkefølge sammen med en optælling af antallet af ventende ordrer.
  • Brugeren kan se et afhentningsområde, der indeholder et tekstfelt, der viser det ordrenummer, der i øjeblikket er tilgængeligt for afhentning af kunden, og et tekstfelt, der viser antallet af kunder, der venter i betjeningslinjen.
  • Brugeren kan når som helst stoppe simuleringen ved at klikke på en Stop-knap.

Bonusfunktioner

  • Brugeren kan angive, hvor lang tid det tager for en ordreudvikler at oprette en ordrebillet .
  • Brugeren kan angive, hvor lang tid det tager for serveren at levere en ordre til kunden.
  • Brugeren kan angive det samlede tidsrum, som simuleringen skal køre, når der er klikket på Start-knappen.
  • Brugeren kan se en animeret visning af kunder og ordrer, når de bevæger sig gennem arbejdsgangen.

Nyttige links og ressourcer

  • Fast Food Simulator - Logisk arbejdsgang
  • Agilt manifest og 12 principper for agil software
  • SOLID-principper, som enhver udvikler bør vide
  • Brug af løfter
  • Løfte

9. SHELL SPIL

Niveau: 3 - Avanceret

Et Shell-spil er et klassisk hasardspil, der går tilbage til det antikke Grækenland. At spille det kræver tre skaller, en ært, håndfleksibilitet fra operatøren og ivrige observationsfærdigheder fra spillerens side. Det er også et klassisk con-spil, da det er let for operatøren at svindle spilleren. Gudskelov sidstnævnte er ikke vores hensigt med denne app.

Dette Shell-spil er beregnet til at give en grafisk grænseflade til det klassiske shell-spil og give spilleren et ærligt spil at spille. Vores spil tegner tre skaller på lærredet sammen med ærten, flytter ærten under en af ​​skallerne og blander skallerne i et bestemt tidsinterval. Brugeren skal derefter klikke på den skal, de mener, at ærten er skjult under. Brugeren har lov til at fortsætte med at gætte, indtil ærten er placeret.

Brugerhistorier

  • Brugeren kan se lærredet med tre skaller og ærten.
  • Brugeren kan klikke på skallen, som ærten skal skjules under.
  • Brugeren kan se ærterne bevæge sig under den skal, der er blevet klikket på.
  • Brugeren kan klikke på en 'Shuffle' -knap for at starte en animeret blanding af skaller i 5 sekunder.
  • Brugeren kan klikke på skallen, som hun mener erten er skjult under, når animationen stopper.
  • Brugeren kan se skallen, der er klikket på, stige for at afsløre, om ærten er skjult under den.
  • Brugeren kan fortsætte med at klikke på skaller, indtil ærten er fundet.
  • Brugeren kan se en tillykke, når ærten er placeret
  • Brugeren kan starte et nyt spil ved at klikke på en skal, som ærten skal skjules under (trin 2 ovenfor). Trinene ovenfor gentages derefter.

Bonusfunktioner

  • Brugeren kan se et score-panel, der indeholder antallet af gevinster og antallet af spillede spil.
  • Brugeren kan se antallet af spillede spil stige, når ærten er skjult under en skal
  • Brugeren kan se antallet af gevinster steget, når ærten findes på det første gæt.
  • Brugeren kan se skallen, der skjuler ærten for at animere (farve, størrelse eller en anden effekt), når der klikkes på den (et korrekt gæt).

Nyttige links og ressourcer

  • Shell-spil (Wikipedia)
  • Javascript HTML DOM-animation
  • p5js animationsbibliotek

Eksempel på projekter

Konklusion

Glem ikke at tjekke den forrige artikel og arkivet, hvis du vil finde flere applikations- / projektideer.

Også, hvis oplysningerne fra denne artikel og fra repoen var nyttige for dig på nogen måde, skal du sørge for at give den en stjerne?; på denne måde kan andre finde det og drage fordel også! Tak skal du have!

Har du nogle forslag til, hvordan vi generelt kan forbedre dette projekt? Lad os vide! Vi vil meget gerne høre din feedback!

Du er velkommen til at bidrage med dine egne ideer! Vi kan gøre dette lager til go-to-ressourcen, når det kommer til appidéer.

Oprindeligt offentliggjort på www.florin-pop.com.