Viac projektových nápadov na zlepšenie vašich kódovacích schopností

Pred dvoma týždňami som zverejnil článok obsahujúci 15 nápadov na projekty, ktoré môžete vytvoriť, aby ste si zdokonalili svoje kódovacie schopnosti, a ľudia boli týmto zdrojom veľmi nadšení.

Odkedy som uverejnil tento článok, úložisko nápadov na aplikácie získalo takmer 3 000 hviezdičiek. To je šialené! ?

Ďakujem vám všetkým za to! ?

V tomto príspevku si prejdeme niekoľko nových projektov, ktoré boli odvtedy pridané do úložiska.

Pre rýchlu pripomienku sú všetky projekty rozdelené do troch úrovní na základe znalostí a skúseností potrebných na ich dokončenie. Skontrolujte popis úrovní v úložisku.

Ďalej nájdete 2 začiatočnícke , 4 stredne pokročilé a 3 pokročilé nápady na projekty.

1. VÝPOČET

Úroveň: 1 - Začiatočník

Kalkulačky sú nielen jedným z najužitočnejších nástrojov, ktoré sú k dispozícii, ale sú tiež vynikajúcim spôsobom, ako porozumieť používateľskému rozhraniu a spracovaniu udalostí v aplikácii. V tomto probléme vytvoríte kalkulačku, ktorá podporuje základné aritmetické výpočty celých čísel.

Styling je na vás, takže využite svoju fantáziu a buďte kreatívni! Možno sa vám tiež oplatí experimentovať s aplikáciou kalkulačka na mobilnom zariadení, aby ste lepšie pochopili základné funkcie a okrajové prípady.

Obmedzenia

  • Túto eval()funkciu nemusíte používať na vykonávanie výpočtov

Príbehy používateľov

  • Používateľ môže vidieť displej zobrazujúci aktuálne zadané číslo alebo výsledok poslednej operácie.
  • Užívateľ môže vidieť vstupný panel obsahujúci tlačidlá pre číslice 0–9, operácie - „+“, „-“, „/“ a „=“, tlačidlo „C“ (na vymazanie) a tlačidlo „AC“ (pre vymazanie všetkých).
  • Užívateľ môže zadávať čísla ako sekvencie dlhé až 8 číslic kliknutím na číslice na vstupnom paneli. Zadanie akýchkoľvek číslic viac ako 8 bude ignorované.
  • Užívateľ môže kliknutím na prevádzkové tlačidlo zobraziť výsledok tejto operácie na: _ výsledku predchádzajúcej operácie a zadaného posledného čísla ALEBO _ zadaných posledných dvoch čísel ALEBO * zadaného posledného čísla
  • Užívateľ môže kliknutím na tlačidlo „C“ vymazať posledné číslo alebo poslednú operáciu. Ak posledným vstupom používateľov bola operácia, displej sa aktualizuje na hodnotu, ktorá jej predchádzala.
  • Užívateľ môže kliknutím na tlačidlo „AC“ vyčistiť všetky vnútorné pracovné oblasti a nastaviť displej na 0.
  • Užívateľ môže vidieť zobrazené „ERR“, ak by ktorákoľvek operácia prekročila maximum 8 číslic.

Bonusové funkcie

  • Užívateľ môže kliknúť na tlačidlo „+/-“ a zmeniť znamienko čísla, ktoré je aktuálne zobrazené.
  • Používateľ môže na vstupnej klávesnici vidieť tlačidlo s desatinnou čiarkou (.), Ktoré umožňuje zadávať čísla s pohyblivou rádovou čiarkou až na 3 miesta a vykonávať operácie s maximálnym počtom zadaných desatinných miest pre ľubovoľné jedno číslo.

Užitočné odkazy a zdroje

  • Kalkulačka (Wikipedia)
  • MDN

Príklady projektov

2. RECEPTOVÁ APP

Úroveň: 1 - Začiatočník

Možno ste si to neuvedomili, ale recepty nie sú nič iné ako kulinárske algoritmy. Rovnako ako programy, aj recepty sú radom nevyhnutných krokov, ktorých výsledkom je chutné jedlo, pokiaľ sú dodržané správne.

