Više ideja o projektima za poboljšanje vaših vještina kodiranja

Prije dva tjedna objavio sam članak koji sadrži 15 ideja o projektima koje možete izgraditi da biste poboljšali svoje sposobnosti kodiranja, a ljudi su bili vrlo uzbuđeni zbog tog resursa.

Također, skladište ideja-aplikacija dobilo je gotovo 3000 zvijezda otkako sam objavio taj članak. To je suludo!

Hvala svima na tome!

U ovom ćemo postu objaviti neke nove projekte koji su od tada dodani u skladište.

Kao kratki podsjetnik, svi su projekti podijeljeni u tri razine na temelju znanja i iskustva potrebnih za njihovo dovršavanje. Provjerite opis slojeva u spremištu.

Ispod ćete naći 2 početne, 4 srednje i 3 napredne ideje.

1. KALKULATOR

Razina: 1 - Početnik

Kalkulatori nisu samo jedan od najkorisnijih raspoloživih alata, već su i izvrstan način za razumijevanje korisničkog sučelja i obrade događaja u aplikaciji. U ovom ćete problemu stvoriti kalkulator koji podržava osnovne aritmetičke proračune na cijelim brojevima.

Styling ovisi o vama, zato upotrijebite maštu i budite kreativni! Možda će vam se sjetiti i eksperimentirati s aplikacijom za izračun kalkulatora na mobilnom uređaju kako biste bolje razumjeli osnovne funkcionalnosti i rubne slučajeve.

ograničenja

  • Ne možete koristiti funkciju eval () za izvršavanje izračuna

Korisničke priče

  • Korisnik može vidjeti zaslon s trenutnim upisanim brojem ili rezultatom posljednje operacije.
  • Korisnik može vidjeti unosnu ploču koja sadrži gumbe za znamenke 0–9, operacije - '+', '-', '/' i '=', tipku 'C' (za brisanje) i tipku 'AC' (za jasno sve).
  • Korisnik može upisati brojeve kao nizove do 8 znamenki klikom na znamenke na ulaznoj ploči. Unošenje bilo koje znamenke veće od 8 zanemarit će se.
  • Korisnik može kliknuti gumb rada za prikaz rezultata te operacije na: _ rezultat prethodne operacije i posljednji uneseni broj ILI _ zadnja dva unesena broja ILI * zadnji uneseni broj
  • Korisnik može kliknuti gumb 'C' kako bi izbrisao posljednji broj ili posljednju operaciju. Ako je zadnji unos korisnika bio operacija, prikaz će se ažurirati na vrijednost koja mu je prethodila.
  • Korisnik može kliknuti gumb 'AC' kako bi izbrisao sva unutarnja radna područja i zaslon postavio na 0.
  • Korisnik može vidjeti 'ERR' prikazano ako bilo koja operacija premašuje 8-znamenkasti maksimum.

Bonus mogućnosti

  • Korisnik može kliknuti gumb "+/-" za promjenu znaka trenutno prikazanog broja.
  • Na ulaznoj ploči korisnik može vidjeti gumb decimalne točke (.) Koji omogućava unos brojeva s pomičnim zarezom do 3 mjesta, a operacije se provode do maksimalnog broja decimalnih mjesta unesenih za bilo koji broj.

Korisni linkovi i resursi

  • Kalkulator (Wikipedia)
  • MDN

Primjeri projekata

2. PRIJAVITE APP

Razina: 1 - Početnik

To možda niste shvatili, ali recepti nisu ništa drugo do kulinarski algoritmi. Poput programa, recepti su niz nužnih koraka koji, ako se pravilno prate, rezultiraju ukusnim jelom.

Cilj aplikacije Recept je pomoći korisniku u upravljanju receptima na način koji će im olakšati slijediti.

ograničenja

  • U početnoj verziji ove aplikacije podaci recepta mogu se kodirati kao JSON datoteka. Nakon implementacije početne verzije ove aplikacije, možete proširiti ovu opciju da biste održavali recepte u datoteci ili bazi podataka.

Korisničke priče

  • Korisnik može vidjeti popis naslova recepata
  • Korisnik može kliknuti naslov recepta kako bi prikazao karticu recepta s naslovom recepta, vrstom obroka (doručak, ručak, večera ili međuobrok), brojem osoba koje poslužuje, stupnjem težine (početni, srednji, napredni), popisom sastojaka (uključujući njihove iznose) i korake pripreme.
  • Korisnik klikne novi naslov recepta kako bi trenutnu karticu zamijenio novim receptom.

