15 idei de aplicații pentru a vă construi și nivela abilitățile de codare

Știm cu toții că uneori poate fi dificil de a găsi noi idei de aplicații care te-ar putea construi în scopul de a îmbunătăți sau de a învăța un nou limbaj de programare sau cadru.,;

mare pentru a fi utilizate ca exemple în tutoriale (articole sau clipuri video) 📃;

ușor pentru a finaliza și, de asemenea, ușor extensibil cu noi caracteristici 👌;

Si pe deasupra, fiecare idee app are:

1. – Un mod clar și obiectiv descriptiv;
2. O lista de Povești de Utilizator care ar trebui să fie puse în aplicare;
3. O listă de caracteristici bonus, care sunt o opțiune, dar „bine-a-fi”;
4. Toate resursele și link-uri pentru a vă ajuta să găsiți ceea ce aveți nevoie pentru a finaliza proiectul

Ne-am împărțit aceste idei app în trei niveluri, bazate pe cunoștințele și experiența necesare pentru a le finaliza., Nivelurile sunt: începător, intermediar și avansat.

în acest articol, veți găsi 5 idei din fiecare nivel.

încercați să publicați componentele reutilizabile, de la oricare aplicație la Bit.dev, un hub de componente cloud. Puteți să le documentați și să adăugați exemple în fiecare pagină componentă (pe site — ul Bit) – apoi să le utilizați în aplicațiile viitoare sau pur și simplu să le partajați cu echipa dvs.

Nivel: 1-Incepator

toți Avem evenimente importante așteptăm cu nerăbdare să în viață, zile de naștere, aniversări și sărbători pentru a numi doar câteva. Nu ar fi frumos să aibă o aplicație care contează în jos Luni, zile, ore, minute și secunde la un eveniment? Numărătoarea inversă este doar acea aplicație!

obiectivul temporizatorului de numărătoare inversă este de a oferi o afișare în continuă scădere a lunilor, zilelor, orelor, minutelor și secundelor unui eveniment introdus de utilizator.,

constrângeri

• utilizați numai funcții de limbaj încorporate pentru calculele dvs., mai degrabă decât să vă bazați pe o bibliotecă sau un pachet precum MomentJS. Aceasta presupune, desigur, că limba aleasă de dvs. are funcții adecvate de manipulare a datei și orei încorporate.
• nu puteți utiliza niciun generator de cod, cum ar fi numărătoarea inversă până la site. Ar trebui să vă dezvoltați propria implementare originală.

povești utilizator

• utilizatorul poate vedea o casetă de intrare eveniment care conține un câmp nume eveniment, un câmp dată, o oră opțională, și un buton „Start”.,
• utilizatorul poate defini evenimentul introducând numele acestuia, data la care este programat să aibă loc și o oră opțională a evenimentului. Dacă ora este omisă, se presupune că este la miezul nopții la data evenimentului în fusul orar local.
• utilizatorul poate vedea un mesaj de avertizare dacă Numele evenimentului este necompletat.
• utilizatorul poate vedea un mesaj de avertizare dacă Data sau ora evenimentului sunt introduse incorect.
• utilizatorul poate vedea un mesaj de avertizare dacă timpul până la datele evenimentului și ora care a fost introdusă ar depăși precizia cronometrului.,
• utilizatorul poate face clic pe butonul „Start” pentru a vedea că cronometrul de numărătoare inversă începe să afișeze zilele, orele, minutele și secundele până când evenimentul are loc.
• utilizatorul poate vedea elementele în temporizatorul automat decrementare. De exemplu, când numărul de secunde rămase ajunge la 0, Numărul de minute rămase va scădea cu 1, iar secundele vor începe numărătoarea inversă de la 59. Această progresie trebuie să aibă loc de la secunde până la poziția zilelor rămase în afișajul numărătoare inversă.,

caracteristici Bonus