Cieľom aplikácie Recept je pomôcť používateľovi spravovať recepty spôsobom, ktorý uľahčí ich sledovanie.

Obmedzenia

  • Pre počiatočnú verziu tejto aplikácie môžu byť údaje o receptúrach zakódované ako súbor JSON. Po implementácii počiatočnej verzie tejto aplikácie to môžete rozšíriť, aby ste udržali recepty v súbore alebo databáze.

Príbehy používateľov

  • Používateľ si môže pozrieť zoznam názvov receptov
  • Užívateľ môže kliknutím na názov receptu zobraziť kartu receptu obsahujúcu názov receptu, typ jedla (raňajky, obed, večera alebo olovrant), počet osôb, ktoré podáva, stupeň ich náročnosti (začiatočník, stredne pokročilý, pokročilý), zoznam ingrediencií (vrátane ich množstva) a kroky prípravy.
  • Užívateľ klikne na nový názov receptu a nahradí aktuálnu kartu novým receptom.

Bonusové funkcie

  • Používateľ môže vidieť fotografiu, ktorá ukazuje, ako položka vyzerá po príprave.
  • Užívateľ môže vyhľadať recept, ktorý nie je v zozname názvov receptov, zadaním názvu jedla do vyhľadávacieho poľa a kliknutím na tlačidlo „Hľadať“. Ako zdroj receptov sa môže použiť akékoľvek API s otvorenými zdrojmi receptov (pozri The MealDB nižšie).
  • Používateľ môže vidieť zoznam receptov zodpovedajúcich hľadaným výrazom
  • Užívateľ môže kliknúť na názov receptu a zobraziť svoju kartu receptu.
  • Užívateľ môže vidieť varovnú správu, ak nebol nájdený žiadny zodpovedajúci recept.
  • Užívateľ môže kliknúť na tlačidlo „Uložiť“ na kartách receptov umiestnených cez API a uložiť tak kópiu do tohto súboru receptov alebo databázy aplikácií.

Užitočné odkazy a zdroje

  • Pomocou načítania
  • Axios
  • MealDB API

Príklady projektov

3. ČERPANIE APP

Úroveň: 2 - Stredne pokročilí

Vytvorte digitálne kresby na plátne na webe, aby ste ich mohli zdieľať online a tiež exportovať ako obrázky.

Príbehy používateľov

  • Užívateľ môže čerpať canvaspomocou myši
  • Užívateľ môže zmeniť farbu
  • Užívateľ môže zmeniť veľkosť nástroja
  • Užívateľ môže stlačiť tlačidlo na vymazanie canvas

Bonusové funkcie

  • Užívateľ môže uložiť kresbu ako obrázok ( .png, .jpgatď formát)
  • Užívateľ si môže kresliť rôzne tvary ( rectangle, circle, staratď)
  • Používateľ môže zdieľať umelecké diela na sociálnych sieťach

Užitočné odkazy a zdroje

  • Naučte sa, ako vytvoriť aplikáciu na kreslenie pomocou p5js

Príklady projektov

4. EMOJI PREKLADATEĽ

Úroveň: 2 - Stredne pokročilí

Emodži sa stali lingua franca modernej spoločnosti. Predstavujú zábavný a rýchly spôsob komunikácie, ale tiež mimoriadne expresívny mechanizmus na komunikáciu emócií a reakcií.

Cieľom aplikácie Emoji Translator je preložiť text zadaný používateľom do ekvivalentného reťazca emodži preloženého z jedného alebo viacerých slov v pôvodnom texte a slov, pre ktoré neexistujú žiadne zodpovedajúce emodži.

Príbehy používateľov

  • Užívateľ môže do textového poľa zadať reťazec slov, čísel a interpunkčných znamienok
  • Používateľ môže kliknúť na tlačidlo „Preložiť“ a preložiť slová v zadanom texte do ich zodpovedajúcich emodži.
  • Používateľ môže vidieť varovnú správu, ak kliknete na tlačidlo „Preložiť“, ale vstupné textové pole bolo prázdne alebo nezmenené od posledného prekladu.
  • Používateľ môže vidieť textové prvky v zadanom texte preložené do ich ekvivalentných emodži vo výstupnom textovom poli. Textové prvky, ktoré neobsahujú žiadne emodži, zostanú nezmenené.
  • Používateľ môže kliknutím na tlačidlo „Vymazať“ vymazať vstupné a výstupné textové polia.