Bonus mogućnosti

  • Korisnik može vidjeti fotografiju na kojoj se vidi kako predmet izgleda nakon što je pripremljen.
  • Korisnik može potražiti recept koji nije na popisu naslova recepata unosom naziva obroka u okvir za pretraživanje i klikom na gumb 'Traži'. Bilo koji API recepta otvorenog koda može se koristiti kao izvor recepata (vidi MealDB u nastavku).
  • Korisnik može vidjeti popis recepata koji odgovaraju pojmovima za pretraživanje
  • Korisnik može kliknuti naziv recepta i prikazati svoju receptnu karticu.
  • Korisnik može vidjeti poruku upozorenja ako nije pronađen nijedan odgovarajući recept.
  • Korisnik može kliknuti gumb 'Spremi' na karticama za recepte smještene putem API-ja za spremanje kopije u ovu datoteku recepata ili baze podataka aplikacija.

Korisni linkovi i resursi

  • Korištenje dohvaćanja
  • Axios
  • MealDB API

Primjeri projekata

3. Crtanje APP

Nivo: 2 - Srednji

Na webu stvorite digitalna umjetnička djela na platnu da biste dijelili online i eksportirali kao slike.

Korisničke priče

  • Korisnik može crtati po platnu pomoću miša
  • Korisnik može promijeniti boju
  • Korisnik može promijeniti veličinu alata
  • Korisnik može pritisnuti gumb za brisanje platna

Bonus mogućnosti

  • Korisnik može spremiti umjetničko djelo kao sliku (.png, .jpg, itd. Format)
  • Korisnik može crtati različite oblike (pravokutnik, krug, zvijezda, itd.)
  • Korisnik može podijeliti umjetnička djela na društvenim mrežama

Korisni linkovi i resursi

  • Saznajte kako stvoriti aplikaciju za crtanje pomoću p5js

Primjeri projekata

4. EMOJI PRIJEVOD

Nivo: 2 - Srednji

Emoji su postali lingua franca modernog društva. Oni su zabavan i brz način komuniciranja, ali i izuzetno ekspresivan mehanizam za komuniciranje emocija i reakcija.

Cilj aplikacije Emoji Translator je prevesti tekst koji je korisnik unijeo u ekvivalentni niz emojisa, preveden iz jedne ili više riječi u izvornom tekstu, i riječi za koje nema odgovarajućih emojija.

Korisničke priče

  • U tekstni okvir korisnik može unijeti niz riječi, brojeva i interpunkcije
  • Korisnik može kliknuti gumb 'Prevedi' kako bi riječi unesenog teksta preveo u odgovarajuće emojije.
  • Korisnik može vidjeti poruku upozorenja ako je kliknuo „Prevedi“, ali okvir za unos teksta bio je prazan ili nepromijenjen u odnosu na posljednji prijevod.
  • Korisnik može vidjeti tekstualne elemente u unesenom tekstu prevedenom u njihove ekvivalentne emojise u izlaznom tekstnom polju. Tekstualni elementi za koje nema emojija ostat će nepromijenjeni.
  • Korisnik može kliknuti gumb 'Clear' za brisanje tekstnih okvira za unos i izlaz.

Bonus mogućnosti

  • Programer će implementirati značajku sinonima emojija kako bi aplikacija mogla prevesti širi niz riječi u emojije.
  • Korisnik može odabrati jezik u koji se tekst unosi s padajućeg popisa jezika.

Korisni linkovi i resursi

Potpuni popis emotičara v12.0

Primjeri projekata

Emoji Prevod

5. MEME GENERATOR APP

Nivo: 2 - Srednji

Dopustite korisnicima da generiraju prilagođene meme dodavanjem teksta preko slike.

Korisničke priče

  • Korisnik može prenijeti sliku koja će se pojaviti na platnu
  • Korisnik može dodati tekst u gornji dio slike
  • Korisnik može dodati tekst u donji dio slike
  • Korisnik može odabrati boju teksta
  • Korisnik može odabrati veličinu teksta
  • Korisnik može spremiti dobiveni meme

Bonus mogućnosti

  • Korisnik može odabrati obitelj fontova za tekst
  • Korisnik može dijeliti meme na društvenim mrežama (twitter, reddit, facebook, itd.)
  • Korisnik može prevući tekst oko sebe i postaviti ga gdje god želi na vrh slike
  • Korisnik može crtati oblike na vrhu slike (krugovi, pravokutnici ili besplatno crtanje mišem)

