Upute za izradu JSRS projekta 11. svibnja.2022.

JSRS PROJEKT rok za predaju: 25.05.2022.

Dragi učenici,
evo dokumenta kojeg detaljno trebate proučiti kako bi znali što trebate napraviti.
Očekujem od svakog od vas da napravi projekt koji će uz sebe kao prilog imati prezentaciju ili
drugi tekstualni dokument koji će objasniti (sa slikama -snimljenim zaslonima) u kojem dijelu
programa su koji elementi i koja je njihova uloga u tom dijelu programa (ako je neko
grananje u pitanju). Takav prilog zove se dokumentacija te služi da bi druge kolege koji rade
na istom projektu (ili koji će kasnije raditi na tom projektu) jednostavnije shvatile kod kad ga
trebaju nadopuniti ili promijeniti. Naravno, takve dokumentacije su puno kompleksnije te
pomno sastavljene.
Molim vas da mi javite već nakon 2-3 dana imate li kakvu viziju (ideju za vaš projekt)- o čemu
ćete raditi, koje bi elemente imali itd.
IDEJE ZA PROJEKT:

OBAVEZNO JE NAPRAVITI PROJEKT/STRANICU o nekoj temi i pri tome koristiti elemente koje
smo radili ove godine (useState, useRef, useEffect, useContext). Napravite stranicu o Npr.
grad/glumcu/glumici/pjevaču/pjevačici/ poznatom mjestu/seriji itd. Možete i nadograditi
projekt od prošle godine. Sve stranice koje napravite trebaju biti tematski povezane (ne sada
da jedna priča o Splitu, a druga o NP Plitvice- osim ako ih nećete na neki način povezati- npr.
Napraviti stranicu o top destinacijama u Hrvatskoj- pa da tu bude svrstan i Split kao grad i
nacionalni parkovi. Svaka stranica obavezno treba imati formu koja će omogućiti unos
podataka te unesene podatke ispisati.
KATEGORIJE:

BROJ STRANICA U MAPI COMPONENTS:

 dvije (najmanje dvije stranice za ocjenu dovoljan) (mapa components)

 tri (najmanje tri stranice za ocjenu dobar) (mapa components)
 četiri (četiri izmjenjive stranice za ocjenu vrlo dobar) (mapa components)
 jedna Context- class based komponenta za ocjenu odličan (mapa conexts)
Sve stranice trebaju biti ispunjene sadržajem da bi se vrednovale za navedene ocjene (ne
napraviti jednu stranicu zbog povećanja broja stranica i onda je ostaviti praznu ili gotovo
praznu).
ELEMENTI NA SUČELJU KOJE MOŽE IMATI VAŠ PROJEKT (može imati i više istih):
PROŠLA GODINA:

 Link (koji vodi do vaše druge stranice)- više mogućnosti za prijelaz s jedne na drugu
stranicu
 Router u App.js-u
 Hiperveza koja vodi do neke stranice na internetu
 Slika (više slika)

1
Upute za izradu JSRS projekta 11. svibnja.2022.

 Header
 Footer (baš na dnu stranice)
 Paragrafe s tekstom
 Props- prenošenje varijabli ili objekata s roditelja na dijete (nije direktno vidljivo na
sučelju, ali se rezultat vidi kada se objekti i varijable ispišu)
OVA GODINA:

 Forma- jednostavni unos i ispis na sučelju- korištenje Hook-ova

 Button (za unos podataka, prijenos podataka iz Forme u stranicu za ispis- korištenje
propsa)
 Toggle button (mijenjanje teme na stranici)
FUNKCIONALNOSTI STRANICE:

 Stranica koristi useState za spremanje i props za prenošenje podataka iz komponente

na komponentu
 Stranica koristi useEffect i useRef (korištenje brojača, „reduciranje“ broja
„renderiranja“, fokus na željeno polje u unosu)
 Klikom na button – podaci se ispisuju na sučelju, izračunaju, prenose iz forme u formu
 Podaci se uvjetno ispisuju- korištenje grananja za setState (sjetite se zadataka s
parnim i neparnim brojevima i višekratnicima)
 Klikom na toggle button- mijenja se tema stranice ili opcija LOGIN/LOGOUT (može i
oboje)
 Ispisivanje podataka u listu
ELEMENTI App.css-a I OPĆENITO RASPORED ELEMENATA NA SUČELJU:

 Definirane veličine slika u projektu

 Poravnate slike
 Linkovi u nevidljivoj tablici- ili općenito poravnati na svakoj stranici jednako
 Dobro ukomponirane boje
 Posebno odabran font (primijenjen logički na svim ili odabranim dijelovima stranice)
 Posebno naznačen- kliknut link/link ispod pokazivača/link inače (i hiperveza)
 Poravnat i smisleno ubačen tekst (u odnosu na ostale sadržaje)
 Naglašeno zaglavlje/podnožje (u zaglavlju- ime autora projekta) nadodano
 Smisleno centrirani elementi (ili poravnati na lijevu/desnu stranu)
 Boja pozadine- pozadina cijelog projekta
 Ukomponirana forma, poravnati ispis liste, ukomponirani detalji kao što su
button/toggle button
 Izrada 2 moguće teme za sučelje (svijetla ili tamna- neutralna ili šarena- po želji)

Dakle, u vašoj dokumentaciji trebate spomenuti koje ste od ovih elemenata u kodu tj. na
sučelju koristili.
PRIMJER:

2
Upute za izradu JSRS projekta 11. svibnja.2022.

Stavili ste Linkove u tablicu koju ste centrirali. Napišete točno koji dio koda se odnosi na
postavljanje tablice, nevidljive obrube tablice, koji Link predstavlja odlazak na koju stranicu.
Gdje je u App.css-u tablica centrirana. Jeste li je centrirali preko class atributa ili slično.
Umetnuli ste sliku- npr. Neke poznate osobe. Je li se ona nalazi u mapi src ili posebnoj mapi.
Gdje je u App.css uređena i kako. Koje su njezine dimenzije, je li centrirana i slično. Jeste li
koristili props, koja je komponenta dijete, a koja roditelj. Jeste li props koristili za prenošenje
obične varijable ili objekta. Koji ste tip varijable koristili i sl. Koristili ste useState (u kojoj
formi ispisujete podatke, a u kojoj unosite, kako prenosite uneseni podatak itd.)
VREDNOVANJE:

NEDOVOLJAN(1)- ocjenu nedovoljan dobit će učenik čiji (ne)rad zadovoljava sljedeće

kriterije:
 Učenik nije na vrijeme predao projekt.
 Projekt je predan s nepotpunom dokumentacijom (ili bez dokumentacije).
 Projekt nema mapu Components sa izmjenjivim stanicama.
 Pojedine dodane stranice nemaju nikakvu funkciju (dodane su bez sadržaja, slika i
samo da „zadovolje normu“).
 Projekt „puca“ klikom na botun ili prilikom samog pokretanja ili klikom na link
 Link ne vodi na stranicu na koju bi trebao- već „prazan list“.
 Projekt ne koristi niti jednom useState.
 Paragraf na stranici je vidljiva kopija s Wikipedije s oznakama za reference npr. [1]
 Tekst na stranici je besmislen ili gramatički neispravan (Rečenice su nabacane, bez
korištenja interpunkcijskih znakova).
 Projekt je plagijat- kopiran tuđi rad

DOVOLJAN(2)- ocjenu dovoljan dobit će učenik čiji rad zadovoljava sljedeće kriterije:
 Projekt ima samo dvije uređene stranice koje su povezane linkom.
 Header je jednostavan- u njemu stoji samo ime i prezime.
 Projekt je na razini školskog zadatka s vrlo jednostavnom funkcionalnosti.
 Projekt na vrlo jednostavan način koristi useState (kao na vježbi sa sata).
 Elementi u projektu nisu poravnati/centrirani/ raštrkani su po stranici bez reda i
smisla, linkovi stoje bez reda i različiti su na svakoj stranici.
 Postavljena je boja pozadine, ali ostale boje nisu usklađene/font je ostao
nepromijenjen, uloženo je minimalno truda u App.css.
 Ima elemenata koji nisu opisani u dokumentaciji.
 Dokumentacija je pisana bez reda i nečitko, učenik nije pazio na pravopis ni u
dokumentaciji, a ni u projektu.
 Učenik ne zna objasniti određeni dio svog koda i ne zna koja je njegova
funkcionalnost u programu.

DOBAR (3)- ocjenu dobar dobit će učenik čiji rad zadovoljava sljedeće kriterije:
 Projekt ima tri stranice u mapi Components.
 Projekt je malo kompliciraniji školski zadatak .
 Projekt osim useState koristi i useRef hook (za fokus) ili useEffect hook (vrlo slično
vježbi sa sata).
 Header je posebno naglašen i u njemu se nalazi ime i prezime učenika.

3
Upute za izradu JSRS projekta 11. svibnja.2022.

 Objekti su dobro raspoređeni po sučelju i elementima su postavljene barem boje

(pozadine ili teksta), linkovi su poravnati kao i slike.
 Vidi se razlika u boji linka između stranice koja je posjećena ili se trenutno nalazi
ispod pokazivača.
 Dokumentacija je potpuna što se tiče elemenata na sučelju (svi su opisani), ali je
napisana bez reda i nečitko, učenik nije pazio na pravopis u projektu i
dokumentaciji.
VRLO DOBAR (4)- ocjenu vrlo dobar dobit će učenik čiji rad zadovoljava sljedeće kriterije:
 Projekt ima četiri stranice u mapi Components, sve četiri su dobro osmišljene-
sadržajima (slikama, linkovima, hipervezama itd.).
 Projekt je kompleksniji i puno bolje sređen od stanica kakve bi radili na satu.
 Objekti su smisleno postavljeni po sučelju te su uređeni bojom, fontom, pozadinom
itd, tekst upotpunjuje slike te postavljene hiperveze .
 Određeni dijelovi stranice mijenjaju svoj oblik ili boju prilikom prelaska mišem.
 Moguće je doći do neke stranice i klikom na sliku (npr. Ikona instagrama vodi na
službeni instagram profil vašeg omiljenog glumca).
 Projekt ima header i footer, footer je baš na dnu stranice.
 Header sadrži ime i prezime učenika, naglašen je, uz njega tu je i tema projekta.
 Footer je na dnu stranice, u njemu stoji Copyright- sva prava pridržana 2021.S
(pogledajte na nekim službenim stranicama kako to izgleda za ideju).
 Dokumentacija je potpuna, obuhvaća sve elemente na sučelju, napisana je s redom
i čitko, učenik na pojedinim mjestima nije pazio na pravopis.
 U barem jednom dijelu programa koristi se props da bi se vrijednosti pohranjene i
varijablu ili objekt prenijele u drugu komponentu (i tamo ispisale).
 Učenik koristi useState, useRef i useEffect u svom projektu, ispisuje podatke koji su
preko propsa preneseni u komponentu i sprema ih u state.

ODLIČAN (5)- ocjenu odličan dobit će učenik čiji rad zadovoljava sljedeće kriterije:
 Projekt ima četiri function komponente u projektu i jednu class komponentu.
 Projekt je dosta kompleksan i vidljivo je da je učenik uložio dosta truda u njegov
izgled, linkove, raspored objekata po stranici, pomno sažet tekst na svakoj stranici
 Projekt ima mapu Context u kojoj je class based komponenta koja služi za
definiranje teme ili login/logout-a.
 U projektu se na „kompleksniji“ način (drugačije nego na satu) koriste useState,
useRef, useEffect i UseContext.
 Projektu su usklađene boje teksta, font i pozadina (hiperveza može biti i slika),
određeni dijelovi stranice mijenjaju svoj oblik ili boju prilikom prelaska mišem
 Header i Footer su mu sređeni (kao po kriterijima za ocjenu vrlo dobar)
 U barem jednom dijelu programa koristi se props da bi se vrijednosti pohranjene i
varijablu ili objekt prenijele u drugu komponentu (i tamo ispisale).
 Dokumentacija je potpuna, detaljna i učenik je pazio na pravopis (u projektu i
dokumentaciji)

4
Upute za izradu JSRS projekta 11. svibnja.2022.

SAVJETI:

 Ne čekajte zadnji dan za izradu projekta jer vam onda možda neću biti u mogućnosti
pomoći, a i možda ga nećete stići ni napraviti (ni ispraviti grešku zbog koje program
ne radi).
 Odredite točnu viziju onoga što želite raditi i konzultirajte se o toj ideji s nastavnicom.
 Provjerite je li vaša vizija obuhvaća kriterije za ocjenu za koju se natječete.
 Projekt radite kontinuirano i cijelo vrijeme vodite računa o tome da je negdje
spremljen (uvijek je dobro imati „backup“).
 Često ga pokrećite i provjeravajte moguće greške. JAVITE SE KAD IH NE ZNATE
RIJEŠITI!
 Dokumentaciju radite paralelno s projektom i pazite na detalje.