Bonusové funkcie

  • Vývojár implementuje funkciu synonyma emodži, ktorá aplikácii umožní preložiť do emodži širšiu škálu slov.
  • Používateľ si môže z rozbaľovacieho zoznamu jazykov zvoliť jazyk, do ktorého sa vstupný text zadáva.

Užitočné odkazy a zdroje

Celý zoznam emodži v12.0

Príklady projektov

Preklad emodži

5. MEME GENERATOR APP

Úroveň: 2 - Stredne pokročilí

Umožnite používateľom generovať vlastné mémy pridaním textu cez obrázok.

Príbehy používateľov

  • Používateľ môže nahrať obrázok, ktorý sa zobrazí na plátne
  • Užívateľ môže pridať text do hornej časti obrázka
  • Užívateľ môže pridať text do spodnej časti obrázka
  • Užívateľ si môže zvoliť farbu textu
  • Užívateľ si môže zvoliť veľkosť textu
  • Užívateľ si môže výsledný mem uložiť

Bonusové funkcie

  • Užívateľ si môže zvoliť rodinu fontov pre text
  • Užívateľ môže zdieľať mém na sociálnych sieťach (twitter, reddit, facebook atď.)
  • Užívateľ môže text pretiahnuť a umiestniť ho kamkoľvek hore na obrázok
  • Používateľ môže kresliť tvary na hornú časť obrázka (kruhy, obdĺžniky alebo voľné kreslenie myšou).

Užitočné odkazy a zdroje

Knižnica p5js prácu s plátnom veľmi uľahčuje.

Príklady projektov

Generátor mémov od imgflip

6. TYPOVÁ PRAX

Úroveň: 2 - Stredne pokročilí

Niektoré veci sú také zrejmé, že sa dajú ľahko prehliadnuť. Ako vývojár je vaša schopnosť písať rýchlo a presne jedným z faktorov, ktorý ovplyvňuje vašu produktivitu vývoja. Cieľom aplikácie Typing Practice je poskytnúť vám prax pri písaní spolu s metrikami, ktoré vám umožnia merať váš pokrok.

Pri písaní sa zobrazí slovo, ktoré potom musíte zadať v stanovenom časovom intervale. Ak je slovo zadané nesprávne, zostane na obrazovke a časový interval zostáva rovnaký. Ale keď je slovo správne napísané, zobrazí sa nové slovo a časový interval sa mierne zníži.

Dúfajme, že vám tento opakujúci sa postup pomôže zvýšiť rýchlosť aj presnosť písania.

Príbehy používateľov

  • Užívateľ vidí, že slová v časovom intervale musia byť zadané a zobrazené v okne aplikácie.
  • Používateľ môže vidieť počet úspešných pokusov a počet celkových pokusov v poli skóre.
  • Používateľ môže kliknúť na tlačidlo „Spustiť tréning“ a zahájiť tréning.
  • Používateľ môže vidieť slovo výzvy zobrazené v textovom poli.
  • Používateľ môže začať písať slovo do poľa na zadávanie textu.
  • Ak zadáte nesprávne písmeno a pole pre zadávanie textu bude vymazané, používateľ bude môcť rýchlo vidieť písmená, ktoré boli zadané.
  • Používateľovi sa zobrazí správa susediaca s poľom na zadávanie textu, ktorá naznačuje, že by mal používateľ skúsiť znova, ak zadá nesprávne písmeno.
  • Používateľ môže vidieť počet celkových pokusov zvýšených v poli skóre.
  • Ak je slovo správne napísané, používateľovi sa zobrazí gratulačná správa.
  • Užívateľ vidí, že slová v časovom intervale musia byť zadané zmenšené o malé množstvo, ak je slovo napísané správne.
  • Ak bolo slovo zadané správne, používateľ môže vidieť počet úspešných pokusov zvýšený v poli skóre.
  • Užívateľ môže kliknúť na tlačidlo „Zastaviť cvičenie“, aby zastavil cvičenie.