• utilizatorul poate salva evenimentul astfel încât să persiste pe parcursul sesiunilor
• utilizatorul poate vedea o alertă atunci când evenimentul este atins
• utilizatorul poate specifica mai multe evenimente.
• utilizatorul poate vedea un cronometre numărătoare inversă pentru fiecare eveniment care a fost definit.,

link-uri Utile și resurse

• Imagini analogice bazate pe tub cronometre numărătoarea inversă poate fi găsit aici
• clearInterval MDN
• setInterval MDN
• Data MDN

Exemplu proiecte

Temporizator construit cu Reacționa

Simplu Ceas/Temporizator

FlipImage

Nivel: 1-Incepator

este important pentru Dezvoltatori Web pentru a înțelege elementele de bază de a manipula imagini de aplicații web complexe, care se bazează pe imagini pentru a adăuga valoare pentru utilizator interfață și experiența utilizatorului (UI/UX).,FlipImage explorează un aspect al manipulării imaginii — rotația imaginii. Această aplicație afișează un panou pătrat care conține o singură imagine prezentată într-o matrice 2×2. Folosind un set de sus, jos, stânga, și săgețile dreapta adiacente la fiecare dintre imaginile utilizatorul le poate flip vertical sau orizontal.trebuie să utilizați numai HTML nativ, CSS și Javascript pentru a implementa această aplicație. Pachetele de imagini și bibliotecile nu sunt permise.,o imagine

caracteristici Bonus

• Utilizatorul poate modifica imaginea implicită prin introducerea URL-ul de o imagine diferită într-un câmp de introducere
• Utilizatorul poate afișa noua imagine, făcând clic pe un „Display” butonul de lângă câmpul de introducere
• Utilizatorul poate vedea un mesaj de eroare dacă noi imagini URL-ul nu este găsit

link-uri Utile și resurse

• Cum de a Răsturna o Imagine
• de a Crea un CSS Flipping Animatin

Exemplu proiecte

Efecte de Imagine de bennettfeely

Note App

Nivel: 1-Incepator

de a Crea și stoca note pentru mai târziu scop!,

povești utilizator

• utilizatorul poate crea o notă
• utilizatorul poate edita o notă
• utilizatorul poate șterge o notă
• la închiderea ferestrei browserului notele vor fi stocate și când utilizatorul revine, datele vor fi preluate

caracteristici Bonus

• utilizatorul poate crea și edita o notă în format Markdown., Pe salvați-l va converti Markdown pentru HTML
• Utilizatorul poate vedea data când a creat notă

link-uri Utile și resurse

• localStorage
• Reduceri Ghid
• a Marcat — O reducere parser

Exemplu proiecte

Reduceri Note construit cu Unghiulară pe Codepen

Reduceri Note construit cu Reacționa

Reduceri Note construit cu Unghiulară 7 și bootstrap 4

Reteta

Nivel: 1-Incepator

s-ar putea să nu fi realizat acest lucru, dar reteta e nu sunt nimic mai mult decât culinar algoritmi., Ca și programele, rețetele sunt o serie de pași imperativi care, dacă sunt urmați corect, au ca rezultat un fel de mâncare gustoasă.obiectivul aplicației rețetă este de a ajuta utilizatorul să gestioneze rețetele într-un mod care să le facă ușor de urmărit.

constrângeri

• pentru versiunea inițială a acestei aplicații, datele rețetei pot fi codificate ca fișier JSON. După implementarea versiunii inițiale a acestei aplicații, puteți extinde acest lucru pentru a menține rețete într-un fișier sau o bază de date.,

Povești de Utilizator

• Utilizator poate vedea o listă de reteta titluri
• Utilizatorul poate faceți clic pe un titlu de reteta pentru a afișa o reteta carte care conține rețeta titlul, tipul de masa (mic dejun, prânz, cină sau o gustare), numărul de persoane pe care le servește, își nivel de dificultate (începător, intermediar, avansat), lista ingredientelor (inclusiv sumele lor), și etapele de pregătire.
• utilizator faceți clic pe un nou titlu rețetă pentru a înlocui cardul curent cu o nouă rețetă.

caracteristici Bonus

