Notice: A session had already been started - ignoring session_start() in /var/www/html/biblioteca/inceput_pag_a.php on line 2
Tehnici Web, proiecte JS

Tehnici Web

Nu esti logat.

Pentru cei care nu au venit la laborator, si nu stiu sistemul de punctare: nu e obligatoriu sa faceti tot. Nota maxima e 1.5! Ideal e sa faceti tot daca vreti sa fiti pregatiti pentru examen. Am gandit cerintele astfel incat sa treaca prin toata materia predata, ca sa fie o recapitulare pentru examen. Ce depaseste 1p va fi mutat in punctajul de activitate, asa cum s-a facut si la proiectul de HTML si CSS.

Apropo de activitate, reamintesc ca 1000 de puncte inseamna acel 1p din nota de laborator, dar daca luati 2000 de puncte inseamna un punct in plus pentru nota finala (dupa ce s-a facut media). Majoritatea va apropiati de 1000 de puncte, cu 500 de la proiect si cu punctele in plus pe testul de JS, plus cateva teme, puteti ajunge usor la 2000.

Atentie, in proiect se va puncta doar ce apare in cerinte. Daca vreti sa modificati ceva imi trimiteti mesaj, si numai dupa ce va confirm ca e ok incepeti sa lucrati. Daca se intampla sa imi trimiteti mesaj si trec mai multe ore si nu va raspund e posibil sa fi sarit din gresala peste mesaj. Intotdeauna raspund (daca vad ca mi s-a scris). Asa ca scrieti din nou pe mail/facebook sau in caz ca e ceva urgent: 0722613333. Imi puteti scrie oricand in vacanta, nu va ganditi ca ma deranjati sau ceva de genul asta - eu astept cu drag intrebarile voastre. Va multumesc.

Lista de obiective