Bonusové funkcie

  • Používateľ môže počuť jedinečný zvukový signál signalizujúci, keď sa zobrazí nové slovo, slovo je správne zadané alebo je do slova napísané nesprávne písmeno.
  • Používateľ sa môže prihlásiť do aplikácie
  • Používateľ môže vidieť kumulatívne štatistické údaje o výkone vo všetkých svojich praktických reláciách.

Užitočné odkazy a zdroje

  • keydown
  • setInterval

Príklady projektov

Tutor Twiddler Typing

7. VÝŤAH

Úroveň: 3 - Pokročilý

Je ťažké myslieť na svet bez výťahov. Najmä ak musíte každý deň prejsť 20 schodov hore a dole. Ak sa však nad tým zamyslíte, výťahy boli jednou z pôvodných implementácií udalostí a manipulátorov udalostí dávno predtým, ako sa na scénu dostali webové aplikácie.

Cieľom aplikácie Elevator je simulovať činnosť výťahu a čo je dôležitejšie, ako zvládnuť udalosti generované, keď ho obyvatelia budov používajú. Táto aplikácia simuluje cestujúcich, ktorí požadujú výťah z ktoréhokoľvek poschodia, a stlačením tlačidiel vo výťahu označuje poschodie, ktoré chcú navštíviť.

Obmedzenia

  • Pre tlačidlá nahor a nadol na každom poschodí musíte implementovať jeden obslužný program udalostí. Napríklad, ak existujú 4 poschodia, mala by sa implementovať jedna obslužná rutina udalosti namiesto 8 (dve tlačidlá na poschodie).
  • Podobne by sa mal implementovať jeden obslužný program udalostí pre všetky tlačidlá na ovládacom paneli vo výťahu, a nie jedinečný obslužný program udalostí pre každé tlačidlo.

Príbehy používateľov

  • Používateľ môže vidieť priečny rez budovou so štyrmi poschodiami, výťahovou šachtou, výťahom a tlačidlom nahor v prvom poschodí, tlačidlami nahor a nadol v druhom a treťom poschodí a tlačidlom dole v štvrtom poschodí.
  • Užívateľ môže vidieť ovládací panel výťahu pomocou tlačidla pre každé z poschodí na bočnej strane diagramu.
  • Užívateľ môže kliknutím na tlačidlo hore a dole na ktoromkoľvek poschodí zavolať výťah.
  • Užívateľ môže očakávať, že kliknutie na tlačidlá hore a dole na ktoromkoľvek poschodí a vyžiadanie výťahu budú zaradené do frontu a obsluhované v poradí, v akom boli kliknuté.
  • Užívateľ môže vidieť, ako sa výťah pohybuje hore a dole po šachte na poschodie, na ktoré bol privolaný.
  • Užívateľ môže kliknúť na ovládací panel výťahu a zvoliť poschodie, na ktoré by mal cestovať.
  • Užívateľ môže očakávať, že sa výťah pozastaví na 5 sekúnd čakaním na kliknutie na tlačidlo podlahy na ovládacom paneli. Ak do tej doby neklikne na podlahové tlačidlo, výťah spracuje ďalšiu požiadavku na hovor.
  • Užívateľ môže očakávať, že sa výťah vráti do prvého poschodia, keď nie sú k dispozícii žiadne žiadosti o spracovanie.

Bonusové funkcie

  • Používateľ môže vidieť varovné oznámenie, ak počet požiadaviek na výťah prekročí maximálny povolený počet. Tento limit je ponechaný na vývojára.
  • Keď výťah dorazí na poschodie, používateľ môže počuť zvuk.
  • Používateľ môže vidieť, ako sa cestujúci náhodne dostanú na poschodie, a určiť, kedy by mal používateľ kliknúť na volacie tlačidlo výťahu hore alebo dole na danom poschodí.
  • Používateľ môže určiť časový interval medzi novými cestujúcimi, ktorí pricestujú na privolanie výťahu.