• utilizatorul poate vedea o fotografie care arată cum arată elementul după ce a fost pregătit.,
• utilizatorul poate căuta o rețetă care nu se află în lista de titluri de rețete introducând numele mesei într-o casetă de căutare și făcând clic pe butonul „Căutare”. Orice API reteta open source poate fi folosit ca sursă pentru rețete (a se vedea MealDB de mai jos).
• utilizatorul poate vedea o listă de rețete care corespund termenilor de căutare
• utilizatorul poate face clic pe numele rețetei pentru a afișa cardul de rețetă.
• utilizatorul poate vedea un mesaj de avertizare dacă nu a fost găsită nicio rețetă potrivită.
• utilizatorul poate face clic pe un buton „Save” de pe carduri pentru rețete localizate prin API pentru a salva o copie a acestui fișier rețetă aplicații sau baza de date.,

link-uri Utile și resurse

• Folosind Aduce
• Axios
• MealDB API

Exemplu proiecte

Cutie Rețetă — un Cod Gratuit în Tabăra de Proiect (FCC)

Reacționa Reteta Cutie

Aplicație Test

Nivel: 1-Incepator

Practica și testa cunoștințele răspunzând la întrebări într-o aplicație test.ca dezvoltator, puteți crea o aplicație de testare pentru testarea abilităților de codificare ale altor dezvoltatori., (HTML, CSS, JavaScript, Python, PHP, etc…)

Povești de Utilizator

• Utilizatorul poate începe test prin apăsarea unui button
• Utilizatorul poate vedea o întrebare cu 4 variante de răspuns
• După selectarea unui răspuns, afișa următoarea întrebare pentru Utilizator., Faceți acest lucru până când testul este terminat
• La sfârșitul anului, Utilizatorul poate vedea următoarele statistici
• Timp a luat pentru a termina testul
• Cât de multe răspunsuri corecte a obține
• Un mesaj care arată dacă el passed sau failed test

caracteristici Bonus

• Utilizatorul poate partaja rezultatul unui test pe social media
• Adăugați mai multe teste la cerere. Utilizatorul poate selecta care să ia
• utilizatorul poate crea un cont și au toate scorurile salvate în tabloul său de bord., Utilizatorul poate finaliza un test de mai multe ori

link-uri Utile și resurse

• Deschidere Trivia baza de Date

Exemplu proiecte

Quiz app construit cu Reacționa (așteptați să se încarce ca este găzduit pe Heroku)

Quiz app interfață

Carte App Finder

Nivel: 2-Mediu

de a Crea o aplicație care va permite utilizatorilor pentru a căuta cărți prin introducerea o interogare (Titlu, Autor, etc). Afișați cărțile rezultate într-o listă din pagină cu toate datele corespunzătoare.,

povești utilizator

• utilizatorul poate introduce o interogare de căutare într-un input câmp
• utilizatorul poate trimite interogarea.,ppearing pe pagina

caracteristici Bonus

• Pentru fiecare element din listă se adaugă un link care va trimite Utilizatorul către un site extern care are mai multe informații despre carte
• Implementarea unui Design Responsive
• Adăugați animații încărcare

link-uri Utile și resurse

Puteți utiliza Google Books API

Exemplu proiecte

Cartea Finder

Card de Memorie-Joc

Nivel: 2-Mediu

Card de memorie este un joc în cazul în care va trebui să faceți clic pe un card pentru a vedea ce imagine este sub ea și să încerce să găsească potrivire imagine sub alte cărți.,

povești utilizator