Korisni linkovi i resursi

Rad s platnom olakšava knjižnica p5js.

Primjeri projekata

Meme Generator by imgflip

6. PRAKSA TIPKOVANJA

Nivo: 2 - Srednji

Neke su stvari toliko očite da ih je lako previdjeti. Kao programer vaša je sposobnost brzog i preciznog tipkanja jedan od faktora koji utječe na produktivnost vašeg razvoja. Cilj aplikacije Praksa za tipkanje je pružiti vam praksu tipkanja zajedno s metrikama koje će vam omogućiti da mjerite svoj napredak.

Praksa tipkanja prikazuje riječ koju tada morate unijeti u određenom vremenskom intervalu. Ako je riječ pogrešno upisana, ona ostaje na zaslonu, a interval ostaje isti. Ali kada se riječ ispravno upiše, prikazuje se nova riječ i vremenski interval je malo smanjen.

Nadamo se da će vam ova ponavljajuća praksa pomoći da poboljšate i brzinu i preciznost tipkanja.

Korisničke priče

  • Korisnik može vidjeti kako se u vremenskom intervalu prikazuju riječi u vremenskom intervalu.
  • Korisnik može vidjeti broj uspješnih pokušaja i broj ukupnih pokušaja u okviru s rezultatima.
  • Korisnik može kliknuti gumb "Pokreni praksu" za početak sesije prakse.
  • Korisnik može vidjeti riječ upita u tekstnom polju.
  • Korisnik može započeti tipkati riječ u okvir za unos teksta.
  • Korisnik može vidjeti slova koja su upisana bljesne ako je uneseno pogrešno slovo, a okvir za unos teksta bit će izbrisan.
  • Korisnik može vidjeti poruku pokraj okvira za unos teksta, što ukazuje da bi korisnik trebao pokušati ponovo ako unese pogrešno slovo.
  • Korisnik može vidjeti broj ukupnih pokušaja povećanih u okviru rezultata.
  • Korisnik može vidjeti poruku čestitke ako je riječ ispravno upisana.
  • Korisnik može vidjeti da se vremenski interval riječi moraju upisati smanjiti za mali iznos ako je riječ ispravno upisana.
  • Korisnik može vidjeti broj uspješnih pokušaja povećanih u okvir s rezultatima ako je riječ bila ispravno upisana.
  • Korisnik može kliknuti gumb "Zaustavi praksu" kako bi zaustavio praksu.

Bonus mogućnosti

  • Korisnik može čuti jedinstvenu zvučnu signalizaciju kada se prikaže nova riječ, ispravno unesena riječ ili unese pogrešno slovo u riječ.
  • Korisnik se može prijaviti u aplikaciju
  • Korisnik može vidjeti kumulativne statističke podatke o svim svojim vježbama.

Korisni linkovi i resursi

  • keydown
  • setInterval

Primjeri projekata

Tutorica za kucanje Twiddlera

7. ELEVATOR

Razina: 3 - Napredno

Teško je razmišljati o svijetu bez dizala. Pogotovo ako morate hodati gore-dolje po 20 stepenica svaki dan. Ali ako razmislite, dizala su bila jedna od originalnih implementacija događaja i alata za obradu događaja mnogo prije nego što su se web-aplikacije pojavile na sceni.

Cilj aplikacije Lift je simulirati rad lifta i još važnije, kako se nositi s događajima nastalim kada ga stanari zgrada koriste. Ova aplikacija simulira putnike koji pozivaju dizalo s bilo kojeg kata i pritisne gumbe unutar dizala kako bi naznačio kat koji žele posjetiti.

ograničenja

  • Za svaki tip kata gore i dolje morate implementirati jedan rukovatelj događaja. Na primjer, ako postoje 4 kata, tada treba implementirati jedan rukovatelj događaja, a ne 8 (dva gumba po katu).
  • Slično tome, za sve tipke na upravljačkoj ploči u dizalu treba implementirati pojedinačni rukovatelj događaja, a ne jedinstveni rukovatelj događaja za svaki gumb.

