` s `id="quote"` | | Područje poruka | Prikazuje status i poruke o uspjehu | `

` s `id="message"` | | Tekstualni unos | Mjesto gdje igrači upisuju citat | `` s `id="typed-value"` | | Gumb za početak | Započinje igru | `` s `id="start"` | **Razumijevanje strukture sučelja:** - **Organizira** sadržaj logično od vrha prema dolje - **Dodjeljuje** jedinstvene ID-ove elementima za ciljanje u JavaScriptu - **Pruža** jasnu vizualnu hijerarhiju za bolji korisnički doživljaj - **Uključuje** semantičke HTML elemente za pristupačnost Svaki od tih elemenata trebat će ID-ove kako bismo mogli raditi s njima u našem JavaScriptu. Također ćemo dodati reference na CSS i JavaScript datoteke koje ćemo kreirati. Kreirajte novu datoteku pod nazivom `index.html`. Dodajte sljedeći HTML: ```html

Typing game!

Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!

Start ``` **Razlaganje onoga što ova HTML struktura postiže:** - **Povezuje** CSS stilsku datoteku u `` za stilizaciju - **Kreira** jasan naslov i upute za korisnike - **Postavlja** rezervirane odlomke s određenim ID-ovima za dinamički sadržaj - **Uključuje** polje za unos s atributima za pristupačnost - **Pruža** gumb za početak igre - **Učitava** JavaScript datoteku na kraju za optimalne performanse ### Pokretanje aplikacije Često testiranje vaše aplikacije tijekom razvoja pomaže vam da rano uočite probleme i vidite svoj napredak u stvarnom vremenu. Live Server je neprocjenjiv alat koji automatski osvježava vaš preglednik kad god spremite promjene, čineći razvoj mnogo učinkovitijim. Uvijek je najbolje razvijati iterativno kako biste vidjeli kako stvari izgledaju. Pokrenimo našu aplikaciju. Postoji sjajan dodatak za Visual Studio Code pod nazivom [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) koji će i hostati vašu aplikaciju lokalno i osvježavati preglednik svaki put kad spremite. **Instalirajte [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) slijedeći poveznicu i klikom na Instaliraj:** **Što se događa tijekom instalacije:** - **Otvara** vaš preglednik za pokretanje Visual Studio Code-a - **Vodi** vas kroz proces instalacije dodatka - **Može zahtijevati** ponovno pokretanje Visual Studio Code-a za dovršetak postavljanja **Nakon instalacije, u Visual Studio Code-u, kliknite Ctrl-Shift-P (ili Cmd-Shift-P) za otvaranje palete naredbi:** **Razumijevanje palete naredbi:** - **Pruža** brz pristup svim naredbama VS Code-a - **Pretražuje** naredbe dok tipkate - **Nudi** prečace za brži razvoj **Upišite "Live Server: Open with Live Server":** **Što Live Server radi:** - **Pokreće** lokalni razvojni server za vaš projekt - **Automatski** osvježava preglednik kada spremite datoteke - **Poslužuje** vaše datoteke s lokalnog URL-a (obično `localhost:5500`) **Otvorite preglednik i navigirajte na `https://localhost:5500`:** Sada biste trebali vidjeti stranicu koju ste kreirali! Dodajmo malo funkcionalnosti. ## Dodavanje CSS-a Sada učinimo da sve izgleda dobro! Vizualna povratna informacija bila je ključna za korisnička sučelja od ranih dana računalstva. Osamdesetih godina istraživači su otkrili da trenutna vizualna povratna informacija dramatično poboljšava performanse korisnika i smanjuje greške. Upravo to ćemo stvoriti. Naša igra mora biti kristalno jasna o tome što se događa. Igrači bi odmah trebali znati koju riječ trebaju upisati, a ako naprave grešku, trebali bi je odmah vidjeti. Kreirajmo jednostavno, ali učinkovito stiliziranje: Kreirajte novu datoteku pod nazivom `style.css` i dodajte sljedeću sintaksu. ```css /* inside style.css */ .highlight { background-color: yellow; } .error { background-color: lightcoral; border: red; } ``` **Razumijevanje ovih CSS klasa:** - **Ističe** trenutnu riječ žutom pozadinom za jasnu vizualnu pomoć - **Signalizira** greške u tipkanju svijetlom koraljnom bojom pozadine - **Pruža** trenutnu povratnu informaciju bez ometanja korisnikovog tipkanja - **Koristi** kontrastne boje za pristupačnost i jasnu vizualnu komunikaciju ✅ Kada je riječ o CSS-u, možete oblikovati svoju stranicu kako god želite. Odvojite malo vremena i učinite stranicu privlačnijom: - Odaberite drugačiji font - Obojite naslove - Promijenite veličinu elemenata ## JavaScript Sada dolazi zanimljiv dio! 🎉 Imamo strukturu HTML-a i stilizaciju CSS-a, ali trenutno naša igra izgleda kao prekrasan automobil bez motora. JavaScript će biti taj motor - on je ono što sve zapravo pokreće i reagira na radnje igrača. Ovdje ćete vidjeti kako vaše stvaranje oživljava. Krenut ćemo korak po korak kako ništa ne bi bilo previše zbunjujuće: | Korak | Svrha | Što ćete naučiti | |-------|-------|------------------| | [Kreiranje konstanti](../../../../4-typing-game/typing-game) | Postavljanje citata i referenci na DOM | Upravljanje varijablama i odabir DOM-a | | [Slušač događaja za početak igre](../../../../4-typing-game/typing-game) | Rukovanje inicijalizacijom igre | Rukovanje događajima i ažuriranje sučelja | | [Slušač događaja za tipkanje](../../../../4-typing-game/typing-game) | Obrada korisničkog unosa u stvarnom vremenu | Validacija unosa i dinamična povratna informacija | **Ovaj strukturirani pristup pomaže vam:** - **Organizirati** vaš kod u logične, upravljive sekcije - **Graditi** funkcionalnost postupno za lakše otklanjanje grešaka - **Razumjeti** kako različiti dijelovi vaše aplikacije međusobno djeluju - **Kreirati** obrasce koji se mogu ponovno koristiti za buduće projekte Ali prvo, kreirajte novu datoteku pod nazivom `script.js`. ### Dodavanje konstanti Prije nego što krenemo u akciju, prikupimo sve naše resurse! Baš kao što NASA-ina kontrola misije postavlja sve svoje sustave za praćenje prije lansiranja, puno je lakše kada imate sve pripremljeno i spremno. To nas spašava od traženja stvari kasnije i pomaže u sprječavanju tipfelera. Evo što prvo trebamo postaviti: | Tip podataka | Svrha | Primjer | |--------------|-------|---------| | Niz citata | Pohranjuje sve moguće citate za igru | `['Citat 1', 'Citat 2', ...]` | | Niz riječi | Razdvaja trenutni citat na pojedinačne riječi | `['Kad', 'imaš', '...', ...]` | | Indeks riječi | Prati koju riječ igrač trenutno tipka | `0, 1, 2, 3...` | | Vrijeme početka | Izračunava proteklo vrijeme za bodovanje | `Date.now()` | **Također ćemo trebati reference na naše UI elemente:** | Element | ID | Svrha | |---------|----|-------| | Tekstualni unos | `typed-value` | Mjesto gdje igrači tipkaju | | Prikaz citata | `quote` | Prikazuje citat za tipkanje | | Područje poruka | `message` | Prikazuje obavijesti o statusu | ```javascript // inside script.js // all of our quotes const quotes = [ 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', 'There is nothing more deceptive than an obvious fact.', 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', 'I never make exceptions. An exception disproves the rule.', 'What one man can invent another can discover.', 'Nothing clears up a case so much as stating it to another person.', 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', ]; // store the list of words and the index of the word the player is currently typing let words = []; let wordIndex = 0; // the starting time let startTime = Date.now(); // page elements const quoteElement = document.getElementById('quote'); const messageElement = document.getElementById('message'); const typedValueElement = document.getElementById('typed-value'); ``` **Razlaganje što ovaj kod za postavljanje postiže:** - **Pohranjuje** niz citata Sherlocka Holmesa koristeći `const` jer se citati neće mijenjati - **Inicijalizira** varijable za praćenje koristeći `let` jer će se te vrijednosti mijenjati tijekom igre - **Hvata** reference na DOM elemente koristeći `document.getElementById()` za učinkoviti pristup - **Postavlja** temelje za svu funkcionalnost igre s jasnim, opisnim nazivima varijabli - **Organizira** povezane podatke i elemente logično radi lakšeg održavanja koda ✅ Slobodno dodajte još citata u svoju igru > 💡 **Savjet**: Možemo dohvatiti elemente kad god želimo u kodu koristeći `document.getElementById()`. Budući da ćemo se često referirati na te elemente, izbjeći ćemo tipografske pogreške s literalima stringova koristeći konstante. Okviri poput [Vue.js](https://vuejs.org/) ili [React](https://reactjs.org/) mogu vam pomoći bolje upravljati centralizacijom vašeg koda. > **Zašto ovaj pristup tako dobro funkcionira:** - **Sprječava** pravopisne pogreške pri višestrukom referiranju na elemente - **Poboljšava** čitljivost koda s opisnim nazivima konstanti - **Omogućuje** bolju podršku IDE-a s automatskim dovršavanjem i provjerom pogrešaka - **Olakšava** refaktoriranje ako se ID-ovi elemenata kasnije promijene Odvojite trenutak da pogledate video o korištenju `const`, `let` i `var` [](https://youtube.com/watch?v=JNIXfGiDWM8 "Vrste varijabli") > 🎥 Kliknite na sliku iznad za video o varijablama. ### Dodajte logiku za početak Ovdje sve dolazi na svoje mjesto! 🚀 Upravo ćete napisati svoj prvi pravi event listener, a postoji nešto vrlo zadovoljavajuće u tome da vidite kako vaš kod reagira na klik gumba. Razmislite o tome: negdje vani, igrač će kliknuti gumb "Start", a vaš kod mora biti spreman za njega. Nemamo pojma kada će kliknuti - možda odmah, možda nakon što popije kavu - ali kad to učini, vaša igra oživljava. Kada korisnik klikne `start`, trebamo odabrati citat, postaviti korisničko sučelje i postaviti praćenje za trenutnu riječ i vrijeme. Ispod je JavaScript koji trebate dodati; o njemu ćemo raspravljati odmah nakon bloka skripte. ```javascript // at the end of script.js document.getElementById('start').addEventListener('click', () => { // get a quote const quoteIndex = Math.floor(Math.random() * quotes.length); const quote = quotes[quoteIndex]; // Put the quote into an array of words words = quote.split(' '); // reset the word index for tracking wordIndex = 0; // UI updates // Create an array of span elements so we can set a class const spanWords = words.map(function(word) { return `${word} `}); // Convert into string and set as innerHTML on quote display quoteElement.innerHTML = spanWords.join(''); // Highlight the first word quoteElement.childNodes[0].className = 'highlight'; // Clear any prior messages messageElement.innerText = ''; // Setup the textbox // Clear the textbox typedValueElement.value = ''; // set focus typedValueElement.focus(); // set the event handler // Start the timer startTime = new Date().getTime(); }); ``` **Razlaganje koda na logične dijelove:** **📊 Postavljanje praćenja riječi:** - **Odabire** nasumični citat koristeći `Math.floor()` i `Math.random()` za raznolikost - **Pretvara** citat u niz pojedinačnih riječi koristeći `split(' ')` - **Resetira** `wordIndex` na 0 jer igrači počinju s prvom riječi - **Priprema** stanje igre za novi krug **🎨 Postavljanje i prikaz korisničkog sučelja:** - **Stvara** niz `` elemenata, omotavajući svaku riječ za pojedinačno stiliziranje - **Spaja** span elemente u jedan string za učinkovito ažuriranje DOM-a - **Ističe** prvu riječ dodavanjem CSS klase `highlight` - **Briše** sve prethodne poruke igre kako bi osigurao čistu ploču **⌨️ Priprema tekstualnog polja:** - **Briše** postojeći tekst u polju za unos - **Postavlja fokus** na tekstualno polje kako bi igrači mogli odmah početi tipkati - **Priprema** područje unosa za novu sesiju igre **⏱️ Inicijalizacija mjerača vremena:** - **Hvata** trenutni vremenski pečat koristeći `new Date().getTime()` - **Omogućuje** točan izračun brzine tipkanja i vremena završetka - **Započinje** praćenje performansi za sesiju igre ### Dodajte logiku za tipkanje Ovdje se bavimo srcem naše igre! Ne brinite ako vam se na prvi pogled čini previše - proći ćemo kroz svaki dio, i na kraju ćete vidjeti kako je sve logično. Ono što ovdje gradimo prilično je sofisticirano: svaki put kad netko upiše slovo, naš kod će provjeriti što je upisano, dati povratnu informaciju i odlučiti što dalje. To je slično načinu na koji su rani procesori teksta poput WordStara iz 1970-ih pružali povratne informacije u stvarnom vremenu za tipkače. ```javascript // at the end of script.js typedValueElement.addEventListener('input', () => { // Get the current word const currentWord = words[wordIndex]; // get the current value const typedValue = typedValueElement.value; if (typedValue === currentWord && wordIndex === words.length - 1) { // end of sentence // Display success const elapsedTime = new Date().getTime() - startTime; const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; messageElement.innerText = message; } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { // end of word // clear the typedValueElement for the new word typedValueElement.value = ''; // move to the next word wordIndex++; // reset the class name for all elements in quote for (const wordElement of quoteElement.childNodes) { wordElement.className = ''; } // highlight the new word quoteElement.childNodes[wordIndex].className = 'highlight'; } else if (currentWord.startsWith(typedValue)) { // currently correct // highlight the next word typedValueElement.className = ''; } else { // error state typedValueElement.className = 'error'; } }); ``` **Razumijevanje toka logike tipkanja:** Ova funkcija koristi pristup "vodopada", provjeravajući uvjete od najkonkretnijih do najopćenitijih. Razmotrimo svaki scenarij: ```mermaid flowchart TD A[Player types character] --> B[Get current word and typed value] B --> C{Quote complete?} C -->|Yes| D[Show completion message with time] C -->|No| E{Word complete with space?} E -->|Yes| F[Clear input, move to next word, update highlight] E -->|No| G{Typing correctly so far?} G -->|Yes| H[Remove error styling] G -->|No| I[Show error styling] ``` **🏁 Završetak citata (Scenarij 1):** - **Provjerava** odgovara li upisana vrijednost trenutnoj riječi I jesmo li na posljednjoj riječi - **Izračunava** proteklo vrijeme oduzimanjem vremena početka od trenutnog vremena - **Pretvara** milisekunde u sekunde dijeljenjem s 1.000 - **Prikazuje** čestitku s vremenom završetka **✅ Završetak riječi (Scenarij 2):** - **Otkriva** završetak riječi kada unos završi razmakom - **Provjerava** da li obrezani unos točno odgovara trenutnoj riječi - **Briše** polje za unos za sljedeću riječ - **Prelazi** na sljedeću riječ povećanjem `wordIndex` - **Ažurira** vizualno isticanje uklanjanjem svih klasa i isticanjem nove riječi **📝 Tipkanje u tijeku (Scenarij 3):** - **Provjerava** počinje li trenutna riječ s onim što je dosad upisano - **Uklanja** sve stiliziranje grešaka kako bi pokazao da je unos točan - **Omogućuje** nastavak tipkanja bez prekida **❌ Stanje greške (Scenarij 4):** - **Pokreće** se kada upisani tekst ne odgovara očekivanom početku riječi - **Primjenjuje** CSS klasu greške za trenutnu vizualnu povratnu informaciju - **Pomaže** igračima brzo identificirati i ispraviti pogreške ## Testirajte svoju aplikaciju Pogledajte što ste postigli! 🎉 Upravo ste izgradili pravu, funkcionalnu igru tipkanja od nule koristeći programiranje temeljeno na događajima. Odvojite trenutak da to cijenite - ovo nije mali podvig! Sada dolazi faza testiranja! Hoće li raditi kako je očekivano? Jesmo li nešto propustili? Evo stvari: ako nešto ne radi savršeno odmah, to je potpuno normalno. Čak i iskusni programeri redovito pronalaze greške u svom kodu. To je sve dio procesa razvoja! Kliknite na `start` i počnite tipkati! Trebalo bi izgledati otprilike kao animacija koju smo vidjeli prije.  **Što testirati u vašoj aplikaciji:** - **Provjerava** da klik na Start prikazuje nasumični citat - **Potvrđuje** da tipkanje ispravno ističe trenutnu riječ - **Provjerava** da se stiliziranje grešaka pojavljuje za netočno tipkanje - **Osigurava** da završavanje riječi ispravno pomiče isticanje - **Testira** da završetak citata prikazuje poruku o završetku s vremenom **Uobičajeni savjeti za otklanjanje grešaka:** - **Provjerite** konzolu preglednika (F12) za JavaScript pogreške - **Provjerite** da svi nazivi datoteka točno odgovaraju (osjetljivo na velika i mala slova) - **Osigurajte** da Live Server radi i pravilno se osvježava - **Testirajte** različite citate kako biste provjerili radi li nasumični odabir --- ## GitHub Copilot Agent Challenge 🎮 Koristite Agent način rada za dovršavanje sljedećeg izazova: **Opis:** Proširite igru tipkanja implementacijom sustava težine koji se prilagođava na temelju performansi igrača. Ovaj izazov pomoći će vam da vježbate napredno rukovanje događajima, analizu podataka i dinamičko ažuriranje korisničkog sučelja. **Zadatak:** Kreirajte sustav prilagodbe težine za igru tipkanja koji: 1. Prati brzinu tipkanja igrača (riječi po minuti) i postotak točnosti 2. Automatski se prilagođava na tri razine težine: Lako (jednostavni citati), Srednje (trenutni citati), Teško (složeni citati s interpunkcijom) 3. Prikazuje trenutnu razinu težine i statistiku igrača na korisničkom sučelju 4. Implementira brojač serija koji povećava težinu nakon 3 uzastopne dobre izvedbe 5. Dodaje vizualne povratne informacije (boje, animacije) za označavanje promjena težine Dodajte potrebne HTML elemente, CSS stilove i JavaScript funkcije za implementaciju ove značajke. Uključite odgovarajuće rukovanje pogreškama i osigurajte da igra ostane pristupačna s odgovarajućim ARIA oznakama. Saznajte više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje. ## 🚀 Izazov Spremni za podizanje vaše igre tipkanja na višu razinu? Pokušajte implementirati ove napredne značajke kako biste produbili svoje razumijevanje rukovanja događajima i manipulacije DOM-om: **Dodajte više funkcionalnosti:** | Značajka | Opis | Vještine koje ćete vježbati | |----------|------|----------------------------| | **Kontrola unosa** | Onemogućite `input` event listener nakon završetka i ponovno ga omogućite kada se klikne gumb | Upravljanje događajima i kontrola stanja | | **Upravljanje stanjem UI-a** | Onemogućite tekstualno polje kada igrač završi citat | Manipulacija svojstvima DOM-a | | **Modalni dijalog** | Prikazivanje modalnog dijaloškog okvira s porukom o uspjehu | Napredni UI obrasci i pristupačnost | | **Sustav najboljih rezultata** | Pohranite najbolje rezultate koristeći `localStorage` | API-ji za pohranu u pregledniku i trajnost podataka | **Savjeti za implementaciju:** - **Istražite** `localStorage.setItem()` i `localStorage.getItem()` za trajnu pohranu - **Vježbajte** dodavanje i uklanjanje event listenera dinamički - **Istražite** HTML dijaloške elemente ili CSS modalne obrasce - **Razmotrite** pristupačnost pri onemogućavanju i omogućavanju kontrola obrasca ## Kviz nakon predavanja [Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/22) ## Pregled i samostalno učenje Pročitajte o [svim dostupnim događajima](https://developer.mozilla.org/docs/Web/Events) za programere putem web preglednika i razmotrite scenarije u kojima biste koristili svaki od njih. ## Zadatak [Kreirajte novu igru tipkanja](assignment.md) --- **Odricanje od odgovornosti**: Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.