• utilizatorul poate vedea o grilă cu N x n carduri (n este un număr întreg). Toate cărțile sunt cu fața în jos inițial (hidden stat)
• utilizatorul poate face clic pe un buton pentru a începe jocul. Când faceți clic pe acest buton, un cronometru va începe
• utilizatorul poate face clic pe orice card pentru a dezvălui imaginea care se află sub el (schimbați-l la visible state)., Utilizatorul face clic pe a 2-a carte:
  • Dacă există un meci, 2 carduri va fi eliminat din joc (fie de a ascunde/a le elimina sau a le lăsa în visible stat)
  • Dacă nu există un meci, 2 carduri se vor răsturna înapoi la starea lor inițială (hidden stat)
  • atunci Când toate meciurile au fost găsite, Utilizatorul poate vedea o casetă de dialog afișează un mesaj de Felicitări cu un contor care arată cât timp a luat pentru a termina jocul

  caracteristici Bonus

  • Utilizare poate alege între mai multe niveluri de dificultate (Ușor, Mediu, Greu)., Crescut de dificultate mijloace: reducerea timpului disponibil pentru a completa și/sau creșterea numărului de cărți
  • Utilizatorul poate vedea statisticile de joc (nr. ori el nu a pierdut, cel mai bun timp pentru fiecare nivel)

  link-uri Utile și resurse

  • Wikipedia

  Exemplu proiecte

  Flip — carte de joc de memorie

  Joc de Memorie

  SMB3 Carte de Joc de Memorie

  Aplicație de Desen

  Nivel: 2-Intermediar

  de a Crea opere de artă digitală pe o panza de pe web pentru a partaja on-line și, de asemenea, exporta ca imagini.,v>, star, etc)

• Utilizatorul poate partaja opera de arta pe social media

link-uri Utile și resurse

• a Învăța cum să creați o Aplicație de Desen, folosind p5js

Exemplu proiecte

Aplicație de Desen de Florin Pop

Aplicație de Desen de t0mm4rx

Simplu Magazin Online

Nivel: 2-Mediu

scopul Simplu Magazin Online este de a oferi utilizatorilor posibilitatea de a selecta un produs să cumpere, vizualizare informații de cumpărare, adăugându-l la un coș de cumpărături online, și în cele din urmă, de fapt, de cumpărare a produselor în coșul de cumpărături.,

constrângeri

• la început, puteți implementa inventarul de produse ca o matrice de obiecte JavaScript dacă dezvoltați JavaScript. Pentru alte limbi nu ezitați să alegeți soluția în memorie la alegere.

povești utilizator

• utilizatorul poate face clic pe un buton „Vezi Produse” de pe pagina de destinație pentru a afișa pagina de produse.
• utilizatorul poate vedea un card pe pagina de produse pentru fiecare produs care arată miniatura produsului, numele, prețul, o scurtă descriere și un buton „selectați”.,
• utilizatorul poate vedea o pagină cu detalii despre produs afișată atunci când se face clic pe butonul „Select” care arată aceleași informații de pe cardul produsului, dar și un id unic de produs, o descriere lungă, butonul „Adaugă în coș” și un buton „Vezi mai multe produse”.
• utilizatorul poate vedea un mesaj de confirmare atunci când produsul este adăugat în coșul de cumpărături.
• utilizatorul poate face clic pe pagina „Vezi mai multe produse” pentru a reveni la pagina Produse.
• utilizatorul poate vedea un buton „coș de cumpărături” atât pe pagina de destinație, cât și pe pagina de produse. Sugestie: o bară de sus ar putea fi o locație comună bună pentru acest buton.,
• utilizatorul poate face clic pe butonul „coș de cumpărături” pentru a afișa pagina coșului de cumpărături care conține id-ul produsului, numele, prețul și cantitatea comandată caseta de intrare pentru fiecare produs adăugat anterior în coșul de cumpărături.
• utilizatorul poate vedea o sumă totală de achiziție pe cardul de cumpărături care este calculată ca suma cantităților înmulțită cu prețul unitar pentru fiecare produs comandat.
• utilizatorul poate ajusta cantitatea comandată pentru orice produs pentru a ajusta suma totală de achiziție.
• utilizatorul poate face clic pe butonul „Plasați comanda” de pe pagina coșului de cumpărături pentru a finaliza comanda., Utilizatorul va vedea un număr de confirmare atunci când comanda a fost plasată.
• [) utilizatorul poate face clic pe butonul „Anulare comandă” de pe pagina coșului de cumpărături pentru a anula comanda. Utilizatorul va vedea cantitățile de produse și suma totală de achiziție resetată la zero.
• utilizatorul poate face clic pe butonul „Vezi mai multe produse” de pe pagina coșului de cumpărături pentru a reveni la pagina Produse. Dacă comanda nu a fost plasată încă, aceasta nu va șterge produsele care au fost deja adăugate pe pagina Produse.,