Korisničke priče

  • Korisnik može vidjeti dijagram presjeka zgrade s četiri kata, osovina lifta, dizalo i gumb za gore na prvom katu, tipke za gore i dolje na drugom i trećem katu, te tipku za dolje na četvrtom katu.
  • Korisnik može vidjeti upravljačku ploču dizala s gumbom za svaki od katova na bočnoj strani dijagrama.
  • Za pozivanje dizala korisnik može kliknuti gumb gore i dolje na bilo kojem katu.
  • Korisnik može očekivati ​​da će klikanjem gumba za gore i dolje na bilo kojem katu zatražiti dizalo biti postavljen u red i servisiran redoslijedom na koji su kliknuli.
  • Korisnik može vidjeti kako se lift diže gore i dolje po osovini do poda na koji je pozvan.
  • Korisnik može kliknuti upravljačku ploču lifta za odabir poda do kojeg bi trebao putovati.
  • Korisnik može očekivati ​​da će dizalo pauzirati 5 sekundi čekajući da pritisne gumb za pod na upravljačkoj ploči. Ako se u tom roku ne klikne gumb za pod, lift će obraditi zahtjev za sljedeći poziv.
  • Korisnik može očekivati ​​da će se dizalo vratiti na prvi kat kad nema zahtjeva za obradu.

Bonus mogućnosti

  • Korisnik može vidjeti upozorenje ako broj zahtjeva za dizalo prelazi maksimalno dopušteni broj. Ovo ograničenje je prepušteno programeru.
  • Korisnik može čuti zvuk kad lift dođe na pod.
  • Korisnik može vidjeti kako putnik nasumično dolazi na kat kako bi naznačio kada korisnik treba kliknuti gumb za poziv gore ili dolje na liftu na tom katu.
  • Korisnik može odrediti vremenski interval između novih putnika koji dođu nazvati dizalom.

Korisni linkovi i resursi

Red čekanja na prvom mjestu (Wikipedia)

Primjeri projekata

8. APLIKACIJA SIMULATORA BRZE HRANE

Razina: 3 - Napredno

Aplikacija Fast Food simulira rad jednostavnog restorana za oduzimanje, a osmišljena je kako bi programeru pomogla da njihova znanja o obećanjima i načelima SOLID dizajna funkcioniraju.

Ova aplikacija simulira kupce iz restorana koji se bave i naručuju ih i čekaju da ih pripreme i isporuče do šaltera za preuzimanje. Nakon predaje narudžbe, kupac čeka narudžbu koja će se objaviti prije nego je preuzme i krene u blagovaonicu.

Korisničke priče koje čine ovaj programski centar oko četiri različite uloge:

  • Korisnik - krajnji korisnik koji koristi aplikaciju
  • Kupac - simulirani kupac
  • Naručitelj naloga - simulirani primatelj naloga
  • Cook - simulirani Cook
  • Poslužitelj - simulirani Server

Ova aplikacija ima dosta korisničkih priča. Nemojte se preopteretiti. Uzmite vremena da skicirate ne samo korisničko sučelje, već i kako različiti glumci (uloge) međusobno i postupno grade aplikaciju slijedeći Agile principe.

ograničenja

  • Karte za narudžbu mogu se predstaviti kao dvije različite vrste obećanja - jedno čeka server dok kuhar priprema narudžbu, a drugo kupac čeka dok se nalazi u liniji za posluživanje.
  • Koristite izvorni ekvivalent JS Promises na bilo kojem jeziku koji se odlučite razvijati. JS programeri trebaju koristiti izvorne Obećanja, a ne async / čekati.
  • Izradite ovu aplikaciju koristeći se izvornim jezikom. NE smijete koristiti paket za simulaciju ili biblioteku.
  • Novi kupci dolaze u red za narudžbu u određenom vremenskom intervalu. Drugim riječima, novi kupci dolaze sa konstantnom brzinom.
  • Karte za naručivanje ispunjavaju se u određeno vrijeme. Dovršavaju se konstantnom brzinom.

Korisničke priče

Operacija aplikacije

  • Korisnik može vidjeti područje unosa koje omogućuje unos vremenskog intervala za dolazak kupca i vremenskog intervala za kuhara.
  • Korisnik može vidjeti prilagođenu poruku upozorenja ako je interval dolaska kupca ili interval izvršenja narudžbe pogrešno unesen.
  • Korisnik može pokrenuti simulaciju klikom na gumb Start.
  • Korisnik može vidjeti područje reda narudžbe koje sadrži tekstni okvir koji prikazuje broj kupaca koji čekaju izvršiti narudžbe.
  • Korisnik može vidjeti područje narudžbe koje sadrži tekstne okvire koji prikazuju broj narudžbe koji se trenutno uzima.
  • Korisnik može vidjeti kuhinjski prostor koji sadrži tekstni okvir s brojem narudžbe koji se priprema i tekstni okvir s popisom naloga za čekanje u nizu, zajedno s brojem broja naloga za čekanje.
  • Korisnik može vidjeti područje preuzimanja koje sadrži tekstni okvir s brojem narudžbe koji je trenutno dostupan za preuzimanje od strane kupca i tekstni okvir s brojem kupaca koji čekaju u retku za posluživanje.
  • Korisnik može zaustaviti simulaciju u bilo kojem trenutku klikom na gumb Stop.