Užitočné odkazy a zdroje

Front-in, first out queue (Wikipedia)

Príklady projektov

8. FAST FOOD SIMULATOR APP

Úroveň: 3 - Pokročilý

Aplikácia Fast Food simuluje činnosť jednoduchej reštaurácie so sebou a je navrhnutá tak, aby pomohla vývojárom uplatniť svoje znalosti princípov Promises a SOLID design.

Táto aplikácia simuluje zákazníkov reštaurácie so sebou, ktorá dáva objednávky a čaká na ich prípravu a doručenie k pultu vyzdvihnutia. Po zadaní objednávky zákazník čaká na oznámenie objednávky, potom ju vyzdvihne a prejde do jedálenského kúta.

Príbehy používateľov, ktoré tvoria túto aplikáciu, sa sústreďujú okolo štyroch odlišných rolí:

  • Užívateľ - koncový užívateľ používajúci aplikáciu
  • Zákazník - simulovaný zákazník
  • Objednávateľ - simulovaný objednávateľ
  • Cook - simulovaný Cook
  • Server - simulovaný server

Táto aplikácia má niekoľko užívateľských príbehov. Nenechajte sa však ohromiť. Urobte si čas a načrtnite nielen UI, ale aj to, ako rôzni aktéri (role) interagujú a postupne vytvárajú aplikáciu podľa agilných princípov.

Obmedzenia

  • Vstupenky na objednávku môžu byť reprezentované ako dva rôzne typy prísľubov - jeden, na ktorý server čaká, kým kuchár pripraví objednávku, a druhý, na ktorý zákazník čaká, keď je na obslužnej linke.
  • Použite natívny ekvivalent JS Promises v ktoromkoľvek jazyku, v ktorom sa rozhodnete vyvíjať. Vývojári JS by mali používať natívne Promises a nie async/await.
  • Vytvorte túto aplikáciu pomocou funkcií rodného jazyka. Nesmiete používať simulačný balík alebo knižnicu.
  • Noví zákazníci prichádzajú na riadok objednávky v stanovenom časovom intervale. Inými slovami, noví zákazníci prichádzajú konštantnou rýchlosťou.
  • Objednávkové lístky sa tiež plnia v stanovenom časovom intervale. Dokončujú sa konštantnou rýchlosťou.

Príbehy používateľov

Prevádzka aplikácie

  • Používateľ môže vidieť vstupnú oblasť, ktorá umožňuje zadať časový interval pre príchod zákazníka a časový interval pre splnenie objednávkového lístka kuchárom.
  • Používateľ môže vidieť prispôsobenú varovnú správu, ak je nesprávne zadaný interval príchodu zákazníka alebo interval plnenia objednávky.
  • Užívateľ môže spustiť simuláciu kliknutím na tlačidlo Štart.
  • Používateľ môže vidieť oblasť riadku objednávky obsahujúcu textové pole s počtom zákazníkov čakajúcich na zadanie objednávky.
  • Používateľ môže vidieť oblasť objednávky obsahujúcu textové polia s číslom objednávky, ktoré sa práve berie.
  • Používateľ môže vidieť kuchynský kút obsahujúci textové pole s číslom pripravovanej objednávky a textové pole so zoznamom čakajúcich príkazov v poradí spolu s počtom ich čakajúcich príkazov.
  • Používateľ môže vidieť oblasť vyzdvihnutia obsahujúcu textové pole s číslom objednávky, ktoré je momentálne k dispozícii na vyzdvihnutie zákazníkom, a textové pole s počtom zákazníkov čakajúcich na riadku zobrazovania.
  • Užívateľ môže simuláciu kedykoľvek zastaviť kliknutím na tlačidlo Stop.

Bonusové funkcie

  • Užívateľ môže určiť, ako dlho trvá, kým objednávateľ vytvorí objednávkový lístok .
  • Užívateľ môže určiť, ako dlho trvá, kým server doručí objednávku zákazníkovi.
  • Užívateľ môže určiť celkový čas, ktorý má simulácia trvať po kliknutí na tlačidlo Štart.
  • Užívateľ môže pri prechode pracovným tokom vidieť animované zobrazenie zákazníkov a objednávok.