caracteristici Bonus

• utilizatorul poate vedea un mesaj de eroare dacă cantitatea comandată depășește cantitatea „la îndemână” a produsului.
• utilizatorul poate specifica o factură și o navă la adresa Când comanda este plasată din pagina coșului de cumpărături
• utilizatorul poate vedea taxele de expediere adăugate la suma totală de achiziție
• utilizatorul poate vedea taxele de vânzare adăugate la suma totală de achiziție
• dezvoltatorul va implementa inventarul produsului într-un fișier extern sau într-o bază de date.

link-uri utile și resurse

există o mulțime de pagini de site-uri de comerț electronic acolo., Puteți folosi Dribbble și Behance pentru inspirație.

Exemple de proiecte

animații eCommerce

To-Do App

Tier: 2-intermediar

aplicația clasică de rezolvat în care un utilizator poate scrie toate lucrurile pe care vrea să le realizeze.,i>Utilizator poate vedea o listă cu toate finalizate pentru a-do,

Utilizator poate vedea o listă cu toate active pentru a-do,

Utilizatorul poate vedea data când a creat de-a face

atunci Când închideți fereastra browser-ului pentru a-do vor fi stocate și atunci când Utilizatorul se întoarce, datele vor fi preluate

link-uri Utile și resurse

• localStorage

Exemplu proiecte

Todo App construit cu Reacționa

Pentru a Face Lista pe Codepen

Contor de Calorii

Nivel: 3-Avansat

Asistent și de ședere sănătos necesită o combinație de echilibru mental, exercitii fizice, și de nutriție., Scopul aplicației Calorii Counter este de a ajuta utilizatorul să abordeze nevoile nutriționale prin numărarea caloriilor pentru diverse alimente.această aplicație oferă numărul de calorii pe baza rezultatului unei căutări a utilizatorului pentru un tip de mâncare. Departamentul de Agricultură al SUA MyPyramid Food Raw date vor fi căutate pentru a determina valorile caloriilor.contorul de calorii vă oferă, de asemenea, dezvoltatorului, experiență în transformarea datelor brute într-un format care va facilita căutarea., În acest caz, fișierul de date MyPyramid Food Raw, care este o foaie de calcul MS Excel, trebuie descărcat și transformat într-un fișier JSON care va fi mai ușor de încărcat și căutat în timpul rulării (sugestie: aruncați o privire la formatul fișierului CSV).

povești utilizator

• dezvoltatorul va crea un fișier JSON care conține produsele alimentare care urmează să fie căutate. Aceasta va fi încărcată atunci când aplicația este pornită.
• utilizatorul poate vedea un panou care conține o casetă de text de introducere a descrierii alimentelor, un buton „Căutare” și un buton „ștergere”.
• utilizatorul poate introduce termenii de căutare în caseta de text de introducere a descrierii alimentelor.,
• utilizatorul poate face clic pe butonul „Căutare” pentru a căuta mâncarea potrivită.
• utilizatorul poate vedea și mesajul de avertizare dacă nu au fost introduse Termeni de căutare.
• utilizatorul poate vedea un mesaj de avertizare dacă nu s-au găsit potriviri.
• utilizatorul poate vedea o listă cu produsele alimentare potrivite, dimensiunile porțiilor și caloriile într-un panou cu rezultate derulabile, care este limitat la 25 de intrări.
• utilizatorul poate face clic pe butonul „Clear” pentru a șterge termenii de căutare și lista de rezultate.

caracteristici Bonus