Proiecte Javascript

  1. Andrei Ana

    Modul de notare:

    1. Un joc in care utilizatorul trebuie sa elibereze niste animale din custi. Cand face click pe un animal, apare o intrebare despre acesta, si daca utilizatorul raspunde corect, animalul este eliberat. Altfel utilizatorul pierde o viata.
    2. Se va folosi un fisier extern pentru codul javascript
    3. Va exista un obiect utilizator creat cu new Object(). Va avea o proprietate nr_vieti, o proprietate nume, o proprietate scor si o metoda e_viu() care testeaza daca numarul de vieti e mai mare strict ca 0. Crearea utilizatorului se va face la onload
    4. Va exista un constructor pentru obiectele de tip Animal.
    5. Obiectul animalva avea o proprietate privata booleana in_cusca (true daca animalul e in cusca si false in caz contrar). Pentru aceasta proprietate se vor scrie functiile getter si setter. Functia setter va verifica daca valoarea data pentru setare este intr-adevar booleana. Obiectul va avea si o proprietate numita id care va contine numarul de ordine al animalutului (primul animal va avea id-ul 1, al doilea 2 etc.) si o proprietate nume
    6. In constructorul animal se va defini o proprietate statica in care se numara cate animale au fost create
    7. Tot in constructor se va defini o proprietate publica imagine continand obiectul DOM asociat animalului respectiv. Pentru imagine se va defini o proprietate dataObiect care va contine id-ul obiectului asociat imaginii
    8. Se va defini si o metoda privata genereazaNume() care va aloca aleator un nume animalutului dintr-un vector de nume existente, de exemplu ['Bobo', 'Bubu', 'Teddy', 'Lulu', 'Dodo']. Aceasta metoda va fi apelata la construirea obiectului.
    9. Clasa animal va avea o metoda schimbaNume(numeNou) definita prin prototype, prin care se va schimba numele animalutului, afisand un prompt care cere noul nume.
    10. Se va defini o proprietate statica a clasei prin prototype in care se va memora cate animalute sunt in cusca.
    11. Se va defini o metoda statica a clasei prin prototype care va afisa un alert cu cate animalute sunt in prezent in cusca.
    12. Se va defini o clasa animalNerabdator derivata din clasa animal Aceste animale au proprietatea ca asteapta doar un anume timp pe ecran pana sunt eliberate. Daca trece acel timp, pot fi in continuare eliberate insa utilizatorul pierde o viata la eliberare deoarece animalul nerabdator "il ataca" (nu trebuie implementat atacul- e "imaginar"). Aceasta clasa va avea in plus fata de cea de baza, proprietatea publica timp_asteptare, setata prin constructor.
    13. Pe pagina jocului va exista un panou pentru setari, realizat printr-un div (atentie, nu un form) cu mai multe elemente de tip input si select:
      • Cu autorul unui input de tip range se vaa seta numarul de animale care sa apara pe ecran.
      • In inputul de tip text, utilizatorul va scrie numele personajului.
      • Cu ajutorul inputului de tip checkbox, utilizatorul va decide daca sa aiba si "animalute nerabdatoare" sau nu.
      • Cu ajutorul unui set de inputuri de tip radio (grup de radiobutton-uri -deci cu acelasi name), utilizatorul va alege fundalul (culoarea de background).
      • Cu ajutorul unui select simplu, utilizatorul va alege tipul de animal. In momentul in care se schimba selectia (onchange) sub select, va aparea si poza cu animalul respectiv.
      • Cu ajutorul unui select multiplu utilizatorul va alege dintr-o lista de forme geometrice (se vor folosi mai tarziu in joc): cerc, patrat, dreptunghi, romb.
      • Va exista si un buton care, la click va crea ecranul de joc, cu animalutele in custi, in functie de setarile date de utilizator. In momentul crearii animalutelor, toate imaginile cu un animal vor primi si clasa "animal". In afara de aceasta clasa, vor primis si o clasa random: cerc, patrat, dreptunghi, romb in functie de variantele posibile selectate in selctul multiplu (de exemplu daca s-au selectat doar cuvintele cerc si patrat, clasele posibile vor fi doar cerc si patrat. Se va folosi proprietatea classList pentru acest lucru (alocarea mai multor clase aceluias element).
    14. Vom considera un div al jocului cu id-ul "div_joc". Crearea custilor se va face dinamic si custile se vor adauga cu appendChild in divul jocului. Unele animalute vor fi nrabdatoare si vor avea in plus si clasa "nerabdator" pe langa "animal" si forma geometrica
    15. Pentru animalutele nerabdatoare, dupa crearea custilor, se va insera cu insertBefore un paragraf cu un temporizator, avand forma "Timp ramas: nr_secunde". Sa presupunem ca animalutele isi pierd rabdarea in 30 de secunde. Atunci temporizatorul va porni de la 30 si cu ajutorul unui setInterval, va scadea cu cate o secunda pana va ajunge la 0. Crearea continutului paragrafului se va face prin createElement pentru elementul bold si createTextNode pentru timpul efectiv. Iar schimbarea sa se va face modificand nodeValue-ul primului childNode al paragrafului care este textNode - verificand acest lucru cu ajutorul proprietatii nodeType (se va puncta complet numai daca se urmeaza acest algorim de modificare a valorii, pentru a trece prin toate elementele JS)
    16. La click pe o cusca va aparea o intrebare sub forma unui prompt. Adaugarea clickului s-a facut dinamic, cu proprietatea onclick a elementelor DOM. Iar daca utilizatorul raspunde corect, animalul e eliberat din cusca (cusca dispare si animalul se deplaseaza printr-o animatie spre coltul din stanga sus al ecranului pana cand iese din ecran). La inceputul animatiei, imaginea animalutului isi va pierde toate celelalte clase (animal, forma geometrica, nerabdator sau nu) ca sa nu intre in diversele selectii, si va primi o clasa noua "liber" setata prin proprietatea className. Cand a iesit din ecran, ca sa nu mai ocupe memorie, va fi scos si din DOM (removeChild). Sub div va exista un paragraf in care va fi afisat scorul. Textul scorului se va schimba cu innerHTML. Daca utilizatorul gresete o intrebare, pierde o viata si va fi notificat printr-un alert cu cate vieti mai are.
    17. Daca se face click pe un animal, in timpul deplasarii spre coltul stanga-sus, imaginea va fi inlocuita cu un paragraf cu textul "[Nume] e liber", unde Nume e numele animalului si va continua miscarea. Inlocuirea se va face prin replaceChild
    18. La ctrl+click pe un animal in cusca, insa, nu apare o intrebare ci un prompt in care se poate schimba numele animalutului, folosind metoda schimbaNume() a clasei animal. La apasarea tastei "n" se poate schimba si numele utlizatorului. Numele utilizatorului se va schimba tot prin functia schimbaNume chemata cu ajutorul lui prototype din clasa animal (animal.prototype.schimbaNume).
    19. La click in divul de joc, se va da un alert cu cate animale mai sunt in cusca. Atentie alertul nu trebuie sa apara cand se face click pe un animal.
    20. In ecranul de joc va exista si un div (se va vedea doar chenarul) in care scrie "Adopta un animal". Cu drag&drop se va putea prelua o cusca (una singura per joc) care sa fi mutata in div. In acel moment dispare cusca(animalul e liber fara intrebare) si se considera ca a fost adoptat.
    21. Daca se face mousedown pe animalutul adoptat, deasupra animalutului o sa apara un text cu numele lui. La mouseup dispare textul.
    22. Sub divul de joc, vor exista un cerc, un romb, un dreptunghi si un patrat (sau doar o parte din formele acestea in functie de ce s-a selectat in select. La dubluclick pe o astfel de forma, de exemplu pe cerc, toate animalele cu clasa cerc (getElementsByClassName) vor fi inlocuite de un cerc. La dubluclick din nou, revin la imaginea cu animalele. Daca se raspunde corect la o intrebare a unui animal cat timp e transformat in forma geometrica, sunt eliberate toate de aceeasi forma. daca se raspunde gresit, se pierde jocul. Formele se vor desena in canvas sau cu autorul tagului svg. Selectarea lor pentru eliberarea colectiva se va face prin getElementsByTagName() care va primi ca parametru canvas sau svg in functie de caz.
    23. Cand miscam cursorul in cadrul divului jocului, intr-un paragraf sub div, vom vedea coordonatele cursorului in cadrul divului (coltul din stanga sus va avea coordonatele 0,0) dar si coordonatele in cadrul ferestrei.
    24. Daca miscam cursorul pe un animalut de mai mult de N=1000 de ori (la fiecare mousemove va creste un contor) atunci acesta va considera ca il gandilam si va da un alert cu mesajul "hi hi!". Contorul se reseteaza cand luam cursorul de pe animalut. Adaugarea evenimentului de mousemove pe elementele imagine se va face cu addEventListener in modul capturing, nu bubbling
    25. Intrebarile pentru animale se vor prelua dintr-un xml. Acesta poate avea o forma precum cea din exemplul de mai jos: <?xml version="1.0" encoding="UTF-8"?>
      <intrebari_animale>
       <animal tip="tigru">
        <intrebare>
         <text>...text intrebare 1...</text>
         <raspuns>...raspuns intrebare 1...</raspuns>
        </intrebare>
        <intrebare>
         <text>...text intrebare 1...</text>
         <raspuns>...raspuns intrebare 1...</raspuns>
        </intrebare>
       </animal>
      </intrebari_animale>
    26. La apasarea tastei "P" (keydown) se opresc toate cronometrele animalutelor nerabdatoare. Cand se ia degetul de pe tasta P(keyup) acestea repornesc.
    27. La apasarea Shift+tasta, toate animalutele nerabdatoare al caror nume incepe cu tasta respectiva devin un pic mai mari. Selectarea acestor animalute se va face cu querySelectorAll
    28. La apasarea tastei esc, se va termina jocul. Se va selecta divul de joc cu getElementById, se va itera prin fiii sai si pe rand vor fi toti stersi, afisandu-se in consola (console.log) tagurile elementelor sterse (proprietatea tagName).
    29. Cand se vine cu cursorul pe un animalut(mouseover) zona lui se coloreaza (prin background sau border) si optional scoate un sunet specific (de exemplu daca e leu spune roarr!). Cand se ia cursorul de pe animal (mouseout), dispare backgroundul/borderul colorat.
    30. Cand se vine cu cursorul pe divul zonei de joc, acesta capata un border verde, iar cand se iese cu cursorul, borderul dispare. Se va realiza prin mouseenter si mouseleave, pentru a nu se activa si cand se intra sau se iese cu cursorul de pe custi, deoarece elementele custi sunt elemente-fii ale divului cu jocul.
    31. Sub divul jocului va exista un formular cu un input de tip text, unul de tip range, unul hidden cu scorul, unul hidden cu durata de joc (calculata cu ajutorul clasei predefinite Date) si un textarea. Initial formuralul era ascuns cu display: none, dar cand s-a pornit jocul, a devenit si formularul vizibil. Primul input va contine numele dat de utilizator la inceputul jocului. Range-ul va avea un label: "dati o nota jocului" si va avea valori intre 1 si 10, iar in dreptul elementului de tip textarea va fi scris "Lasa un mesaj".
      • Formularul va avea un input de tip submit. Daca jocul inca nu s-a terminat pe el va scrie "renunta" altfel va scrie "trimite_scorul". Atata timp cat jocul e activ, la submit va aparea un confirm, si numai daca utilizatorul confirma ca vrea sa trimita datele din formular, se va intampla submitul, altfel nu.
      • Formularul va avea un input de tip reset care initial va fi disabled. La primul focus survenit pe un element in formular, butonul de reset devine enabled. Daca la blur pe un element din formular, formularul e in continuare necompletat, butonul de reset devine disabled. La click pe reset in afara de faptul ca se reseteaza toate elementele, backgroundul lor devine verde si ramane asa timp de 3 secunde (setTimeout), ca sa atentioneze utilizatorul, ca s-au resetat. Daca in acest interval de 3 secunde se mai da un reset se da clearTimeout la Timeout-ul anterior si se porneste unul nou de 3 secunde.
      • Datele din formular se vor trimite cu get. La submit, datele vor fi trimise spre o alta pagina html, numita date_introduse.html, care va prelua datele din location-ul documentului (vor aparea dupa ? in bara de adrese). Acea pagina va realiza si salvarea datelor in localStorage. Practic pentru fiecare joc terminat, in locl storage se va salva numele utilizatorului, scorul, cat a durat jocul, ratingul dat de el si mesajul lasat.
      • Pagina date_introduse.html va avea si un buton "afiseaza scoruri" care va deschide o fereastra noua de dimensiuni 500*500 in care vor fi afisate toate scorurile salvate in localStorage, cu ajutorul unui tabel generat dinamic. Cand suntem cu cursorul pe un rand din tabel (mouseover) si apasam tasta del, acel rand dispare din tabel si este si sters din localStorage. De asemenea pagina va avea si un buton "sterge tot" care va sterge toate datele din localStorage (metoda clear)
      • La resize-ul ferestrei mici, aceasta va da un alert cu "Ntz!" si va reveni la dimensiunea initiala (preluata la load din innerWidth, innerHeight).
  2. Luca Bianca Beatrice

    Modul de notare:

    1. Un formular de selectare a retetelor pe baza unor criterii de cautare.
    2. Se va folosi un fisier extern pentru codul javascript
    3. Va exista un obiect ingredient creat cu new Object(). Va avea o proprietate nume, o proprietate unitateMasura, o proprietate cantitate, si o metoda compara() care testeaza daca avem o cantitate mai mare (returneaza 1), mai mica (returneaza -1) sau egala (returneaza 0) fata de un ingredient primit ca parametru. Va returna sirul "nu se pot compara", daca nu putem compara ingredientele (unitati de masura diferite).
    4. Va exista un constructor pentru obiectele de tip Reteta.
    5. Obiectul Reteta va avea o proprietate publica nume, o proprietate publica text, o proprietate publica imagine(cu sursa imaginii) si un privata vectorIngrediente, continand un vector de obiecte ingrediente. Pentru aceasta proprietate se vor scrie functiile getter si setter. Functia setter va verifica daca valoarea data pentru setare este intr-adevar un vector format din obiecte de tip ingredient. Obiectul Reteta va avea si o proprietate numita id care va contine numarul de ordine al retetei (prima reteta va avea id-ul 1, a doua 2 etc.)
    6. In constructorul Reteta se va defini o proprietate statica in care se numara cate retete au fost create
    7. Tot in constructor se va defini o proprietate publica sectiune care va contine obiectul DOM section asociat retetei respective. Pentru obiectul de tip section se va defini o proprietate dataObj care va contine id-ul obiectului Reteta asociat sectiunii
    8. Se va defini si o metoda privata creeazaListaIngrediente() care va returna un obiect DOM de tip ul, continand lista ingredientelor preluate din vectorul de ingrediente. Elementele vor fi create dinamic, cu createElement, si li se va seta innerHTML-ul astfel incat sa contina numele ingredientului, cantitatea si unitatea de masura. Lista in sine nu se va adauga inca intr-un parent, in pagina ci doar se va returna.
    9. Clasa Reteta va avea o metoda creeazaSectiuneReteta() definita in constructor, prin care se va crea un obiect de tip section (nu se va insera in pagina inca, doar va fi returnat obiectul DOM). Aceasta va crea un heading pentru numele retetei, un paragraf pentru text si va folosi lista returnata de creeazaListaIngrediente() pe care o va adauga cu insertBefore intre heading si paragraf. Numarul headingului va fi primit ca parametru (de exemplu creeazaSectiuneReteta(3) va crea o sectiune cu un heading h3)
    10. Clasa Reteta va avea o metoda calculeazaCalorii() definita prin prototype, care va returna numarul total de calorii pentru ingrediente (pentru a nu pierde timp cu documentarea, in XML-ul cu ingredientele se pot pune valori "inventate" pentru calorii).
    11. Se va defini o proprietate statica vTotalIngrediente a clasei prin prototype in care se va tine minte un vector cu numele ingredientelor folosite in toate retetele (numele vor fi distincte).
    12. Se va defini o metoda statica a clasei prin prototype, numita identificaIngrediente() care, primind un text(String), va returna un obiect de tip paragraf in care ingredientele gasite sunt marcate cu bold. In crearea paragrafului se va folosi metoda createTextNode() pentru a crea zonele de text intre ingrediente. De exemplu textul "am mancat paine cu unt si apoi am baut un ceai cu zahar" devine paragraful:

      am mancat paine cu unt si apoi am baut un ceai cu zahar

    13. Se va defini o clasa RetetaDetaliata care va avea in plus si un timp de realizare. Si o metoda pornesteCronometru care creaza si returneaza o bara (tagul meter), a carei valoare scade la fiecare secunda pana ajunge la 0. Cand ajunge la 0 se opreste intervalul. Tot asa, bara nu este inca adaugata intr-un container ci doar returnata.
    14. Datele pentru ingrediente si retete se vor prelua dintr-un xml la incarcarea paginii (onload). Fisierul xml poate avea o forma precum cel din exemplul de mai jos (ce-i drept va fi nevoie de mai multe date ca sa functioneze aplicatia): <?xml version="1.0" encoding="UTF-8"?>
      <date>
          <ingrediente><!-- considerate la 1 unitate de masura -->
              <ingredient>
                  <nume>zahar</nume>
                  <calorii>100</calorii>
              </ingredient>
              <ingredient>
                  <nume>sare</nume>
                  <calorii>0</calorii>
              </ingredient>
          </ingrediente>
          
          <retete>
              <reteta>
                  <ingrediente>
                      <ingredient>
                          <nume>zahar</nume>
                          <unit_masura>g</unit_masura>
                          <cantitate>100</cantitate>
                      </ingredient>
                      <ingredient>
                          <nume>faina</nume>
                          <unit_masura>g</unit_masura>
                          <cantitate>100</cantitate>
                      </ingredient>
                  </ingrediente>
                  <nume>nume reteta 1</nume>
                  <imagine>cale imagine reteta 1</imagine>
                  <text>...text reteta 1</text>
              </reteta>
          </retete>
      </date>
      In xml, retetele detaliate vor mai avea si un element numit timp, cu numarul de secunde necesare realizarii lor. In felul asta ne dam seama daca sa creem o reteta detaliata sau simpla.
    15. Pe una dintre pagini va exista un panou pentru setari, realizat printr-un div (atentie, nu un form) cu mai multe elemente de tip input si select, prin care se vor cauta retete care sa indeplineasca anumite conditii:
      • Cu ajutorul unui input de tip range se va seta numarul maxim de calorii pe care sa il aiba reteta.
      • In inputul de tip text, utilizatorul va scrie numele cererii (va putea mai tarziu sa revizualizeze cererea folosind acest nume).La focus (eveniment onfocus), textboxul va deveni rosu si la blur(onblur) va redeveni alb.
      • Cu ajutorul inputului de tip checkbox, utilizatorul va decide daca vrea sa aiba doar retete detaliate (cu timpul afisat) sau ambele.
      • Cu ajutorul unui set de inputuri de tip radio (grup de radiobutton-uri -deci cu acelasi name), utilizatorul va alege fundalul (culoarea de background) pe care se vor afisa retetele.
      • Cu ajutorul unui select simplu, utilizatorul va alege modul de afisare:
        • Reteta afisata pe 2 coloane: ingredientele in stanga si reteta in dreapta
        • Reteta afisata pe o coloana: ingredientele deasupra si textul reteti dedesubt
      • La schimbarea selectiei, se va afisa folosind tagul svg sau desenarea in canvas o imagine cu doua dreptunghiuri unul langa altul, respectiv o imagine cu doua dreptunghiuri, unul sub altul.
      • Cu ajutorul unui select multiplu utilizatorul va alege dintr-o lista de ingrediente, ce ingrediente doreste sa contina reteta lui. Lista va fi luata din proprietatea statica vTotalIngrediente a clasei.Langa selectul multiplu va fi si un buton cu textul "random" care va crea o selctie random in select.
      • Va exista si un buton care, la click va afisa retetele conform setarilor date de utilizator. Inainte de afisare, insa, il va intreba pe utilizator, printr-un confirm, daca e sigur de selectiile facute, si in caz ca da, va face afisarea, altfel, nu. Retetele vor fi selectate din vectorul de retete incarcate din xml. In momentul afisarii retetelor, se va apela de fapt functia creeazaSectiuneReteta() si se va insera in document sectiunea returnata. Toate sectiunile vor avea clasa reteta. Sectiunile care provin din retete detaliate vor avea in plus si clasa detaliata . Se va folosi proprietatea classList pentru acest lucru (alocarea mai multor clase aceluias element).
    16. cand venim cu cursorul pe imaginea retetei (care se afla, evident, in sectiunea retetei) (mouseover), imaginea capata un border, care dispare cand luam cursorul de pe imagine (mouseout).
    17. Cand se vine cu cursorul pe sectiunea retetei, acesta capata un background diferit(sa zicem, galben), iar cand se iese cu cursorul, backgroundul revine la culoarea initiala. Se va realiza prin mouseenter si mouseleave, pentru a nu se activa si cand se intra sau se iese cu cursorul de pe imaginile retetelor, deoarece elementele imagini sunt elemente-fii ale sectiunilor-retete.Totusi, la click pe reteta, aceasta se va dezactiva (backgroundul devine alb), ca la mouseleave.
    18. Dupa generarea retetelor, folosind getElementsByClassName, in retetele detaliate va fi si un buton cu textul "porneste cronometru", care la click va afisa tagul meter returnat de metoda pornesteCronometru() al obiectului RetetaDetaliata. Daca se face click undeva pe tagul meter, valoare lui se va seta astfel incat sa fie conform pozitiei clickului. Atentie la click pe buton sau tagul meter, nu trebuie sa se activeze clickul pe fereastra (se va opri propagarea). Evenimentele se vor adauga dinamic prin proprietatea onclick
    19. Adaugat prin JavaScript si setat sa apara in coltul din dreapta jos, folosind innerWidth si innerHeight va fi un div negru in interiorul caruia va scrie "arunca retete"
    20. La apasarea tastei i, in consola (console.log) se va afisa vectorul ingredientelor distincte din toate retetele (exista posibilitatea sa nu fie neaparat cele din selectul de ingrediente. Pentru a selecta toate li-urile din listele de ingrediente ale retetelor, dar nu si alte li-uri de pe pagina se va folosi querySelectorAll
    21. Daca apasam tasta x cat timp e selectata o reteta, toate elementele din ea dispar (tot ce e in children (fiindca sectiunea asa cum a fost creata ar trebui sa nu aiba si textNodes) e sters - removeChild) mai putin imaginea. Apoi aceasta primeste o clasa numita obiect_in_miscare, prin proprietatea className. Clasa obiect_in_miscare in css are setata proprietatea position:absolute si un border punctat verde de 2 px. Imaginea incepe sa se deplaseze printr-o animatie spre divul negru. Cand ajunge acolo, se redimensioneaza sa incapa in divul negru si ramane pentru 3 secunde asa, apoi dispare.
    22. Putem realiza si un drag&drop pe imagine (cat inca e in sectiune, ducand-o pana in divul negru. In acel moment sectiunea va disparea iar imaginea va ramane in div pentru cele 3 secunde
    23. daca facem dublu-click pe imagine cat timp aceasta se misca sau e in div si nu au trecut cele 3 secunde, reteta revine la loc (e creata din nou din obiectul Reteta din care a fost creata si la inceput) si se relizeaza clearTimeout ca sa nu mai dispara imaginea.
    24. La ctrl+click pe un ingredient, in jurul acestuia apare un border,iar in dreptul cursorului apare un div cu o informatie cu cate calorii are acel ingredient. Cand se misca cursorul, se misca si divul dupa cursor. Cand se iese de pe lista de ingrediente, dispare divul si borderul ingredientului selectat. Adaugarea triggerului pentru evenimentul "click" se va face pe ingredient in mod dinamic, prin addEventListener, in modul capturing.
    25. La apasarea tastelor sageata-sus, sageata-jos, se va selecta ingredientul de mai sus, respectiv de mai jos astfel: la keydown o sa apara borderul pe ingredientul nou si la keyup o sa dispara cel de pe ingredientul vechi. In acelasi timp se modifica informatia din divul cursorului. Migrarea in sus/jos se va face cautand in elementele children ale parent-ului
    26. In momentul in care s-a apasat pentru buton ca sa se genereze lista de retete, s-a salvat si in localStorage queryul sub forma unui obiect creat prin objectliteral cu proprietatile: nume (numele cererii), ingrediente, mod_afisare, background, nr_max_calorii, data_cererii (obtinuta cu ajutorul clasei Date), numarul de calorii al ingredientelor selectate, calculat cu ajutorul functiei calculeazaCalorii() al clasei Reteta. Pentru a putea accesa metoda pe obiectul de tip cerere se va folosi scriere Reteta.prototype.calculeazaCalorii.call().
    27. Deasupra divului de setari exista si un buton incarca cerere veche. La click pe el, in cazul in care nu exista cereri vechi va da un alert cu un mesaj de eroare, altfel va deschide un prompt in care va cere utilizatorului sa dea numele unei cereri vechi. La click pe ok-ul promptului, se va afisa rezultatul cererii numite. Va exista si un buton cu textul "sterge cerere" care va avea acelasi comportament cu exceptia ca la click pe ok-ul promptului va sterge cererea din localStorage. Va exista si un al treilea buton "sterge toate cererile vechi" care va apela functia clear a lui localStorage.
    28. Langa cele 3 butoane va exista siun al 4-lea 'afiseaza cereri vechi' care cu window.open va deschide o fereastra noua continand numele tuturor cererilor vechi, cu informatiile memorate in localStorage. La resize fereastra o sa isi schimbe culoarea de background.
    29. Aceasta pagina va mai avea o functionalitate. Va contine un textarea in care utilizatorul poate trece un sir. Langa textarea va fi si un buton, care, la click, folosind metoda statica a clasei Reteta, identificaIngrediente() va crea un paragraf cu id-ul "p_ingrediente" cu ingredientele reconuscute afisate in bold. Daca paragraful exista deja (se va verifica cu un getElementById), doar i se va schimba continutul. Va fi si un div pe care va scrie "afiseaza doar ingrediente" si daca se face mousedown, vor ramane numai ingredientele in paragraf (se va itera prin childNodes si toate textNode-urile vor avea setat nodeValue la sir vid), cand se face mouseup inapoi, paragraful revine la forma anterioara. Cat timp nu s-a scris nimic in textarea, butonul e disabled. Cand s-a tastat prima litera in textarea, butonul devine enabled.
    30. Cand sunt afisate ingredientele deja marcate, daca se apasa tasta "s" in cazul in care tagul lor era bold va deveni italic, altfel, daca era italic va deveni bold. Verificarea tipului tagului se face cu proprietatea nodeType, iar inlocuirea cu metoda replaceChild.Pentru a selecta elementele de schimbat, se va folosi getElementsByTagName
    31. Pe o alta pagina va exista un formular de contact cu un buton de submit si unul de reset. La submit, se va verifica daca toate inputurile au fost completate si numai atunci se va da submit. La reset se va verifica daca formularul e gol si daca da se va da un alert cu textul "E deja gol, ce mai vrei?"
    32. Formularul va transmite datele prin get catre o pagina afiseaza_preview.html, care va prelua datele din location-ul documentului (vor aparea dupa ? in bara de adrese). Aceasta va afisa doar un previe al mesajului, cu cate un paragraf pentru fiecare valoare trimisa.
  3. Popa Remus Adrian

    Modul de notare:

    1. (Ideea generala). Se va crea un joc cu masini. Jocul va fi de tip racing avand o masina pe o sosea desenata. Va exista un div cu id-ul div_joc. Soseaua e orientata pe directia sus-jos. Masina (o imagine cu o masina vazuta de sus) e afisata in centru lipita de latura de jos a divului de joc. Deplasarea masinii se va simula deplasand de fapt "soseaua". Masina ramane la distanta fixa fata de marginea de jos a divului de joc. Deplasarea soselei se va face printr-un setInterval care va schimba pozitia backgroundului.
    2. Se va folosi un fisier extern pentru codul javascript
    3. Va exista un obiect masina creat cu new Object(). Va avea o proprietate nr_vieti, o proprietate nume, o proprietate scor, o proprietate imagine (continand elementul DOM cu imaginea masinii) si metoda schimbaNume(numeNou) care va schimba numele jucatorului, testand ca este un sir valid( prima litera mare si restul caracterelor alfanumerice). Jucatorul incepe cu un anume numar fix de vieti (de exemplu, 4).
    4. Va exista un constructor pentru obiectele de tip Obstacol.
    5. Obiectul obstacolva avea proprietatile publice imagine, culoare, latime si inaltime. O proprietate privata tip care poate avea valorile fix sau mobil. Pentru aceasta proprietate se vor scrie functiile getter si setter. Functia setter va verifica daca valoarea data pentru setare este intr-adevar unul dintre sirurile "fix" sau "mobil".
    6. In constructorul Obstacol se va defini o proprietate statica de tip vector, numita vectObstacole, in care se adauga toate obstacolele care au fost create
    7. Se va defini si o metoda privata verifImag(cale) care va verifica daca gaseste imaginea de la calea primita ca parametru si daca nu, ii va pune obiectului proprietatea culoare setata la o culoare random. Aceasta functie va fi apelata la construirea obiectului.
    8. Clasa Obstacol va avea o metoda afiseazaSursa() care afiseaza propietatea imagine a unui obstacol, daca e definita, iar daca nu, culoarea.
    9. Se va defini o proprietate statica a clasei prin prototype in care se va memora cate obstacole sunt in prezent pe ecran (se va schimba pe masura ce se genereaza/elimina obstacole.
    10. Se va defini o metoda statica a clasei prin prototype care va afisa un alert cu cate obstacole sunt in prezent pe ecran.
    11. Se va defini o clasa obstacolBun derivata din clasa obstacol Obstacolele bune vor fi desenate cu un border albastru deschis pentru a fi deosebite fata de cele "rele".
    12. Datele pentru obstacole se vor prelua dintr-un xml. Preluarea datelor se va face la load-ul paginii. Acesta poate avea o forma precum cea din exemplul de mai jos: <?xml version="1.0" encoding="UTF-8"?>
      <obstacole>
          <obstacol tip="1">
              <inaltime>10</inaltime>
              <latime>10</latime>
              <imagine>bolovan.png</imagine>
          </obstacol>
          <obstacol tip="2">
              <inaltime>15</inaltime>
              <latime>5</latime>
              <culoare>bolovan.png</culoare>
          </obstacol>    
          <!-- si asa mai departe - completezi tu -->
      </obstacole>
    13. Pe pagina jocului va exista un panou pentru setari, realizat printr-un div (atentie, nu un form) cu mai multe elemente de tip input si select. Jocul va porni abia dupa ce sunt facute setarile si apasat butonul de ok:
      • Un input de tip range prin care se seteaza viteza masinii
      • Un input de tip text in care se cere numele utilizatorului
      • Un input de tip checkbox prin care se seteaza daca sa se genereze si "obstacole"-vieti, sau doar obstacole obisnuite (facand jocul mai greu)
      • Un set de inputuri de tip radio prin care se seteaza tipul de sosea(vor fi 3 backgrounduri posibile pentru sosea)
      • Cu ajutorul unui select simplu, utilizatorul va alege tipul de masina. In momentul in care se schimba selectia (onchange) sub select, va aparea si poza cu masina respectiva.
      • Cu ajutorul unui select multiplu utilizatorul va alege dintr-o lista de obstacole posibile, tipurile celor care vor fi generate (lista de obstacole posibile e cea preluata din xml.
      • Un textarea in care utilizatorul va scrie un motto.
      • Va exista si un buton care, la click va crea ecranul de joc, si va porni jocul. Butonul e initial disabled pana completeaza utilizatorul numele in textbox. Momentul generarii obstacolelor se lasa la alegere. Ca exemplu, ar putea fi generate la fiecare 200-300 de pixeli "parcursi" de masina. Obiectele DOM corespunzatoare obstacolelor pot fi ori imagini daca proprietatea imagine e setata, ori un canvas sau obiect svg(creat cu tagul/elementul svg) in care s-a desenat un dreptunghi de culoarea data in proprietatea culoare. La generare obiectelor DOM corespunzatoare obstacolelor li se va da o proprietate dataObj care sa contina o referinta catre obiectul Obstacol. Si imaginea masinii va avea o astfel de referinta catre obiectul masina. Daca in selectul multiplu au fost selectate de exemplu 3 obstacole se vor genera pe rand obstacol de tip 1 de tip 2, de tip 3 si apoi iar de tip 1 etc. Obstacolele au o probabilitate de 1/4 sa fie mobile si 3/4 fixe (se va realiza folosind Math.random). Obstacolele fixe vor avea o pozitie random in div, iar cele mobile se vor genera la 0,0, al divului de joc si se vor deplasa pe orizontala (stanga-dreapta). Obstacolele fixe si cele care se deplaseaza stanga dreapta au pozitia relativa fata de sosea. Cu alte cuvinte, ele se misca odata cu soseaua pe verticala, ca sa dea impresia ca masina se deplaseaza. La fiecre zece obstacole rele se va genera un obstacol bun (care da vieti). Toate imginile-obstacol vor avea clasa (e vorba de clasa css de data asta) "obstacol". Cele bune vor avea in plus clasa "bun". De asemenea obstacolele fixe vor avea clasa "fix", iar cele mobile clasa "mobil". Adaugarea tuturor acestor clase se va face prin proprietatea classList.
    14. Masina se poate deplasa doar stanga-dreapta, cand se face keypress pe tastele-sageti.Sub divul de joc va fi un paragraf cu id-ul "info". In el, cand se face keydown se afiseaza daca masina merge la stanga sau la dreapta. Selectarea paragrafului se va face prin getElementById Atentie, daca se tine apasata o tasta se vor tot declansa evenimente keydown, asadar la primul keydown pe sageata stanga de exemplu se va seta true o variabila booleana. Si astfel, se va afisa mesajul "masina merge la stanga" doar la primul keydown din serie. Variabila booleana se va reseta la false cand se face keyup. Informatiile de genul "masina merge la stanga/dreapta" se vor adauga prin creare de textNodes si adaugarea lor in paragraf.
    15. Cand masina atinge un obstacol, se va intorduce in paragraful info un element de tip important(strong) cu mesajul "A fost atins un obstacol, mai sunt nr vieti". Cand se face mousedown pe paragraful "info" sunt afisate doar elementele de tip strong (cele de tip textNode sunt sterse iterand prin childNode-urile paragrafului "info" si stergand elementele care sunt textNode (vezi nodeType) dar salvand valorile lor(nodeValue) intr-un vector de siruri. La mouseup, apar inapoi textNode-urile, fiind inserate acolu unde trebuie cu ajutorul lui insertBefore.
    16. La fiecare pas in miscare soseselei se va verifica daca nu s-au ciocnit doua obstacole (se poate intampla: un obstacol care se deplaseaza stanga-dreapta e generat dupa un obstacol foarte inalt. Daca nu s-a "terminat" obstacolul inalt, se vor ciocni). Daca doua obstacole se ciocnesc, acestea sunt inlocuite (replaceChild) fecare de cate un div cu textul "Poc!" si avand clasa "poc" setata cu className. Pentru clasa "poc" va fi definit in CSS position:absolute si color pink.
    17. Cand se vine cu cursorul pe un element din clasa poc, toate devin invizibile. Cand se ia cursorul de pe ele, devin vizibile la loc. Readucerea lor la starea vizibila insa nu se va face imediat, ci dupa 2 secunde (setTimeout). Daca in acel interval de 2 secunde se vine iar cu cursorul pe un element de tip "poc", se face clear la vechiul timeout si se porneste unul nou de 2 secunde. Selectarea tuturor elementelor din clasa "poc" se face cu getElementsByClassName
    18. Cand se vine cu cursorul pe divul zonei de joc, se creeaza un div mic care urmareste cursorul (va fi cu 2 px mai jos si in stanga fata de cursor) si in care sunt afisate coordonatele cursorului in zona de joc (se considera originea ca find coltul din stanga sus al divului de joc). Cand se iese cu cursorul din zona de joc divul dispare. Se va realiza prin mouseenter si mouseleave, pentru a nu se activa si cand se intra sau se iese cu cursorul pe elementele din clasa "poc"
    19. La click in divul de joc se va crea un nou obstacol chiar in locul clickului
    20. La click pe masina se va da un prompt in care utilizatorul poate sa introduca o noua imagine pentru masina. Atentie, desi masina e in interiorul divului jocului, nu trebuie sa se creeze si obstacol atunci.
    21. cand un obstacol iese din zona vizibila a jocului(a ajuns jos) el este sters (eliminat si din arborele DOM ) ca sa nu ocupe memorie degeaba
    22. La fiecare deplasare a masinii se va testa coliziunea acesteia cu obstacolele. Daca masina se ciocneste de un obstacol rau, pierde o viata, daca se ciocneste de un obstacol bun, castiga o viata. Pentru a face testul si a actuliza la fiecare pas obstacolele care sunt pe ecran se va folosi querySelectorAll pentru selectia lor.
    23. La click pe obstacol se va apela metoda afiseazaSursa() a obiectului asocoiat de tip obstacol. Clickul pe obstacol se va adauga cu addEventListener in modul capturing. La apasarea ctrl+"m", se va apela functia afiseazaSursa() pentru obiectul de tip masina prin scrierea Obstacol.prototype.afiseazaSursa.
    24. In cadrul jocului, o singura data se poate face drag&drop pe un obstacol. Dropul se va face chiar pe paragraful info, si in paragaraf va fi adaugat un mesaj (de exemplu 'am eliminat un obstacol') Adaugarea triggerului pentru eveniment se va face in mod dinamic prin proprietatea ondrag.
    25. Jocul se termina cand nu mai sunt vieti. La finalul jocului se va da un alert cu durata de joc. Durata de joc se va calcula cu ajutorul lui Date. Se vor sterge toate elementele din divul joc,ramand doar background-ul cu soseaua. Stergerea se va face iterand prin children si numarand in acelasi timp cate obstacole de tip imagine si cate de tip canvas/svg erau pe pagina (tipul lor va fi identificat prin proprietatea tagName). De asemenea se va opri si miscarea soseselei (clearInterval). Rezultatul numararii se va scrie in paragraful info. Tot acolo se vora afisa si cate mesaje importante (de tip strong) au fost scrise in interiorul paragrafului. Selectarea mesajelor se va face prin getElementsByTagName
    26. Sub divul cu jocul va exista si un buton cu textul "instructiuni", care la click va deschide o fereastra noua (window.open) cu instructiunile.
    27. Pe o alta pagina va exista un formular de feedback cu un input de tip text, un textarea, un buton de submit si unul de reset. La submit, se va verifica daca textboxul fost completat si textul din textarea depaseste 10 caractere, si daca da, se va da submit (altfel, nu).
    28. La focus pe textarea acesta va capata un border punctat, albastru. La blur borderul va disparea.
    29. Cand se apasa pe butonul de reset, utilizatorul va fi intrebat printr-un alert de tip confirm daca vrea sa reseteze formularul
    30. Formularul va transmite datele prin get catre o pagina afiseaza_feedback.html, care va prelua datele din location-ul documentului (vor aparea dupa ? in bara de adrese). Aceasta va afisa un preview al mesajului, cu cate un paragraf pentru fiecare valoare trimisa.
    31. Tot in pagina afiseaza_feedback.html se va face si salvarea in localStorage a mesajului. Sub preview vor fi afisate mesajele anterioare din localStorage cu cate un hr intre ele. La dubluclick pe o astfel de inregistrare, aceasta se sterge si din pagina si din localStorage
    32. Pentru fereastra mica nu se va permite sa se faca decat resize la dimensiuni divizibile cu 10, astfel, daca innerWidthul sau innerHeight-ul ferestrei mici dupa resize nu sunt divizibile cu 10 fereastra se va redimensiona la cel mai mare numar divizibil cu 10 mai mic decat dimensiunile curente
    33. Sub toate inregistrarile e un buton "sterge tot" care va goli tot localStorage-ul
  4. Pavel Mihai Cosmin

    Modul de notare:

    1. (Ideea generala). Se va crea un joc cu o nava spatiala. Nava spatiala trebuie sa evite diverse obstacole: meteoriti, planete, gauri negre. Scopul e sa atinga cat mai multe stele, pentru care va lua puncte.
    2. Se va folosi un fisier extern pentru codul javascript
    3. Va exista un obiect nava creat cu new Object(). Va avea o proprietate nr_vieti, o proprietate nume, o proprietate puncte, o proprietate imagine (continand elementul DOM cu imaginea navei spatiale) si metoda schimbaScor(numeNou) care va schimba scorul cu un numar nou, testand ca este un numar natural.
    4. Va exista un constructor pentru obiectele de tip Obstacol.
    5. Obiectul obstacolva avea proprietatile publice nume si imagine si proprietatea privata tip(meteorit,cometa, stea etc). Pentru aceasta proprietate se vor scrie functiile getter si setter. Functia setter va verifica daca valoarea data pentru setare este intr-adevar unul dintre sirurile admise (meteorit etc.).
    6. In constructorul Obstacol se va defini o proprietate statica folder_imagini de tip String in care va sti care e folderul in care se gasesc imaginile pentru obstacole
    7. Se va defini si o metoda privata genereaza Nume() care va genera un si cu primele 2 caractere litere mari si ultimele 3 cifre. Aceasta functie va fi apelata la construirea obiectului.
    8. Clasa Obstacol va avea o metoda afiseazaNume() care afiseaza printr-un alert numele Obstacolului.
    9. Se va defini o proprietate statica a clasei prin prototype in care se va memora cate obstacole au fost generate.
    10. Se va defini o metoda statica a clasei prin prototype care va returna un vector cu tipurile posibile de obstacol.
    11. Se va defini o clasa Stea derivata din clasa obstacolClasa stea va avea in plus si proprietatea nr_puncte(cate puncte va primi utilizatorul daca atinge o stea).
    12. Datele pentru obstacole se vor prelua dintr-un xml. Preluarea datelor se va face la load-ul paginii. Acesta poate avea o forma precum cea din exemplul de mai jos: <?xml version="1.0" encoding="UTF-8"?>
      <obstacole>
          <folder>imagini/obstacole/</folder>
          <obstacol tip="asteroid" mobil="false">
              <imagine>asteroid.png<imagine>
          </obstacol>
          <obstacol tip="cometa" mobil="true">
              <imagine>cometa1.png<imagine>
          </obstacol>    
          <!-- si asa mai departe - completezi tu -->
      </obstacole>
    13. Pe pagina jocului va exista un panou pentru setari, realizat printr-un div (atentie, nu un form) cu mai multe elemente de tip input si select. Jocul va porni abia dupa ce sunt facute setarile si apasat butonul de ok:
      • Un input de tip range prin care se seteaza viteza navetei
      • Un input de tip text in care se cere numele utilizatorului
      • Un input de tip checkbox prin care se seteaza daca sa existe si obstacole mobile sau doar fixe
      • Un set de inputuri de tip radio prin care se seteaza culoarea de background(vor fi 3 backgrounduri posibile: de exemplu:negru, gri inchis, albastru inchis). La bifarea unui radiobutton, cu ajutorul unui element canvas sau svg se va infatisa culoarea selctata(prin desenarea unui dreptunghi)
      • Cu ajutorul unui select simplu, utilizatorul va alege tipul de stele (mici, medii, mari). In momentul in care se schimba selectia (onchange) sub select, va aparea si poza cu steluta respectiva.
      • Cu ajutorul unui select multiplu utilizatorul va alege dintr-o lista de obstacole posibile, tipurile celor care vor fi generate (lista de obstacole posibile e cea preluata din xml.
      • Un textarea in care utilizatorul va scrie un mesaj.
      • Va exista si un buton care, la click va crea ecranul de joc, si va porni jocul. Butonul e initial disabled pana completeaza utilizatorul numele in textbox si mesajul in textarea. Nava o sa apara centarata fata de ecranul de joc. Si in jurul ei obstacolele, pe pozitii aleatoare in pagina. La generare obiectelor DOM corespunzatoare obstacolelor li se va da o proprietate dataObj care sa contina o referinta catre obiectul Obstacol. Si imaginea navei va avea o astfel de referinta catre obiectul nava. Printre obstacole se vor genera si stelute, pentru ca utilizator sa dobandeasca puncte. Unele obstacole se vor deplasa pe ecran, altele vor fi fixe. Obstacolele fixe si cele care se deplaseaza au pozitia relativa fata de "univers" (ecranul de joc). Cu alte cuvinte, ele se misca odata cu "universul" pe verticala/orizontala, ca sa dea impresia ca nava se deplaseaza. La fiecare coliziune cu un obstacol, nava va primi un damage si la fiecare coliziune cu o stea va primi puncte. Toate imaginile (elementele DOM) vor avea clasa css (nu ma refer la clasa custom) "obstacol". Stelele vor avea in plus clasa stea. Imaginile pentru obstacolele mobile, vor avea si clasa "mobil". Adaugarea tuturor acestor clase se va face prin proprietatea classList.Cand se genereaza ecranul de joc, ecranul de setari este ascuns (cu display:none sau sters)
    14. Ecranul de joc va avea latimea egala cu cea a ferestrei si inaltimea egala cu cea a ferestrei.
    15. Nava se poate deplasa sus-jos, stanga-dreapta, cand se face keypress pe tastele-sageti. (deplasarea fiind facuta de fapt de ecranul de joc si nu de nava). Cand se pasa tasta in sus, ca se se deplaseze nava, la keydown va aparea un div in coltul din dreapta jos al ecranului de joc, cu textul "sus". Divul se va face invizibil cand luam degetul de pe tasta. La fel se va intampla si pentru sageata in jos, in dreapta si in stanga. Textul din div se va seta cu proprietatea innerHTML.
    16. In momentul in care nava atinge un obstacol sau o stea, obstacolul sau steaua vor disparea (stearse prin removeChild)
    17. La fiecare 2 minute jucate utilizatorul poate sa distruga toate obstacolele de pe ecran, transformandu-le in stele speciale (toate imaginile vor fi inlocuite (replaceChild) cu cate un div continand un asterisc(*)). In momentul in care poate sa faca acest lucru va fi afisat un buton cu textul "Bum!". Cu un setInterval se va afisa la fiecare 2 minute acel buton. Daca utilizatorul face mousedown pe buton dispar toate obstacolele(selectate prin getElementsByClassName) din zona vizibila pana cand face mouseup si obstacolele reapar. Dupa 15 secunde butonul dispare (realizat prin setTimeout)
    18. Cand se termina jocul trebuie oprit si intervalul si timeout-ul
    19. La terminarea jocului se va deschide (window.open) o fereastra noua, mica 300*300 cu scorul obtinut
    20. La apasarea tastei i se va afisa in consola (console.log) cate elemente DOM fara continut(innerHTML nedefinit) exista in pagina, dintre care cate sunt imagini. Selectarea elementelor se va face cu querySelectorAll (cu slectorul general *). Vor fi parcurse elementele si se va testa innerHTML-ul, iar pentru a testa ca sunt imagini se va folosi proprietatea tagName. Va exista minim un element fara continut in cadrul paginii care sa nu fie imagine - de exemplu, un tag <br/>
    21. Cand utilizatorul apasa ctrl+s, se salveaza starea jocului in localStorage. Practic se va salva numele utilizatorului, scorul, damage-ul navei si data+ora la care s-a facut salvarea. Daca mai exista deja o inregistrare pe numele utilizatorului, aceea e inlocuita, altfel e creata una noua
    22. In panoul de dinainte de incepere a jocului, se va adauga si urmatoarea functionalitate: vor fi afisate si 3 butoane cu textele "foloseste scor vechi" (care va fi preluat din localStorage, daca numele din inputul text se afla deja in localStorage), respectiv "sterge scor vechi"(va fi sters scorul pentru numele din inputul text), respectiv "sterge toate scorurile" (care va sterge tot din localStorage)
    23. Sub divul de joc, va exista un paragraf cu id-ul 'puncte' in care, pe masura ce utilizatorul atinge stele se va crea cate un textNode (pentru fiecare stea atinsa) continand cate puncte a obtinut utilizatorul din steaua respectiva. Tot in paragraf de fiecare data cand e atins un obstacol o sa se adauge un element de tip bold cu textul "Buf!" TextNode-urile vor fi adaugate mereu la inceputul paragrafului ca sa fie usor vazute de utilizator (insertBefore). Cand se adauga elementele in paragraf, acesta va fi selectat prin getElementById. La shift+click pe acest paragraf vor fi stersi toti fiii-element. Acestia vor fi parcursi cu ajutorul proprietatii children.
    24. La dublu-click pe pe paragraful cu id-ul puncte, se vor parcureche childNode-urile sale si se vor elimina toate textNode-urile (se va testa ca un element e textNode prin proprietatea nodeType) adunand din interiorul lor(nodeValue) punctele obtinute.
    25. Cand se vine cu cursorul pe o stea, in dreptul cursorului, apare un div cu cate puncte ar da steaua respectiva. Cand se ia cursorul de pe stea, divul dispare
    26. Cand se vine cu cursorul pe divul zonei de joc, backgroundul isi schimba un pic culoarea, de exemplu din negru devine gri. Cand se iese cu cursorul din zona de joc se revine la backgroundul initial. Se va realiza prin mouseenter si mouseleave, pentru a nu se activa si cand se intra sau se iese cu cursorul pe elementele - stele care sunt fii ai divului.
    27. La click in divul de joc se va crea un nou obstacol chiar in locul clickului
    28. La click pe o stea se va deschide un prompt care va permite sa schimbam numarul de puncte oferite de stea. Triggerul se va adauga dinamic prin proprietatea onclick. Nu trebuie sa se creeze stea atunci cand facem click pe stea (fiindca de fapt facem click si pe div : stopPropagation).
    29. La click pe racheta se va apela metoda schimbaNume (din clasa obstacol) pentru obiectul nava asociat imaginii DOM. Apelul se va face cu ajutorul lui prototype din clasa obstacol (obstacol.prototype.schimbaNume). Adaugarea evenimentului de click pe racheta se va face cu addEventListener in modul capturing, nu bubbling.
    30. Daca trece 1 minut (sau mai mult timp, daca e deranjant) si cursorul nu a fost miscat in pagina, se va da un alert cu mesajul "Hei pe unde esti? Te-au rapit extraterestrii?!"
    31. Asupra oricarui obstacol se poate face drag&drop tragandu-l afara din divul de joc, moment in care dispare, insa asta va costa puncte dintre cele acumulate de racheta
    32. Undeva in pagina va exista si un formular in care utilizatorul poate lasa un mesaj. Formularul va cuprinde un input de tip text pentru nume, un input de tip text pentru subiectul mesajului si un textarea pentru mesajul in sine. Formularul va avea un input de tip submit si unul de tip reset. La submit se va verifica faptul ca atat numele cat si subiectul mesajului sunt completate. Daca nu sunt completate, nu se va reliza submitul si se va da un alert care va informa utilizatorul. La resetul formularului se va verifica daca in textarea a fost scris un mesaj de peste 10 caractere si, daca da, utilizatorul va fi intrebat printr-un confirm daca vrea intr-adevar sa reseteze formularul si daca raspunde da, atunci formularul va fi resetat.
    33. La focus pe textarea, in dreptul sau o sa apara cate caractere contine, iar la blur, acea informatie dispare
    34. Datele din formular vor fi trimise prin get catre o pagina afiseaza_date.html, care va prelua datele din location-ul documentului (vor aparea dupa ? in bara de adrese). Datele vor fi afisate in aceasta pagina sub forma unur paragrafe (cate un paragraf pentru nume, subiect si mesaj). Paragrafelor pentru nume si subiect li se va aloca o clasa, prin proprietatea className, numita "litere_aldine" care in css va avea asociata proprietatea font-weight:bold. La sfarsitul acestei pagini, va fi afisata si data curenta.
    35. La resize-ul acestei ferestre, textul paragrafelor va deveni rosu. Selectarea paragrafelor se va face prin getElementsByTagName.
  5. Lascu Ionut Alexandru

    Modul de notare:

    1. (Ideea generala). Se va crea un joc cu un pantof care se plimba pe o harta. Pe harta sunt diverse casute pe care e scris cate un semn de intrebare. Cand pantoful atinge o astfel de casuta, aceasta isi afaiseaza continutul, care poate fi pantof sau gandac. Scopul jocului e sa fie gasite cat mai multe perechi de pantofi. Jucatorul poate pierde vieti din cauza gandacilor, astfel, pentru fiecare gandac activ pe ecran, la fiecare 3 secunde jucatorul pierde o viata.
    2. Se va folosi un fisier extern pentru codul javascript
    3. Va exista un obiect jucator creat cu new Object(). Va avea o proprietate nr_vieti, o proprietate username, o proprietate scor, o proprietate imagine (continand elementul DOM cu imaginea pantofului-personaj - se va cauta un pantof cu ochi,nasuc, gura, ca sa difere fata de pantofii adunati pe post de scor) si metoda testeazaViata() care verifica faptul ca jucatorul mai e in viata (nr_vieti>0)
    4. Va exista un constructor pentru obiectele de tip Pantof.
    5. Obiectul pantofva avea proprietatile publice imagine si nr_pantofi_gasiti si proprietatea privata tip (tip1, tip2 etc - tipurile sunt preluate din XML). Pentru aceasta proprietate privata se vor scrie functiile getter si setter. Functia setter va verifica daca valoarea data pentru setare este intr-adevar un string.
    6. In constructorul Pantof se va defini o proprietate statica vector_tip care va contine un vector cu tipurile pantofilor au fost creati prin constructor (["tip1","tip2" ...]
    7. Se va defini si o metoda privata testeazaTip(tip) care va testa daca tipul de pantof nu exista deja. Aceasta functie va fi apelata la construirea obiectului. Constructorul va arunca o eroare daca se incearca crearea unui pantof de acelasi tip (obiectele din clasa Pantof or fi niste tipur generale de pantofi; nu va fi o relatie 1:1 cu imaginile de pantofi din joc).
    8. Clasa Pantof va avea o metoda seteazaProprietate(proprietate, valoare) care va seta in obiectul pantof proprietatea cu acea valoare.
    9. Se va defini o proprietate statica a clasei prin prototype in care se va memora vectorul pantofilor creati (va fi un vector cu obiecte de tip pantof).
    10. Se va defini o metoda statica a clasei prin prototype getPantof(tip) care va returna un obiect de tip pantof din vectorul de mai sus, care are tipul cerut in parametru. Daca un astfel de pantof nu exista, functia va returna null.
    11. Se va defini o clasa PantofUmblaret derivata din clasa pantof care va avea in plus poprietatea viteza. (se va explica mai jos ce e cu pantofii umblareti)
    12. Datele pentru pantofi se vor prelua dintr-un xml. Preluarea datelor se va face la load-ul paginii. Acesta poate avea o forma precum cea din exemplul de mai jos: <?xml version="1.0" encoding="UTF-8"?>
      <pantofi>
          <pantof>
              <tip>pantof_maro</tip>
              <imagine>pantof_m.png</imagine>
          </pantof>
          <pantof umblaret="true">
              <tip>pantof_sport</tip>
              <imagine>pantof_sport.png</imagine>
          </pantof>    
          <!-- si asa mai departe - completezi tu -->
      </pantofi>
    13. Pe pagina jocului va exista un panou pentru setari, realizat printr-un div (atentie, nu un form) cu mai multe elemente de tip input si select. Jocul va porni abia dupa ce sunt facute setarile si apasat butonul de ok:
      • Un input de tip range prin care se seteaza numarul initial de cutii cu continut necunoscut
      • Un input de tip text in care se cere numele utilizatorului
      • Un input de tip checkbox prin care se seteaza daca sa existe si pantofi umblareti sau nu
      • Un set de inputuri de tip radio prin care se seteaza simbolul pe cutii: ? (care e initial checked), ! sau *. culoarea de background(vor fi 3 backgrounduri posibile: de exemplu:negru, gri inchis, albastru inchis).
      • Cu ajutorul unui select simplu, utilizatorul va alege culoarea de background a cutiilor. (de exemplu: rosii, verzi, albastre etc.). In momentul in care se schimba selectia (onchange) sub select, cu ajutorul unui element canvas sau svg se va infatisa culoarea selectata (prin desenarea unui dreptunghi).
      • Cu ajutorul unui select multiplu utilizatorul va alege din lista cu tipurile posibile de pantofi, tipurile celor care vor fi generati (lista de tipuri posibile e cea preluata din xml).
      • Un textarea in care utilizatorul va scrie un mesaj cu ce sa spuna gandacul atunci cand e exterminat (va fi explicat mai jos).
      • Va exista si un buton care, la click va crea ecranul de joc, si va porni jocul. Butonul e initial disabled pana cand utilizatorul schimba valoarea macar a unui input din div. Se vor genera in divul de joc, pe pozitii aleatoare, boxurile (reprezentate prin niste divuri) cu continut necunoscut. Simbolul adaugat in boxuri se va seta prin proprietatea innerHTML. La generare obiectelor DOM corespunzatoare boxurilor(cutiilor) li se va da o proprietate dataObj care sa contina o referinta catre obiectul Pantof sau PantofUmblaret asociat. Tipul de pantof va fi generat aleator. Si imaginea pantofului-jucator va avea o astfel de referinta catre obiectul jucator. Unele dintre cutii vor contine gandaci si nu vor avea nimic setat in dataObj. Toate imaginile (elementele DOM) vor avea clasa css (nu ma refer la clasa custom) "cutie". Cutiile cu pantofi vor avea in plus clasa pantof, iar cele cu gandaci, clasa "gandac". Cutiile cu pantofi umblareti vor avea in plus si clasa "umblaret". Adaugarea tuturor acestor clase se va face prin proprietatea classList.Cand se genereaza ecranul de joc, ecranul de setari este ascuns (cu display:none sau sters). Din momentulinceperii jocului la fiecare 20 secunde se va genera un box nou in div, intr-o pozitie random si cu continut random (pantof, pantof umblaret, gandac)
    14. Divul de joc va avea latimea egala cu 3/4 din cea a ferestrei si inaltimea egala cu 3/4 din cea a ferestrei (innerWidth, innerHeight).
    15. Pantoful-jucator se poate deplasa sus-jos, stanga-dreapta, cand se face keypress pe tastele-sageti. Jucatorul nu va putea depasi marginile divului. Cand se apasa o tasta de deplasare (keydown) va aparea un border in jurul pantofului-jucator, border care va disparea cand se ia degetul de pe tasta (evenimentul keyup).
    16. In momentul in care jucatorul atinge o cutie aceasta isi arata continutul: divul va fi inlocuit cu imaginea corespunzatoare(gandac sau pantof), folosind replaceChild.
    17. Sub divul de joc va exista cate un div pentru fiecare tip de pantof. In div va exista o imagine si un numar reprezentand cati pantofi de acel fel au fost gasiti. Divurile acestea vor fi create tot dinamic la inceputul jocului. Initial in dreptul fiecarei imagini va fi numarul 0, adaugat prin crearea unui texttNode. Divurile vor avea toate clasa css "pantof_gasit" (setata prin className) care va avea in style definite nsite proprietati (de exemplu width, height, border).
    18. Cu drag&drop se va lua cate un pantof gasit pe ecran si se va duce in divul corespunzator lui. In acel moment daca a fost adus pe un div care trebuie, se va incrementa numarul din dreptul imaginii cu pantofii (acest numar va fi identificat, modificand ultimul childNode al divului si schimband nodeValue-ul acestuia (adunand 1 la valoarea anterioara). Daca s-a facut drop pe un div gresit se va da un alert cu acest lucru. Imaginea dispare in momentul in care se face drop (removeChild). Triggerele pentru evenimentele de drag si drop vor fi adaugate dinamic prin proprietatile ondrag si ondrop ale obiectelor DOM.
    19. La click pe divul de joc se va crea un gandac in locul in care s-a facut clickul.
    20. Cand este descoperit un pantof umblaret, acesta in loc sa ramana in locul unde a fost descoperit, precum ceilalti pantofi va porni o deplasare spre coltul din stanga sus al dicului de joc, si va iesi din div daca nu este prins. Pentru a fi prins trebuie sa se faca o data click pe el. Ca sa nu se creeze un gandac, atunci, trebuie oprita propagarea evenimentului spre divul parinte.
    21. In cazul gandacilor care pot fi gasiti in cutii sau obtinuti prin click pe div, pentru fiecare gandac de pe ecran, la fiecare 3 secunde jucatorul pierde o viata. Acest lucru se va realiza prin setTimeout. Daca utilizatorul misca deasupra gandacului cursorul de 1000 de ori(mousemove) acesta o sa dispara (pierzand cate 0.001 din opacitate la fiecare mousemove). Cand ajunge la opacitate 0 este si eliminat si prin clearInterval e oprita pierderea vietii la cele 3 secunde. Cand se iese cu cursorul de pe un gandac se reseteaza opacitatea la 1 daca nu a ajuns deja la 0.
    22. Cand se vine cu cursorul pe un gandac, in dreptul cursorului apare un div care se plimba dupa cursor(va fi cu 3px in jos si in stanga fata de pozitia cursorului) in care va fi scris "Tuleste gandacu'!". Divul dipare la 2 secunde dupa ce a aparut(setTimeout). Daca se iese cu cursorul de pe gandac divul dispare imediat si se da clearTimeout pentru a n se incerca stergerea lui cand deja a disparut.
    23. Gandacul poate fi omorat si daca se face mousedown pe el si in acelasi timp se apasa si tasta "k". La fiecare keypress opacitatea va scadea cu 0.1. Daca se face mouseup inainte de a ajunge opacitatea la 0 (ca sa moara gandacul), opacitatea revine la 1.
    24. Sub divul de joc va mai fi si un paragraf cu id-ul "info_gandaci". Se va folosi getElementById pentru a-l identifica. De fiecare data cand un gandac moare, in acel paragraf apare textul setat de utilizator in textarea inainte de joc +imaginea unui gandac. Textul va fi adaugat prin textNodes. La dubluclick pe acest paragraf raman doar gandacii (sunt sterse toate textNode-urile iterand prin childNodes si observand prin nodeType care sunt elementele de tip textNode). La dubluclick din nou, textNode-urile reapar (vor fi introduse cu insertBefore). La ctrl+dubluclick toate imaginile dispar (vor fi selectate cu getElementsByTagName si li se va seta proprietatea css display la valoarea none)
    25. La click pe imaginea pantofului va aparea un prompt cu mesajul "parola?". Si daca utilizatorul trece un anume cod testat in script (de exemplu cuvantul "pantof") se va schimba imaginea pantofului jucator. Schimbarea imaginii se va face si in obiectul jucator folosind insa metoda schimbaProprietate a obiectului pantof. Pentru a o putea apela se va folosi forma cu prototype pantof.prototype.schimbaProprietate.call(). Adaugarea evenimentului de click pe imaginea jucatorului se va face cu addEventListener in modul capturing, nu bubbling
    26. Cand se vine cu cursorul pe divul de joc, toate boxurile cu pantofi umblareti vor fi selectate prin intermediul getElementsByClassName. Se va realiza prin mouseenter si mouseleave, pentru a nu se activa si cand se intra sau se iese cu cursorul pe imaginile gandaceilor, deoarece elementele imagini sunt elemente-fii ale divului joc.
    27. Undeva in pagina va exista si un formular in care utilizatorul poate lasa o comanda. Formularul va cuprinde un input de tip text pentru nume, un input de tip range pentru dimensiunea pantofilor si un textarea pentru specificatii suplimentare. Formularul va avea un input de tip submit si unul de tip reset. La submit se va verifica faptul ca numele este valid (contine doar litere). Daca nu e valid, utilizatorul va fi intrebat printr-un confirm daca intr-adevar vrea sa trimita dataele asa si numai daca raspunde ok se va reliza submitul. La resetul formularului se va schimba si culoarea de background a formularului din culoarea initiala in lightblue, de exemplu.
    28. Cand se face focus pe inputul de tip textarea culoarea literelor se schimba in rosu iar la blur redevin negre
    29. Datele din formular se vor trimite cu get. La submit, datele vor fi trimise spre o alta pagina html, numita comenzi_introduse.html, care va prelua datele din location-ul documentului (vor aparea dupa ? in bara de adrese) si le va afisa pe ecran. Acea pagina va realiza si salvarea datelor in localStorage. Practic pentru fiecare comanda, in locl storage se va salva numele utilizatorului, numarul pentru pantofi, data comenzii(obtinuta cu ajutorul clasei Date) si mesajul din textarea.
    30. Pagina comenzi_introduse.html va avea si un buton "afiseaza comenzi" care va deschide o fereastra noua de dimensiuni 300*500 in care vor fi afisate toate comenzile salvate in localStorage, cu ajutorul unui tabel generat dinamic avand un header cu numele coloanelor si in tbody datele efective. La click pe un rand, acel rand dispare din tabel si este si sters din localStorage. De asemenea pagina va avea la inceputul ei si un buton "sterge tot" care va sterge toate datele din localStorage (metoda clear) dar va sterge si toate randurile din tabel care sunt in tbody, selectandu-le cu proprietatea children. Pentru a selecta tbody-ul se va folos getElementsByTagName. La resize borderul celulelor tabelului isi vor schimba culoarea. Celule vor fi selectate prin querySelectorAllcare va selecta atat th-urile cat si td-urile. Cand se itereaza prin colectia de celule se va verifica numele tagului (proprietatea tagName) si th-urile vor fi facute albastre iar td-urile verzi.
  6. Ivan Ciprian

    Modul de notare:

    1. (Ideea generala). Se va crea un joc, referitor la un restaurant. Restaurantul va avea 3 bucatari, de exemplu: Ionel, Gigel si Chucky. Fiecare dintre ei va avea niste skill-uri indicate prin skill points. Restaurantul va putea sa vanda un numar fix de tipuri de mancaruri, de exemplu 3: felurile M1, M2, M3 - pentru fiecare bucatarii avand cate un skill (skill pentru M1, pentru M2 etc). De asemenea va exista si skill-ul forta, pentru combaterea hotilor. Pregatirea unui fel de mancare dureaza TMAX=5 secunde (de exemplu) in cazul in care bucatarul care il pregateste are skill 0. La fiecare N=3 feluri de mancare facute, un bucatar primeste un skill point. Timpul de pregatire al mancarii scade de la TMAX cu p%, unde p e numarul de skill points pentru bucatarul respectiv. Pentru fiecare fel de mancare, numarul maxim de skill points e de 99. La crearea unui fel de mancare, jucatorul pierde un cost pret_fabricare din scor, iar cand vinde un fel de mancare, castiga pret_vanzare in scor. Fiecare bucatar va fi reprezentat printr-o imagine si va avea langa el un div de 20x20px cu border negru. In acesta va fi facut felul de mancare. In divul de joc va exista un tabel, de dimensiune N*N, pe post de frigider in care se vor pune felurile de mancare create..
    2. Se va folosi un fisier extern pentru codul javascript
    3. Va exista un obiect fel_de_mancare creat cu new Object(). Va avea o proprietate nume, o proprietate imagine (continand elementul DOM cu imaginea felului de mancare) si metoda schimbaNume() care schimba proprietatea Nume verificand faptul ca s-a dat un sir(String) ca parametru
    4. Va exista un constructor pentru obiectele de tip Bucatar.
    5. Obiectul bucatarva avea proprietatile publice imagine, vector skill-uri, skill_forta si proprietatea privata nume . Pentru aceasta proprietate privata se vor scrie functiile getter si setter. Functia setter va verifica daca valoarea data pentru setare este intr-adevar un string. In vectorul de skiluri vor exista obiecte cu 2 proprietati: fel_mancare (continand numele felului de mancare) si skill (continand valoarea skill-ului)
    6. In constructorul bucatar se va defini o proprietate statica medie_skiluri care va contine media skillurilor tuturor bucatarilor
    7. Se va defini si o metoda privata creeazaVectSkill(feluri_mancare) care va crea vectorul de obicete skilluri pornind de la un vector de siruri cu felurile de mancare. Aceasta functie va fi apelata la construirea obiectului.
    8. Clasa Bucatar va avea o metoda schimbaNume(numeNou) definita prin prototype, prin care se va schimba numele Bucatarului, verificand ca incepe cu litera mare (altfel numele ramane neschimbat).
    9. Se va defini o proprietate statica a clasei prin prototype, numita medieS, care va tine minte media skillurilor pentru toti bucatarii.
    10. Se va defini o metoda statica a clasei prin prototype claculeazaMedie() care va seta valoarea proprietatii medieS.
    11. Se va defini o clasa BucatarSpecial derivata din clasa bucatar care va avea in plus metoda reatribuireSkilluri, cafre va afisa un prompt in care se va preciza care este suma skillurilor si care va astepta de la utlizator un sir de numere separate prin virgula cu noua impartire a skillurilor.
    12. Datele pentru felurile de mancare se vor prelua dintr-un xml. Preluarea datelor se va face la load-ul paginii. Acesta poate avea o forma precum cea din exemplul de mai jos: <?xml version="1.0" encoding="UTF-8"?>
      <meniu>
          <mancare>
              <nume>salata</nume>
              <imagine>salata.png</imagine>
              <pret_fabricare>salata.png</pret_fabricare>
              <pret_vanzare>salata.png</pret_vanzare>
          </mancare>
          <mancare>
              <nume>salata</nume>
              <imagine>salata.png</imagine>
              <pret_fabricare>salata.png</pret_fabricare>
              <pret_vanzare>salata.png</pret_vanzare>
          </mancare>    
          <!-- si asa mai departe - completezi tu -->
      </meniu>
    13. Pe pagina jocului va exista un panou pentru setari, realizat printr-un div (atentie, nu un form) cu mai multe elemente de tip input si select. Jocul va porni abia dupa ce sunt facute setarile si apasat butonul de ok:
      • Doua inputuri de tip range prin care se seteaza latimea si inaltimea divului de joc (in care vor fi desenate componentele jocului)
      • Un input de tip text in care se cere numele utilizatorului
      • Un input de tip checkbox prin care se seteaza daca sa existe si hoti sau nu
      • Un set de inputuri de tip radio prin care se seteaza dimensiunea N a tabelului: 3,4 sau 5.
      • Cu ajutorul unui select simplu, utilizatorul va alege culoarea de background a divului de joc. In momentul in care se schimba selectia (onchange) sub select, cu ajutorul unui element canvas sau svg se va infatisa culoarea selectata (prin desenarea unui cerc de acea culoare).
      • Cu ajutorul unui select multiplu utilizatorul va alege din lista cu tipurile posibile de feluri de mancare, (lista de tipuri posibile e cea preluata din xml).
      • Un textarea in care utilizatorul va scrie cu ce scor (capital) sa inceapa.
      • Va exista si un buton care, la click va crea ecranul de joc, si va porni jocul. Butonul e initial disabled pana cand utilizatorul trece o valoare in textarea. Se vor genera in divul de joc, cele 3 imagini corespunzatoare bucatarilor, si cele 3 divuri (cuptoarele). Cele 3 divuri vor avea o culoare aleatoare de background (reprezentate prin niste divuri). Se va genera si tabelul de dimensiune N*N La generare obiectelor DOM corespunzatoare bucatarilor (si, mai tarziu, felurilor de mancare) li se va da o proprietate dataObj care sa contina o referinta catre obiectul Bucatar sau BucatarSpecial asociat. DOar primul si ultimul bucatar vor fi bucatari speciali (vor putea sa isi redistribuie skill-point-urile). Toate imaginile bucatrilor vor avea clasa css (nu ma refer la clasa custom) "bucatar". Bucatrii speciali vor avea in plus clasa "special". Adaugarea acestor clase se va face prin proprietatea classList.Cand se genereaza ecranul de joc, ecranul de setari este ascuns (cu display:none sau sters).
    14. Divurile din dreptul bucatarilor vor avea clasa "cuptor" (da, si salata o sa se faca tot in cuptor...), clasa va fi setata cu className.
    15. La dubluclick pe un div-cuptor,va aparea in dreptul cursorului un select simplu cu felurile de mancare (selectul va fi adaugat in interiorul divului de joc, nu direct in body, deci vor trebui preluate coordonatele fata de divul de joc). La alegerea unui element din select, va aparea un element meter in cuptor care va creste de la 0 la maxim pe masura ce se face felul de mancare (se va realiza cu setTimeout). Timpul de preparare depinde de skill-ul bucatarilor. Daca se face ctrl+click pe elementul meter, va aparea un confirm cu textul "chiar vrei sa renunti la acest fel de mancare?", si daca utilizatorul raspunde "ok", elementul meter se opreste din crescut valoarea (clearTimeout) si dispare.
    16. In momentul in care elementul meter a ajuns la valoarea maxima, acesta e inlocuit (replaceChild) de imaginea felului de mancare cerut. Din acest moment, imaginea cu felul de mancare poate fi mutata intr-o celula a tabelului, cu drag&drop. Din momentul in care a fost plasat felul de mancare in celula tabelului, are un "timp de viata" de 10 secunde, apoi dispare (setTimeout). Evenimentele de drag si drop vor fi adaugate dinamic prin proprietatile ondrag si ondrop ale elementelor DOM
    17. In coltul din dreapta jos al ferestrei va fi imaginea unui cos de gunoi. Acesta va fi plasat, folisindu-va de proprietatile innerWidth si innerHeight. La dubluclick pe un fel de mancare din tabel, se va opri Timeoutul acestuia (clearTimeout) si va porni intr-o animatie spre cosul de gunoi. Cand va ajunge la desinatie va disparea. La resize-ul ferestrei se schimba si pozitia cosului ca sa se potriveasca cu noile innerWidth si innerHeight.
    18. Sub divul de joc va exista un div cu clientii, avand id-ul "clienti". Acesta va fi selectat cu getElementById. Clientii apar la fiecare 10 secunde. Pentru fiecare client se va crea un paragraf nou. In paragraf, vor fi intre 1 si 3 textNode-uri, fiecare cu cate un fel de mancare, iar la final o imagine cu un smiley (reprezentand clientul). Numarul de feluri de mancare (textNode-uri) va fi ales aleator. Acestea vor fi create cu createTextNode. Paragrafele vor fi in ordinea inversa sosirii clientilor. Ultimul client creat e primul in div. Astfel ca paragrafele create vor fi inserate cu insertBefore.
    19. La fiecare 10 clienti se va crea si un hot cu puterea crescand din 2 in 2. Acesta va fi paragraf cu innerHTML-ul hot si in momentul in care se incerca servirea unui client, hotul va jefui magazinul, luand toate produsele din tabel(removeChild) si jumatate din scor. Asta numai daca nu cumva suma skillurilor forta ale bucatarilor depaseste puterea hotului.
    20. Servirea unui client se face in felul urmator: se vine cu cursorul pe un fel de mancare din tabel, se apasa tasta a (dar fara sa i se dea release), se misca cursorul spre clientul pe care dorim sa il servim, iar felul de mancare va urma cursorul (va fi cu 2px mai in dreapta si mai jos fata de cursor), iar cand se darelease tastei "a"(keyup) daca suntem deasupra clientului, se va realiza servirea acestuia (atat imaginea felului de mancare cat si textNode-ul corespunzator dispar de pe ecran). Indicatie: pentru realizarea acestui fapt se va folosi o variabila booleana setata true la mouseover si false la mouseout.Stergerea textNode-ului se va face parcurgand childNode-urile paragrafului si verificand daca tipul child-ului e intr-adevar textNode si, daca da, verificand apoi nodeValue-ul sau pentru a vedea daca e egal cu numele felului de mancare. Daca s-a adus un fel de mancare gresit (nu e in lista de textNode-uri) se va da un alert despre gresala. Daca un client a fost servit cu tot ce cerea, dispare din lista.
    21. Cand se vine cu cursorul pe tabel, border-urile celulelor capata culoarea verde, iar cand se iese cu cursorul, redevin negre. Se va realiza prin mouseenter si mouseleave, pentru a nu se activa si cand se intra sau se iese cu cursorul de pe felurile de mancare, deoarece elementele acestea sunt in interiorul tabelului (elemente in subarbore). Celulele vor fi selectate cu ajutorul lui getElementsByTagName
    22. La click in divul de joc se va da un alert cu cate feluri de mancare sunt in proces de pregatire. Acest numar se va obtine selectand cu querySelectorAll toate tagurile meter din divul de joc.
    23. La click pe imaginea unui bucatar va fi afisat un prompt cu textul "schimba numele" si valoarea default cu numele vechi. Numele se va schimba in obiectul bucatar, folosind metoda schimbaNume() din clasa fel_de_mancare. Pentru a putea accesa metoda pe obiectul de tip bucatar se va folosi scrierea fel_de_mancare.prototype.schimbaNume.call(). Adaugarea evenimentului de click pe elementele imagine se va face cu addEventListener in modul capturing, nu bubbling
    24. La apasarea tastei "s" se va adauga eventul click in mod dinamic prin proprietatea onclick tuturor elementelor din clasa "cuptor", selectate prin getElementsByClassName. La click pe un cuptor se va da alert cu faptul ca el contine fel de mancare gata sau in preparare sau nu contine nimic. Ca sa se relizeze acest lucru se va verifica daca divul cuptor are vreun fiu si daca da, se va verifica tagName-ul unicului child al cuptorului. Se va opri propagarea clickului ca sa nu apara si alertul de la clickul pe divul de joc (divul de joc fiind parinte pentru divurile cuptoare).
    25. Intr-o alta pagina va exista si un formular in care utilizatorul poate lasa o comanda. Formularul va cuprinde un input de tip text pentru nume, un input de tip select pentru felul de mancare (prima optiune va avea textul "-" si va fi selectata by default), un input tip readonly in care a fost introdusa prin script data curenta, si un textarea pentru specificatii suplimentare. Formularul va avea un input de tip submit si unul de tip reset. La submit se va verifica faptul ca selectia a fost schimbata (nu mai e elementul "-"), iar daca nu, nu se va reliza submitul. La resetul formularului acesta va capata un border lightblue.
    26. La focus pe select acesta va capata un background portocaliu si va redeveni alb la blur
    27. Datele din formular se vor trimite cu get. La submit, datele vor fi trimise spre o alta pagina html, numita comenzi.html, care va prelua datele din location-ul documentului (vor aparea dupa ? in bara de adrese) si le va afisa pe ecran. Acea pagina va realiza si salvarea datelor in localStorage. Practic pentru fiecare comanda, in local storage se vor salva toate datele trimise prin formular.
    28. Pagina comenzi.html va avea si un buton "afiseaza comenzi vechi" care va deschide o fereastra noua de dimensiuni 400*400 in care vor fi afisate toate comenzile salvate in localStorage, cu ajutorul unei liste generate dinamic. In coltul din stanga sus al acestei ferestre va exista un div 10px*10px negru. Daca se da mouse down pe un listitem si se da mouseup pe acel div, listitemul este sters din pagina, dar si din localStorage. La dubluclick pe acel div se vor sterge toate inregistrarile si din localStorage (clear) si din pagina, selectand li-urile cu proprietatea children.
  7. Nedelea Cosmin

    Modul de notare:

    1. (Ideea generala) Se va crea un set de butoane, fiecarui buton ii va fi asociat un sunet. Astfel se va putea canta o melodie, dar se va putea si salva pentru redarea ei mai tarziu. (o resursa utila)
    2. Se va folosi un fisier extern pentru codul javascript
    3. Va exista un obiect melodie creat cu new Object(). Va avea o proprietate nume, o proprietate descriere o proprietate vector_sunete (continand un vector de obiecte sunet) si metoda adaugaSunet() care adauga un sunet in vectorul vector_sunete, testand in prealabil ca e de tip sunet)
    4. Va exista un constructor pentru obiectele de tip Sunet.
    5. Obiectul Sunetva avea proprietatile publice fisier (continad fisierul de sunet), culoare, durata (in secunde) si proprietatea privata nume. Pentru aceasta proprietate privata se vor scrie functiile getter si setter. Functia setter va verifica daca valoarea data pentru setare este intr-adevar un string format din caractere alfanumerice (plus caracterul "_").
    6. In constructorul Sunet se va defini o proprietate statica vect_extensii care va contine vectorul de extensii pentru sunetele create pana acum (wav, mp3 etc.)
    7. Se va defini si o metoda privata care testeaza faptul ca un string e un nume valid de fisier (contine un punct dupa care urmeaza exact 3 caractere-litere). Aceasta functie va fi apelata la construirea obiectului pentru a testa valoarea destinata proprietatii fisier.
    8. Clasa Sunet va avea o metoda schimbaNume(numeNou) definita prin prototype, prin care se va schimba numele Sunetului, verificand ca e format doar din litere si cifre, cu primul caracter egal cu o litera.
    9. Se va defini o proprietate statica a clasei prin prototype cu vectorul tuturor sunetelor create prin constructor.
    10. Se va defini o metoda statica a clasei prin prototype testeazaExtensie() care va verifica daca un nume de fisier dat are extensia in vectorul de extensii.
    11. Se va defini o clasa SunetSpecial derivata din clasa Sunet care va avea in plus proprietatea nr_redari (practic un sunet va putea fi redat de mai multe ori) si o metoda setter pentru aceasta proprietate care verifica daca parametrul dat este un numar natural mai mic de 10.
    12. Datele pentru sunete se vor prelua dintr-un xml. Preluarea datelor se va face la load-ul paginii. Acesta poate avea o forma precum cea din exemplul de mai jos: <?xml version="1.0" encoding="UTF-8"?>
      <sunete>
          <sunet>
              <nume>cum spune pisica</nume>
              <fisier>miau</fisier>
              <durata>4</durata>
              <culoare>blue</culoare><!-- culorile vor fi specificate intr-un format acceptat de CSS -->
          </sunet>
          <sunet>
              <nume>catel</nume>
              <fisier>ham</fisier>
              <durata>2</durata>
              <culoare>rosu</culoare><!-- culorile vor fi specificate intr-un format acceptat de CSS -->
          </sunet>    
          <!-- si asa mai departe - completezi tu -->
      </sunete>
    13. Pe pagina aplicatiei va exista un panou pentru setari, realizat printr-un div (atentie, nu un form) cu mai multe elemente de tip input si select. Jocul va porni abia dupa ce sunt facute setarile si apasat butonul de ok:
      • Un select simplu, care va avea prima optiune "-" si aceasta va fi selectata. Restul optiunilor vor fi preluate din localStorage si vor reprezenta numele melodiilor create in sesiuni anterioare. Daca se selecteaza ceva in acest select in afara de "-" toate celelalte inputuri devin disabled, daca se selecteaza inapoi "-" inputurile devin enabled.
      • Doua inputuri de tip range prin care se seteaza dimensiunea unui div de reprezentare a unui sunet (sunetele vor fi reprezentate prin patratele colorate)
      • Un input de tip text in care se cere numele melodiei
      • Un input de tip checkbox prin care se seteaza daca sunetele sa apara ca divuri colorate sau doar divuri albe cu border negru.
      • Un set de inputuri de tip radio prin care se seteaza forma notelor: patrat, cerc sau romb (de fapt patrat rotit cu 90 grade).
      • Cu ajutorul unui select multiplu, utilizatorul va alege sunetele posibile in joc. In momentul in care se schimba selectia (onchange) sub select, cu ajutorul unor elemente canvas sau svg se vor infatisa culorile sunetelor selectate (prin desenarea unor dreptunghiuri). Sunetele posibile sunt cele preluate din XML.
      • Un textarea in care utilizatorul va scrie o descriere a melodiei.
      • Va exista si un buton care, la click, va crea ecranul aplicatiei (un div cu id-ul "div_aplicatie", si va porni aplicatia. Se vor genera in divul aplicatiei, cate un buton pentru fiecare sunet selectat in selectul multiplu (numele sunetelor vor fi scrise pe butoane - innerHTML). Toate butoanele vor avea clasa "sunet". Butoanele pentru sunete scurte (sub 10 secunde) vor avea si clasa "scurt", iar celelalte clasa "lung". La generarea butoanelor li se va da o proprietate dataObj care sa contina o referinta catre obiectul Sunet. Adaugarea acestor clase se va face prin proprietatea classList.Cand se genereaza ecranul de joc, ecranul de setari este ascuns (cu display:none sau sters).
    14. Deasupra butoanelor cu sunete se va genera un div cu id-ul "portativ", cu un border de 2px verde, un height constant (sa zicem 100px si widthul egal cu latimea paginii(innerWidth)). In afara de butoanele cu sunete va exista si un buton "random" care va genera in divul portativ (referit cu getElementById) un sunet random. Sunetul va fi reprezentat (in functie de setari) printr-un cerc,patrat sau romb de culoarea data in XML.
    15. Cand se face click pe unul dintre butoanele sunet, se creeaza un sunet pe portativ. Obiectelor DOM respective li se va da o proprietate dataObiect care sa contina o referinta catre obiectul Sunet sau SunetSpecial asociat. Adaugarea evenimentului de click pe elementele buton se va face cu addEventListener in modul capturing, nu bubbling. La mouseover pe un sunet, acesta isi schimba culoarea borderului, de exemplu din negru devine albastru si la mouseout redevine negru. Cat timp cursorul e pe un (element asociat unui) sunet, daca se apasa tasta x, sunetul va fi sters.
    16. La click pe divul "div_aplicatie"in dreptul cursorului (cu 4px in jos si la dreapta), va aparea un div mic cu informatii despre melodia creata (lungimea in secunde si cate sunete are - sunetele vor fi selectate cu ajutorul getElementsByClassName pentru a se afla numarul lor).
    17. La click pe un sunet va fi afisat un alert cu numele sunetului. Evenimentele se vor adauga dinamic prin proprietatea onclick a obiectelor DOM. Nu trebuie sa apara si divul cu informatiile despre melodie cand facem click pe sunet (fiindca facem click atunci si pe divul aplicatiei: stopPropagation)
    18. Cand intram cu cursorul pe divul portativ apare o linie verticala(creata printr-un div) in interiorul divului portativ care se misca dupa cursor la 2px in stanga. Daca facem ctrl+click pe divul portativ linia ramane fixata acolo si la urmatorul click pe butonse va insera o nota in locul liniei (daca e intre doua note se va insera intre ele, daca e pe o nota se va insera inaintea acelei note). Inserarea se va face cu insertBefore. Cand iesim cu cursorul din divul portativ dispare linia. Se va realiza prin mouseenter si mouseleave, pentru a nu se activa si cand se intra sau se iese cu cursorul pe divurile sunete, deoarece divurile-sunete sunt elemente-fii ale divului joc
  8. Arsene Alexandra

    Modul de notare:

    1. (Ideea generala) Se va crea un ecran de joc, cu niste rafturi goale, simulate prin niste divuri. Si dintr-o lista de produse, utilizatorul va alege ce produse sa puna pe ce rafturi. Fiecare div va avea asociat un tip de produse pe care il primeste ( de exemplu: alimentare, rechizite, imbracaminte etc.)
    2. Se va folosi un fisier extern pentru codul javascript
    3. Va exista un obiect raft creat cu new Object(). Va avea o proprietate tip_produse, o proprietate culoare, si o functie printDebug() care afiseaza in consola obiectul (console.log)
    4. Va exista un constructor pentru obiectele de tip Produs.
    5. Obiectul Produsva avea proprietatile publice imagine (continand calea fisierului imagine), culoare,nume, tip si proprietatea privata descriere. Pentru aceasta proprietate privata se vor scrie functiile getter si setter. Functia setter va verifica daca valoarea data pentru setare este intr-adevar un string format din caractere alfanumerice (dar numai cu litere mici).
    6. In constructorul Produs se va defini o proprietate statica vect_tipuri care va contine vectorul de tipuri pentru produsele create pana acum
    7. Se va defini si o metoda privata care testeaza faptul ca un string e un nume valid de fisier (contine un punct dupa care urmeaza un subsir de 3 litere egal cu jpg, png sau gif). Aceasta functie va fi apelata la construirea obiectului pentru a testa valoarea destinata proprietatii imagine.
    8. Clasa Produs va avea o metoda definita prin prototype, schimbaCuloare(r,g,b) care schimba culoarea. Culoarea va fi memorata sub forma unui sir "rgb(r,g,b)" unde r,g si b sunt componentele rosu, verde si albastru ale culorii..
    9. Se va defini o proprietate statica a clasei prin prototype cu numarul tuturor produselor create prin constructor.
    10. Se va defini o metoda statica a clasei prin prototype testeazaExtensie() care va verifica daca un nume de fisier dat are extensia in vectorul de extensii: jpg, png sau gif.
    11. Se va defini o clasa ProdusPerisabil derivata din clasa Produs care va avea in plus proprietatea timp_disparitie (din momentul aparitiei, va sta pe ecran doar atatea secunde cate sunt precizae in timp_disparitie).
    12. Datele pentru produse se vor prelua dintr-un xml. Preluarea datelor se va face la load-ul paginii. Acesta poate avea o forma precum cea din exemplul de mai jos: <?xml version="1.0" encoding="UTF-8"?>
      <produse>
          <produs>
              <nume>creion</nume>
              <imagine>creion12.png</imagine>
              <culoare>rgb(12,23,100)</culoare>
              <tip>rechizite</tip><!-- tipurile trebuie sa coincida cu cele ale rafturilor -->
          </produs>
          <produs>
              <nume>cascaval</nume>
              <imagine>CS1001.jpg</imagine>
              <culoare>rgb(124,255,110)</culoare>
              <tip>alimente</tip>
          </produs>
          <!-- si asa mai departe - completezi tu -->
      </produse>
    13. Pe pagina aplicatiei va exista un panou pentru setari, realizat printr-un div (atentie, nu un form) cu mai multe elemente de tip input si select. Jocul va porni abia dupa ce sunt facute setarile si apasat butonul de ok:
      • Un select simplu, care va selecta culoarea de background pentru divul jocului. In momentul in care se schimba selectia (onchange) sub select, cu ajutorul unor elemente canvas sau svg se vor infatisa culorile elementelor selectate (prin desenarea unor dreptunghiuri).
      • Un input de tip range prin care se seteaza dimensiunea unui raft (lungimea lui)
      • Un input de tip text in care se cere numele jucatorului
      • Un input de tip checkbox prin care se seteaza daca vor exista sau nu produse perisabile.
      • Un set de inputuri de tip radio prin care se seteaza dimensiunea produselor (imaginile vor avea 3 dimensiuni posibile (nu se salveaza 3 versiuni ale imaginii - se seteaza prin CSS): mici, medii, mari.
      • Cu ajutorul unui select multiplu, utilizatorul va alege tipurile de produse posibile in joc (lista de tipuri incarcata in select va fi preluata din XML).
      • Un textarea in care utilizatorul va scrie numele magazinului virtual (din joc).
      • Va exista si un buton care, la click, va crea ecranul aplicatiei (un div cu id-ul "div_joc", si va porni jocul. divul va avea 4/5 din latimea si inaltimea ferestrei(innerWidth, innerHeight). Se vor genera in divul jocului, rafturile, unul sub altul, in partea stanga a jocului, iar in partea dreapta va fi un div cu id-ul "produse" in care se vor genera produsele pe care utilizatorul trebuie sa le aseze pe rafturi. Toate imaginile produselor vor avea clasa "produse". In plus, produsele perisabile vor avea si clasa "perisabil". Adaugarea acestor clase se va face prin proprietatea classList. La generarea butoanelor li se va da o proprietate dataObj care sa contina o referinta catre obiectul Produs. Cand se genereaza ecranul de joc, ecranul de setari este ascuns (cu display:none sau sters).
    14. Divurilor de tip raft li se va asocia clasa "raft", folosind className.
    15. In divul "produse" se va genera la fiecare 3 secunde (setInterval) cate un element imagine cu cate un produs. Cu drag&drop utilizatorul trebuie sa mute produsul pe raftul corespunzator tipului lui. Aleator se vor genera si produse perisabile. Acestea vor disparea dupa 10 secunde (setTimeout,window.setTimeout). Vor fi inconjurate de un border rosu, ca sa stie utilizatorul ca sunt perisabile (borderul va fi setata in css pentru clasa perisabil). Disparitia se va realiza prin removeChild. Inserarea in rafturi se va face cu insertBefore. Rafturile vor avea scrollbar orizontal.
    16. La apasarea tastei "p" jocul intra in pauza, asadar se va da clearInterval, respectiv clearTimeout pe toate intervalele si timeouturile pornite, iar deasupra divului de joc va fi afisat un div negru pe care scrie pauza(apasati tasta "p" pentru a reporni). La apasarea tastei "p" jocul iese din pauza si intervalurile si timeouturile sunt repornite. Pentru a selecta toate produsele din clasa "perisabil" ca sa li se asocieze un timeout se va folosi getElementsByClassName.
    17. Sub divul de joc va exista un div cu id-ul "informatii" (selectat prin getElementById) Cand venim cu cursorul pe un produs (mouseover), indiferent daca e in raft sau in divul produse, in "informatii" va aparea un text explicativ despre produs, continand numele lui si, in paranteza tipul lui. Aceasta setare se va face cu innerHTML
    18. Cand venim cu cursorul pe un raft se va genera un div care va urmari (onmousemove) cursorul(la 4px in jos si dreapta fata de cursor) si va scrie in el tipul de produse pe care raftul il primeste. Se va realiza prin mouseenter si mouseleave, pentru a nu se activa si cand se intra sau se iese cu cursorul pe imaginile produselor din raft, deoarece elementele imagini sunt elemente-fii ale divului raft.
  9. Radu Ioan Alexandru

    Modul de notare:

    1. (Ideea generala) Se vor realiza niste intrebari stil grila si exercitii interactive pentru a testa conceptele invatate din lectiile de pe site.
    2. Se va folosi un fisier extern pentru codul javascript
    3. Va exista un obiect raspuns creat cu new Object(). Va avea o proprietate id, o proprietate text, o proprietate corect, si o functie printDbg() care afiseaza in consola proprietatile obiectului (console.log) cu textul raspunsului si corectitudinea acestuia
    4. Va exista un constructor pentru obiectele de tip IntrebareGrila.
    5. Obiectul IntrebareGrilava avea proprietatile publice id, text, culoare, si proprietatea privata vect_raspunsuri. Pentru aceasta proprietate privata se vor scrie functiile getter si setter. Functia setter va verifica daca valoarea data pentru setare este intr-adevar un vector de obiecte de tip raspuns (adica, care au proprietatile specificate mai sus), altfel proprietatea va fi setata la un Array vid.
    6. In constructorul IntrebareGrila se va defini o proprietate statica nr_intrebari care va contine numarul de intrebari create pana acum. Va fi folosit pentru a seta id-ul fiecarei intrebari (practic id-ul devine numar de ordine).
    7. Se va defini si o metoda privata care testeaza faptul ca un obiect dat e intr-adevar un obiect de raspuns Aceasta functie va fi apelata in setterul pentru proprietatea vect_raspunsuri.
    8. Clasa IntrebareGrila va avea o metoda definita prin prototype, schimbaText(textNou) care schimba textul intrebarii. Tetul va fi dat ca parametru sub forma unui sir. Se va verifica faptul ca textul nu depaseste 200 de caractere. Daca depaseste, textul va ramane la valoarea initiala.
    9. Se va defini o proprietate statica a clasei prin prototype cu un vector continand cuvintele folosite in toate intrebarile (pentru o eventuala functie de search).
    10. Se va defini o metoda statica a clasei prin prototype care returneaza vectorul de cuvinte de mai sus, ordonat alfabetic.
    11. Se va defini o clasa IntrebareTimer derivata din clasa IntrebareGrila care va avea in plus proprietatea timp (din momentul aparitiei/activarii, va sta pe ecran doar atatea secunde cate sunt precizate in timp).
    12. Datele pentru intrebari se vor prelua dintr-un xml. Preluarea datelor se va face la load-ul paginii. Acesta poate avea o forma precum cea din exemplul de mai jos: <?xml version="1.0" encoding="UTF-8"?>
      <intrebari>
          <!-- intrebarile exemplu sunt din materia TWEB, dar cele folosite de tine vor fi despre continutul site-ului -->
          <intrebare>
              <text>Ce inseamna HTML</text>
              <identificator>HTML</identificator>
              <tip>10</timp>
              <culoare>green</culoare>
              <raspunsuri>
                  <raspuns corect="1">Hyper text markup language</raspuns>
                  <raspuns corect="0">Hyper text transfer protocol</raspuns>
                  <raspuns corect="0">Hop Top Miau Lulu!</raspuns>
              </raspunsuri>
          </intrebare>
          <intrebare>
              <text>Care este difenta intre proprietatile children si childNodes</text>
              <culoare>green</culoare>
              <identificator>green</identificator>
              <raspunsuri>
                  <raspuns corect="0">Prima cuprinde toate nodurile fii, cealalta doar fiii-elemente</raspuns>
                  <raspuns corect="1">Prima cuprinde doar fiii-elemente cealalta cuprinde toate nodurile fii</raspuns>
                  <raspuns corect="0">Nu exista aceste proprietati.</raspuns>
              </raspunsuri>
          </intrebare>
          <!-- si asa mai departe - completezi tu -->
      </intrebari>
    13. Va exista o pagina cu intrebarile stil grila, numita intrebari_grila.html. La incarcarea paginii se vor citi intrebarile din XML. Se va afisa cate o singura intrebare pe ecran. Intrebarile vor fi afisate intr-un div cu id-ul "div_intrebari" (nu se va folosi formular aici). Intrebarile incarcate din XML care au proprietatea "timp" vor fi de tip IntrebareTimer.
      • Pentru intrebarile cu raspuns unic se va afisa setul de raspunsuri fie printr-un select simplu, fie prin butoane de tip radio. Modul de afisare a setului de raspunsuri va fi ales random.
      • Pentru intrebarile cu raspunsuri multiple se va afisa setul de raspunsuri fie printr-un select multiplu, fie prin butoane de tip checkbox. Modul de afisare a setului de raspunsuri va fi ales random.
      • Pentru intrebarile cu raspuns simplu va mai eista un mod de afisare. Intrebarile vor fi inserate intr-o lista ordonata. Un input de tip range va fi folosit pentru alegerea variantei corecte.
      • Pentru raspunsurile simple se va folosi si un mod de afisare cu o lista ordonata pentru raspunsuri si un input de tip text in care utilizatorul trebuie sa treaca raspunsul.
      • Pentru raspunsurile multiple se va folosi si un mod de afisare prin textarea in care utilizatorul va scrie variantele separate prin virgula.
      • Va exista si un buton "ok" care, la click, va verifica raspunsurile date, si, daca utilizatorul a raspuns corect va afisa urmatoarea intrebare, iar daca nu, ii va da un mesaj de alerta utilizatorului.
    14. Toate raspunsurile vor avea clasa (css) "intrebare", iar raspunsurile corecte clasa "corect" Clasele vor fi setate prin proprietatea classList.
    15. Intrebarile cu timp vor avea si un element de tip meter care va creste la fiecare secunda (setInterval). Daca se apasa tasta "p" se opreste contorul (clearInterval) si se creeaza un div negru care se intinde pe toata fereastra (de la 0,0 la coltul din dreapta jos al ferestrei - se vor folosi proprietaile innerWidth si innerHeight). La apasarea tastei "p" din nou, divul dispare (removeChild).
    16. La resize se va redimensiona si divul.
    17. Cand se misca cursorul pe divul de pauza, apare un div mic care urmareste cursorul (la 3px sub pozitia cursorului si cu 5px in dreapta, pe care scrie "pauza").
    18. Divul poate sa dispara si daca se da ctrl+dubluclick pe el.
  10. Pavel Daniel

    Modul de notare:

    1. (Ideea generala) Se va realiza o aplicatie prin care utilizatorul creeaza un fragmnet de pagina html cu jutorul unor elemente de tip input. De asemenea va exista si un "screensaver".
    2. Se va folosi un fisier extern pentru codul javascript
    3. Va exista un obiect screensaver creat cu new Object(). Va avea o proprietate proprietate culoare, o proprietate nrSecunde, o proprietate vector_litere si o functie addLitera(litera) care va aduga un obiect de tip litera(vezi mai jos) in vectorul de litere, testand in prealabil ca e intr-adevar un obiect de tip String de un caracter care este litera (mica sau mare)
    4. Va exista un constructor pentru obiectele de tip Litera.
    5. Obiectul Literava avea proprietatile publice id, culoare, si proprietatea privata text. Pentru aceasta proprietate privata se vor scrie functiile getter si setter. Functia setter va verifica daca valoarea data pentru setare este intr-adevar un sir de o litera.
    6. In constructorul Litera se va defini o proprietate statica nrLit care va contine numarul de litere create pana acum. Va fi folosit pentru a seta id-ul fiecarei litere (practic id-ul devine numar de ordine).
    7. Se va defini si o metoda privata care testeaza faptul ca o culoare data e intr-adevar un sir cu o culoare valida ( de forma "rgb(r,g,b)", unde r,g,b sunt numere intre 0-255). Aceasta functie va fi apelata in constructor.
    8. Clasa Litera va avea o metoda definita prin prototype, schimbaText(textNou) care schimba textul Literei. Tetul va fi dat ca parametru sub forma unui sir.
    9. Se va defini o proprietate statica a clasei prin prototype cu un vector continand toae literele distincte create.
    10. Se va defini o metoda statica a clasei prin prototype care returneaza vectorul de litere de mai sus, ordonate alfabetic.
    11. Se va defini o clasa LiteraTimer derivata din clasa Litera care va avea in plus proprietatea timp (din momentul aparitiei, va sta pe ecran doar atatea secunde cate sunt precizate in timp).
    12. Datele pentru formularul de creare a fragmentului de pagina web se vor prelua dintr-un xml. Preluarea datelor se va face la load-ul paginii. Acesta poate avea o forma precum cea din exemplul de mai jos: <?xml version="1.0" encoding="UTF-8"?>
      <resurse>
          <!-- intrebarile exemplu sunt din materia TWEB, dar cele folosite de tine vor fi despre continutul site-ului -->
          <imagini>
              <imagine>pisica.png</imagine>
              <imagine>catel.png</imagine>
              <imagine>HTML.png</imagine>
              <imagine>extraterestru.png</imagine>
              <!-- etc -->
          </imagini>
          <backgrounduri>
              <imagine>nisip.png</imagine>
              <imagine>apa.png</imagine>
              <imagine>textura.jpg</imagine>
              <!-- etc -->
          </backgrounduri>
      </resurse>
    13. Va exista o pagina cu inputurile folosite pentru creare a fragmentului de pagina web., numit creeaza_pag.html. Atentie, inputurile vor fi intr-un div, nu se va folosi formular aici.
      • Va exista un select simplu pentru taguri.Optiunile vor fi siruri reprezentand numele de taguri.
      • Va exista un set de butoane radio pentru dimensiunea textului (mic=10px, mediu=14px, mare=18px, f_mare=22px).
      • Va exista un input range pentru dimensiunea aliniatului (text-indent).
      • Va exista un checkbox care bifat va afisa elementul ca bloc si nebifat il va afisa inline.
      • Va exista un select multiplu pentru stilul de afisare: bold, italic, subliniat, cu_border, small-caps. Astfel se vor putea seta mai multe stiluri in acelasi timp
      • Pentru culoare se va folosi un input de tip text in care utilizatorul trebuie sa treaca un nume de culoare.
      • Intr-un textarea, utilizatorul va trece continutul elementului pe care vrea sa il creeze.
      • Va exista si un buton "ok" care, la click, va crea un element cu toate setarile de mai sus. Butonul initial va fi disabled, va deveni enabled cand se modifica textarea (cand capata un continut)
  11. Petras Bogdan

    Modul de notare:

    1. (Ideea generala) O aplicatie prin care se cumpara bilete de meci.
    2. Se va folosi un fisier extern pentru codul javascript
    3. Va exista un obiect sector creat cu new Object(). Va avea o proprietate pozitie (1-colt stanga-sus, 2-mijloc-sus etc - vor fi cele 8 pozitii posibile in jurul terenului), doua proprietati latime_locuri, inaltime_locuri(cu numarul de locuri pe latime si inaltime), o proprietate culoare_border o proprietate vector_locuri si o functie creeaza_locuri care va crea vectorul de obiecte locuri (vector_locuri) cu un numar de elemente egal cu latime_locuri * inaltime_locuri
    4. Va exista un constructor pentru obiectele de tip Loc.
    5. Obiectul Locva avea proprietatile publice id, culoare_border, sector (continand o referinta catre sectorul din care face parte) si proprietatea privata ocupat (initial false). Pentru aceasta proprietate privata se vor scrie functiile getter si setter. Functia setter va verifica daca valoarea data pentru setare este intr-adevar o valoare booleana.
    6. In constructorul Loc se va defini o proprietate statica nrLocuri care va contine numarul de locuri create pana acum. Va fi folosit pentru a seta id-ul fiecarui loc (practic id-ul devine numar de ordine).
    7. Se va defini si o metoda privata care testeaza faptul ca o culoare data e intr-adevar un sir cu o culoare valida ( de forma "rgb(r,g,b)", unde r,g,b sunt numere intre 0-255). Aceasta functie va fi apelata in constructor (pentru proprietatea culoare_border).
    8. Clasa Loc va avea o metoda definita prin prototype, schimbaCuloare(culoareNoua) care schimba culoarea borderului. Culoarea va fi data ca parametru sub forma unui sir rgb(r,g,b) cu componentele r,g,b intre 0-255.
    9. Se va defini o proprietate statica a clasei prin prototype cu un vector continand toate locurile ocupate.
    10. Se va defini o metoda statica a clasei prin prototype care verifica daca mai exista locuri libere (numarul locurilor ocupate e mai mic sau e egal cu numarul celor create.
    11. Se va defini o clasa LocVip derivata din clasa Loc. Locurile vip for fi cele aflate chiar in vecinatatea terenului care va avea in plus proprietatea booleana masa_inclusa si proprietatea data_rezervare.
    12. Datele pentru formularul de creare a fragmentului de pagina web se vor prelua dintr-un xml. Preluarea datelor se va face la load-ul paginii. Acesta poate avea o forma precum cea din exemplul de mai jos: <?xml version="1.0" encoding="UTF-8"?>
      <sectoare>
          <!-- intrebarile exemplu sunt din materia TWEB, dar cele folosite de tine vor fi despre continutul site-ului -->
          <sector pozitie="1">
              <culoare_border>rgb(0,255,0)</culoare_border>
              <latime_locuri>5</latime_locuri>
              <inaltime_locuri>7</inaltime_locuri>
              <!-- etc -->
          </sector>
          <sector pozitie="2">
              <culoare_border>rgb(255,255,0)</culoare_border>
              <latime_locuri>10</latime_locuri>
              <inaltime_locuri>7</inaltime_locuri>
              <!-- etc -->
          </sector>
      </sectoare>
    13. Va exista o pagina rezerva_bilet.html in care vor fi afisate sectoarele si terenul sub forma a 9 divuri (create dinamic). In fiecare sector vor fi afisate locurile ca niste patratele (locurile de asemenea vor fi create dinamic, si in fiecare loc va fi afisat si numarul de ordine: proprietatea innerHTML). Fiecare div corespunzand unui loc va avea o proprietate dataObct in care va avea o referinta catre obiectul de tip Loc asociat. Crearea sectoarelor se va face conform datelor din XML. Toate divurile-locuri vor avea clasa "loc". Divurile de pe marginea terenului vor avea in plus si clasa "vip". Se va folosi proprietatea classList pentru acest lucru (alocarea mai multor clase aceluias element). In afara de aceasta afisare care va servi la alegerea locurilor, vor mai fi niste inputuri in care utilizatorul poate face precizari legate de bilet. Atentie, inputurile vor fi intr-un div, nu se va folosi formular aici.
      • Cu un select simplu se va selecta daca e vorba de bilet normal, bilet pentru cei cu handicap, bilet pensisonar, bilet pentru donatori sange, bilet pentru rudele jucatorilor. Acest select va afecta pretul.
      • Va exista un set de butoane radio pentru culoarea biletului (de la final, cand se va genera).
      • Va exista un input range pentru varsta cumparatorului.
      • Va exista un checkbox care bifat va insemna si masa inclusa.
      • In care se va specifica data curenta. Inputul va fi readonly si completarea se va face automat la incarcarea paginii, cu ajutorul clasei Date.
      • Intr-un textarea, utilizatorul va trece numele sau complet.
      • La click pe un element de tip loc, acesta se va selecta(isi va schimba culoarea borderului si a backgroundului).
      • Va exista si un buton "ok" care, la click, va crea un element div cu id-ul "div_bilet" cu toate setarile de mai sus. Butonul initial va fi disabled, va deveni enabled doar cand sunt indeplinite conditiile:textarea-ul nu mai este vid, si a fost ales un loc. Divul "div_bilet" va contine toate informatiile din setarile de mai sus puse in cate un paragraf.