Užitočné odkazy a zdroje

  • Simulátor rýchleho občerstvenia - logický pracovný tok
  • Agilný manifest a 12 princípov agilného softvéru
  • SOLIDNÉ zásady, ktoré by mal poznať každý vývojár
  • Používanie sľubov
  • Sľub

9. SHELL SHELL

Úroveň: 3 - Pokročilý

Hra Shell je klasická hazardná hra, ktorá sa datuje do starovekého Grécka. Jeho hranie si vyžaduje tri mušle, hrášok, obratnosť ruky operátorom a bystré pozorovacie schopnosti hráča. Je to tiež klasická hra na ošiaľ, pretože operátor ľahko podvedie hráča. Chvalabohu, že to nie je náš zámer s touto aplikáciou.

Cieľom tejto hry Shell je poskytnúť grafické rozhranie ku klasickej hre škrupín a poskytnúť hráčovi poctivú hru. Naša hra nakreslí na plátno spolu s hráškom tri škrupiny, presunie hrášok pod jednu, zo škrupín, a škrupiny na konkrétny časový úsek zamieša. Užívateľ musí potom kliknúť na škrupinu, pod ktorou si myslí, že je pod ňou hrach skrytý. Užívateľ môže pokračovať v hádaní, kým sa hrach nenájde.

Príbehy používateľov

  • Užívateľ môže vidieť plátno s tromi škrupinami a hrášok.
  • Užívateľ môže kliknúť na škrupinu, pod ktorou má byť hrášok skrytý.
  • Užívateľ môže vidieť pohyb hrášku pod škrupinou, na ktorú klikol.
  • Užívateľ môže kliknúť na tlačidlo „Náhodný výber“ a na 5 sekúnd spustí animované miešanie škrupín.
  • Keď sa animácia zastaví, používateľ môže kliknúť na škrupinu, pod ktorou je podľa neho hrach skrytý.
  • Užívateľ môže vidieť, ako sa kliklo na škrupinu, ktorá stúpala, aby zistila, či je pod ňou hrach skrytý.
  • Užívateľ môže pokračovať v klikaní na mušle, kým nenájde hrášok.
  • Keď sa hrášok nachádza, používateľ môže vidieť správu s blahoželaním
  • Užívateľ môže začať novú hru kliknutím na škrupinu, pod ktorou sa má hračka skrývať (krok č. 2 vyššie). Vyššie uvedené kroky sa potom opakujú.

Bonusové funkcie

  • Používateľ môže vidieť panel skóre, ktorý obsahuje počet výhier a počet odohraných hier.
  • Užívateľ môže vidieť, že počet hraných hier sa zvyšuje, keď je hrach skrytý pod škrupinou
  • Užívateľ vidí prvý prírastok počtu výhier, keď sa hrach nájde.
  • Užívateľ môže vidieť, ako škrupina skrýva hrach, aby ich po kliknutí (správny odhad) animovala (farba, veľkosť alebo iný efekt).

Užitočné odkazy a zdroje

  • Shell Game (Wikipedia)
  • Animácia DOM DOM v jazyku Javascript
  • Knižnica animácií p5js

Príklady projektov

Záver

Nezabudnite si prečítať predchádzajúci článok a úložisko, ak chcete nájsť viac nápadov na aplikácie / projekty.

Tiež, ak boli pre vás informácie z tohto článku a z repo nejakým spôsobom užitočné, nezabudnite im dať hviezdičku?; takto ho môžu nájsť ostatní a mať z toho tiež úžitok! Ďakujem!

Máte nejaké návrhy, ako by sme mohli celkovo vylepšiť tento projekt? Dajte nám vedieť! Radi by sme počuli vašu spätnú väzbu!

Ste vítaní, aby ste prispeli svojimi vlastnými nápadmi! Z tohto úložiska môžeme urobiť ideálny zdroj, pokiaľ ide o nápady na aplikácie.

Pôvodne publikované na www.florin-pop.com.