• utilizatorul poate vedea numărul numărului de produse alimentare potrivite adiacente listei de rezultate.,
• utilizatorul poate folosi un caracter wildcard în termeni de căutare.
• utilizatorul poate vedea mai mult de 25 de intrări dintr-o căutare făcând clic pe o pictogramă în jos pentru a adăuga mai multe produse alimentare potrivite în lista cu rezultatele căutării.
• Dezvoltatorul va implementa încărca MyPyramid de date într-o bază de date sau o structură de date, alta decât o matrice pentru o căutare mai rapidă.,

link-uri Utile și resurse

MyPyramid Prime Alimentare Date

Exemplu proiecte

Hrana Calculator

Aplicație de Chat

Nivel: 3 Avansat

în timp Real chat-ul de interfață în cazul în care mai mulți utilizatori pot interacționa cu fiecare alte prin trimiterea de mesaje.ca MVP (produs viabil minim) vă puteți concentra pe construirea interfeței de Chat. Funcționalitatea în timp Real poate fi adăugată mai târziu (caracteristicile bonus).

povești utilizator

• utilizatorul este solicitat să introducă un nume de utilizator atunci când vizitează aplicația de chat., Numele de utilizator va fi stocate în aplicația
• Utilizatorul poate vedea un input field unde se poate introduce un nou mesaj
• Prin apăsarea enter cheie sau făcând clic pe send butonul textul va fi afișat în chat box alături de numele de utilizator (de exemplu,, John Doe: Hello World!)

caracteristici Bonus

• mesajele vor fi vizibile pentru toți Utilizatorii care sunt în aplicația de chat (folosind WebSockets)
• atunci Când un nou Utilizator se alătură chat, este afișat un mesaj pentru toți Utilizatorii existente
• Mesajele sunt salvate într-o bază de date
• Utilizatorul poate trimite imagini, clipuri video și link-uri care vor fi afișate în mod corespunzător
• Utilizatorul poate selecta și trimite un emoji
• Utilizatorii pot discuta in privat
• Utilizatorii se pot alătura channels pe teme specifice

link-uri Utile și resurse

• Soclu.,io
• cum de a construi un React.js chat app în 10 minute — articolul
• de a Construi o aplicație de chat ca Slack — Reacționează / JavaScript Tutorial — Youtube
• Soclu.io Chat App Folosind Websockets — Youtube Tutorial

Exemplu proiecte

Chatty2

GitHub Cronologie

Nivel: 3 Avansat

API și reprezentarea grafică a informațiilor sunt semnele distinctive de aplicații web moderne. Github Timeline combină cele două pentru a crea un istoric vizual al unei activități GitHub utilizatori.,scopul cronologiei GitHub este acceptarea unui nume de utilizator GitHub și producerea unei cronologii care conține fiecare repo și adnotată cu numele repo, data la care au fost create și descrierile acestora. Cronologia ar trebui să fie una care ar putea fi împărtășită cu un potențial angajator. Ar trebui să fie ușor de citit și să utilizeze eficient culoarea și tipografia.

numai repo-urile publice GitHub ar trebui să fie afișate.,

povești utilizator

• utilizatorul poate introduce un nume de utilizator github
• utilizatorul poate face clic pe un buton „Generare” pentru a crea și afișa cronologia repo utilizatori numiți
• utilizatorul poate vedea un mesaj de avertizare dacă numele de utilizator GitHub nu este un nume de utilizator GitHub valid.

caracteristici Bonus

• Utilizatorul poate vedea un rezumat al numărului de repos numărate de anul în care au fost create

link-uri Utile și resurse

GitHub oferă două API, puteți utiliza pentru a accesa repo de date. De asemenea, puteți alege să utilizați un pachet NPM pentru a accesa API-ul GitHub.,>

exemplu de cod arată cum să utilizați API GitHub sunt:

• GitHub RESTUL de client API pentru JavaScript
• GitHub GraphQL API client pentru browsere și Nod

puteți utiliza această comandă CURL pentru a vedea JSON returnate de V3 API REST pentru operațiunile repo:

curl -u "user-id" https://api.github.com/users/user-id/repos

Exemplu proiecte

CSS Cronologie