Bonus mogućnosti

  • Korisnik može odrediti koliko dugo je potrebno da pretplatnik stvori ulaznicu za narudžbu.
  • Korisnik može odrediti koliko dugo je potrebno da poslužitelj preda narudžbu kupcu.
  • Korisnik može odrediti ukupno vrijeme pokretanja simulacije nakon što se pritisne gumb Start.
  • Korisnik može vidjeti animirani prikaz Kupca i narudžbi dok se kreću kroz tijek rada.

Korisni linkovi i resursi

  • Fast Food Simulator - Logički tijek rada
  • Agilni manifest i 12 načela agilnog softvera
  • Čvrsti principi koje svaki programer treba znati
  • Koristeći obećanja
  • Obećanje

9. SHELL GAME

Razina: 3 - Napredno

Shell igra je klasična kockarska igra koja potječe još iz antičke Grčke. Za igranje su potrebne tri školjke, grašak, spretnost ruku od strane operatera i dobre igračke vještine promatranja. Također je to klasična igra za igru ​​jer je operateru lakše prevariti igrača. Hvala bogu da ovo posljednja nije naša namjera s ovom aplikacijom.

Ova Shell igra namijenjena je pružanju grafičkog sučelja klasičnoj igri školjki i pružanju poštene igre igraču. Naša igra crta tri školjke na platnu zajedno s graškom, premješta grašak pod jedan, od školjaka i premešta školjke u određenom vremenskom intervalu. Korisnik tada mora kliknuti na ljusku za koju misli da je grašak skriven ispod. Korisniku je dopušteno nastaviti nagađati dok se grašak ne nađe.

Korisničke priče

  • Korisnik može vidjeti platno s tri školjke i grašak.
  • Korisnik može kliknuti na ljusku ispod koje se mora sakriti grašak.
  • Korisnik može vidjeti potez graška ispod ljuske na koju je kliknuo.
  • Korisnik može kliknuti gumb 'Shuffle' da započne animirano miješanje školjki u trajanju od 5 sekundi.
  • Korisnik može kliknuti na ljusku za koju vjeruje da je grašak skriven ispod kad animacija prestane.
  • Korisnik može vidjeti ljusku koja se kliknula kako bi ustanovila je li grašak skriven ispod nje.
  • Korisnik može nastaviti kliknuti školjke dok ne nađe grašak.
  • Korisnik može vidjeti poruku čestitke kada se grašak nalazi
  • Korisnik može započeti novu igru ​​klikom na ljusku graška ispod kojeg se nalazi (korak # 2 iznad). Gornji koraci se zatim ponavljaju.

Bonus mogućnosti

  • Korisnik može vidjeti ploču s rezultatima koja sadrži broj pobjeda i broj odigranih igara.
  • Korisnik može vidjeti kako se povećao broj odigranih igara kada je grašak skriven ispod ljuske
  • Korisnik može vidjeti povećani broj pobjeda kad se grašak nađe na prvu pogodak.
  • Korisnik može vidjeti ljusku koja skriva grašak za animiranje (boja, veličina ili neki drugi efekt) kad se klikne (točna pogodak).

Korisni linkovi i resursi

  • Igra školjke (Wikipedia)
  • Javascript HTML DOM Animacija
  • p5js biblioteka za animaciju

Primjeri projekata

Zaključak

Ne zaboravite provjeriti prethodni članak i skladište ako želite pronaći više ideja za prijavu / projekt.

Također, ako su vam informacije iz ovog članka i iz repoa na bilo koji način bile korisne, obavezno ga označite zvjezdicom ; ovaj način drugi mogu pronaći i imati koristi! Hvala vam!

Imate li prijedloge kako bismo mogli poboljšati ovaj projekt u cjelini? Javite nam! Voljeli bismo čuti vaše povratne informacije!

Dobrodošli ste da doprinesete vlastitim idejama! Ovo spremište možemo učiniti resursom kada su u pitanju ideje za aplikacije.

Izvorno objavljeno na www.florin-pop.com.