pentru a construi o Cronologie Vertical Cu CSS și un Dram de JavaScript

Shuffle Punte Carte

Nivel: 3 Avansat

Ca Web Developer vei fi rugat să vină cu aplicații inovatoare care rezolva probleme reale pentru oameni reali., Dar ceva ce veți învăța rapid este că, indiferent cât de multe caracteristici minunate pe care le împachetați într-o aplicație, utilizatorii nu o vor folosi dacă nu sunt performante. Cu alte cuvinte, există o legătură directă între modul în care funcționează o aplicație și dacă utilizatorii o percep ca utilizabilă.obiectivul aplicației Shuffle card Deck este de a găsi cea mai rapidă tehnică pentru amestecarea unui pachet de cărți pe care îl puteți utiliza în aplicațiile de joc pe care le creați. Dar, mai important, vă va oferi experiență în măsurarea și evaluarea performanței aplicației.,sarcina dvs. este să implementați algoritmul de evaluare a performanței, generatorul de numere pseudorandom xorshift, precum și algoritmul WELL512a.c dacă alegeți să încercați caracteristica bonus.

Povești de Utilizator

• Utilizatorul poate vedea un panou care conține o casetă de text utilizatorul poate introduce numărul de runde în, ieșire trei casete de text să conțină ora de începere, ora de terminare, și timpul total de testare, și două butoane — ‘JS Aleatoare’, ‘Xorshift’.
• utilizatorul poate introduce un număr de la 1 la 10.000 pentru a specifica numărul de ori (sau runde) Numărul aleatoriu selectat urmează să fie executat.,
• utilizatorul poate face clic pe unul dintre cele trei butoane pentru a începe evaluarea algoritmului de numere aleatorii selectat. Algoritmul de numere aleatorii va fi executat pentru numărul de runde introduse de utilizatorul de mai sus.
• utilizatorul poate vedea un mesaj de avertizare în cazul în care numărul de runde nu a fost introdus, în cazul în care nu este în intervalul de la 1 la 10.000, sau în cazul în care nu este un număr întreg valid.
• utilizatorul poate vedea o zonă de ieșire tabulară în care sunt afișate rezultatele fiecărui algoritm — numele algoritmului, ora începută, ora încheiată și timpul total.,
• utilizatorul poate vedea un dialog de avertizare cu un buton „Anulare” și un buton ” OK ” dacă numărul de runde este modificat înainte ca toate cele trei teste să fie rulate.
• utilizatorul poate face clic pe butonul „Anulare” din dialogul de avertizare pentru a respinge dialogul fără modificări.
• utilizatorul poate face clic pe butonul ” OK ” din dialogul de avertizare pentru a șterge zona de ieșire și a închide dialogul de avertizare.

caracteristici Bonus

• Utilizatorul poate vedea un al treilea algoritm buton — ‘WELL512a.c’.
• dezvoltatorul ar trebui să revizuiască rezultatul și să determine de ce cel mai rapid algoritm este mai rapid decât cel mai lent algoritm.,

link-uri utile și resurse

• Random Number Generation (Wikipedia)
• Math.la întâmplare (MDN)
• Xorshift (Wikipedia)
• WELL512a.c
• consola.timp (MDN)
• Utilizarea Chrome DevTools Audit Caracteristică pentru a Măsura și de a Optimiza Performanța (Partea 1)
• Utilizarea Chrome DevTools Audit Caracteristică pentru a Măsura și de a Optimiza Performanța (Partea 2)

Sondaj App

Nivel: 3 Avansat

Sondaje sunt o parte valoroasă din orice dezvoltatori de instrumente., Acestea sunt utile pentru a obține feedback de la utilizatorii dvs. pe o varietate de subiecte, inclusiv satisfacția aplicațiilor, cerințele, nevoile viitoare, problemele, prioritățile și agravările simple pentru a numi câteva.

aplicația sondaj vă oferă posibilitatea de a învăța prin dezvoltarea unei aplicații full-featured pe care le puteți adăuga la setul de instrumente. Oferă posibilitatea de a defini un sondaj, de a permite utilizatorilor să răspundă într-un interval de timp predefinit și de a tabela și prezenta rezultatele.,utilizatorii acestei aplicații sunt împărțiți în două roluri distincte, fiecare având cerințe diferite:

• coordonatorii sondajului definesc și conduc sondaje. Aceasta este o funcție administrativă care nu este disponibilă utilizatorilor obișnuiți.
• respondenții sondajului completează sondajele și vizualizează rezultatele. Ei nu au privilegii administrative în cadrul aplicației.

instrumentele de sondaj comercial includ funcționalitatea de distribuție pe care sondajele de e-mail în masă le oferă respondenților sondajului. Pentru simplitate, această aplicație presupune că sondajele deschise pentru răspunsuri vor fi accesate de pe pagina web a aplicației.,coordonatorii sondajului și respondenții sondajului pot defini, conduce și vizualiza sondaje și rezultatele sondajului de pe un site web comun

coordonatorii sondajului se pot conecta la aplicație pentru a accesa funcții administrative, cum ar fi definirea unui sondaj.

definirea unui sondaj

• coordonatorul sondajului poate defini un sondaj care conține 1-10 întrebări cu răspunsuri multiple.
• coordonatorul sondajului poate defini 1-5 selecții care se exclud reciproc pentru fiecare întrebare.
• coordonatorul sondajului poate introduce un titlu pentru sondaj.,
• coordonatorul sondajului poate face clic pe butonul „Anulează” pentru a reveni la pagina principală fără a salva sondajul.
• coordonatorul sondajului poate face clic pe butonul „Salvează” Salvează un sondaj.,

Efectuarea unui Sondaj

• Sondaj Coordonator poate deschide un sondaj prin selectarea unui sondaj dintr-o listă de definit anterior sondaje
• Sondaj Coordonatori poate închide un sondaj prin selectarea dintr-o listă de a deschide anchete
• Sondaj Respondent poate finaliza un sondaj prin selectarea dintr-o listă de a deschide anchete
• Sondaj Respondent poate selecta răspunsuri la întrebările sondajului, făcând clic pe o casetă de selectare
• Sondaj, Respondenții pot vedea că o anterior selectat răspuns automat va fi bifată dacă un răspuns diferit este apasat.,
• respondenții sondajului pot face clic pe butonul „Anulează” pentru a reveni la pagina principală fără a trimite sondajul.
• respondenții sondajului pot face clic pe butonul „Trimite” trimiteți răspunsurile la sondaj.
• respondenții sondajului pot vedea un mesaj de eroare dacă se face clic pe „Trimite”, dar nu au răspuns la toate întrebările.,

vizualizarea rezultatelor sondajului

• coordonatorii sondajului și respondenții sondajului pot selecta sondajul de afișat dintr-o listă de sondaje închise
• coordonatorii sondajului și respondenții sondajului pot vizualiza rezultatele sondajului ca în format tabelar care arată numărul de răspunsuri pentru fiecare dintre selecțiile posibile la întrebări.,

caracteristici Bonus

• Sondaj, Respondenții pot crea un cont unic în aplicația
• Sondaj, Respondenții pot conecta la aplicația
• Respondenții Sondajului nu poate finaliza același sondaj mai mult de o dată
• Sondaj Coordonatori și Respondenții pot vizualiza reprezentări grafice ale rezultatelor studiului (de exemplu, plăcintă, bar, coloana, etc., diagrame)

link-uri Utile și resurse

Biblioteci pentru studii de construcții:

• SurveyJS

Unele comerciale sondaj de servicii includ:

• Sondaj Maimuță
• Traversy
• Typeform

Exemplu proiecte

Javascript Chestionar

Concluzie

Acum ai o baza de 15 aplicații pe care le puteți juca cu. Am creat un depozit GitHub unde puteți găsi și mai multe idei dacă sunteți interesat și sunteți bineveniți să contribuiți, să împărtășiți și să îi oferiți o stea!

codificare fericit! ^ _ ^