commit 6c1a85bcf15730070f824264b5fea42f540b7fc8 Author: Gašper Dobrovoljc Date: Fri Jan 6 21:40:41 2023 +0100 Initial commit diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..a20502b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "all" +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..8e584e0 --- /dev/null +++ b/README.md @@ -0,0 +1,257 @@ +# Naloga 1 + +Izdelali boste spletno stran, ki iz strežnika naloži seznam uporabnikov in jih prikaže v tabeli. + +Če se vam vmes kdaj zatakne, je vsa koda na voljo na tem repozitoriju. + +![Slika spletne strani](screenshots/final.png) + +## Navodila za izdelavo + +### Osnovna postavitev + +- Ustvarimo datoteke `index.html`, `style.css` in `script.js`. +- Generiramo osnovno postavitev spletne strani (v VS Code pritisnemo `!` in `Enter`). + + ```html + + + + + Naloga 1 + + + + ``` + +- V datoteko `index.html` povežemo `style.css` tako, v `` dodamo vrstico + + ```html + + ``` + +- Nato na enak način povežemo še `script.js`: + + ```html + + ``` + +### HTML + +- V `` spletne strani dodamo naslov `

` in tabelo (``) z idjem `id="users"`. +- Nato v tabelo dodamo še znački za glavo (``) in telo (``) tabele. +- Podatki, ki jih bomo prikazovali o uporabnikih so `id`, `ime`, `uporabniško ime` in `email`, zato v glavo tabele dodamo ` + ``` + +- Nato dodamo vsebino z `innerHTML` +- Da lahko besedilo napišemo v več vrstic, namesto navadnih narekovajev uporabimo backticke `` ` `` (AltGr + 7). +- Poleg tega lahko spremenljivke vstavljamo direktno v besedilo z `${spremenljivka}`. + + ```js + row.innerHTML = ` + + + + + `; + ``` + +- Enaka stvar v html-ju: + + ```html + + + + + + + ``` + +- Poiščemo telo tabele z idjem `users` (to kodo dodamo čisto na vrhu `script.js`): + + ```js + const table = document.querySelector('table#users > tbody'); + ``` + +- Na koncu dodamo vrstico v `tbody`: + + ```js + table.appendChild(row); + ``` + +- Spletna stran bi sedaj morala izgledati tako: + +![Spletna stran JavaScipt](screenshots/javascript.png) + +### CSS + +- Pojdite na spletno stran [fonts.google.com](https://fonts.google.com) in si izberite pisavo. +- Kliknite nanjo in potem kliknite na `Select Regular 400` +- Kopirajte vrstico, ki se začne z `@import url('...');` in jo prilepite na vrh `style.css`. +- Nato dodajte vrstico, ki se začne s `font-family: ...;` v značko `body` + + ```css + @import url('...'); + + body { + font-family: ...; + } + ``` + +- Bodyju nastavite `margin` na `0` in višino na `100vh` (100% višina zaslona) +- Sledi najtežja stvar v css-su - centriranje elementov na spletni strani +- Eden on načinov, kako lahko to dosežemo je s pomočjo flexboxa (še vedno v znački body) + + ```css + body { + ... + + display: flex; // Nastavimo prikaz na flex + flex-direction: column; // Elementi naj bojo v stolpcu - en nad drugim + align-items: center; // Elemente centriramo levo-desno + justify-content: center; // Elemente centriramo gor-dol + } + ``` + +- Celicam tabele dodamo obrobe (td - celice v telesu, th - celice v glavi) in `6px` prostora v vsebini celic + + ```css + #users td, + th { + border: 1px solid black; + padding: 6px; + } + ``` + +- Nazadnje še centriramo id-je uporabnikov v prvem stolpcu in jih naredimo krepke + + ```css + #users td:first-child { + text-align: center; + font-weight: bold; + } + ``` + +- Če spletna stran izgleda podobna tej na sliki, potem vam je uspelo + +![Slika spletne strani](screenshots/final.png) diff --git a/index.html b/index.html new file mode 100644 index 0000000..1db6d17 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + Naloga 1 + + + + + +

Users

+ +
` za vsakega od njih. + +- Zaženite `Live Server` ali pa odprite `index.html` v brskalniku in spletna stran bi morala izgledati tako: + +![Slika HTML](screenshots/html.png) + +### JavaScript + +V `script.js` bomo napisali kodo, ki bo iz strežnika naložila seznam uporabnikov in jih dodala v html tabelo. + +- Ustvarimo novo asinhrono funkcijo `getUsers()`: + + ```js + async function getUsers() {} + ``` + +#### Nalaganje podatkov s strežnika + +- Za nalaganje podatkov s strežnika uporablajmo vgrajeno funkcijo `fetch()`. + +- Beseda `await` počaka na odgovor s strežnika, medtem ko ostala koda na spletni strani še vedno teče. + +- Naložimo podatke s strežnika in odgovor shranimo v konstanto `response`: + + ```js + const response = await fetch('https://jsonplaceholder.typicode.com/users'); + ``` + +- Odgovor dobimo v obliki JSONa (JavaScript Object Notation): + + - Kvadratni oklepaji `[ ]` predstavljajo **seznam** + - Zaviti oklepaji `{ }` predstavljajo **objekt** + + ```json + [ + { + "id": 1, + "name": "Leanne Graham", + "username": "Bret", + "email": "Sincere@april.biz" + }, + { + "id": 2, + "name": "Ervin Howell", + "username": "Antonette", + "email": "Shanna@melissa.tv" + }, + { + "id": 3, + "name": "Clementine Bauch", + "username": "Samantha", + "email": "Nathan@yesenia.net" + }, + ... + ] + ``` + +- Pretvorimo JSON v JavaScript objekt s klicom funkcije `json()` in ga shranimo v konstanto `users`: + + ```js + const users = await response.json(); + ``` + +- `users` sedaj izgleda tako: + + ```js + const users = [ + { + id: 1, + name: 'Leanne Graham', + username: 'Bret', + email: 'Sincere@april.biz', + }, + { + id: 2, + name: 'Ervin Howell', + username: 'Antonette', + email: 'Shanna@melissa.tv', + }, + { + id: 3, + name: 'Clementine Bauch', + username: 'Samantha', + email: 'Nathan@yesenia.net', + }, + ... + ]; + ``` + +- Vsebino spremenljivke lahko izpišete v konzolo z funkcijo + + ```js + console.log(users); + ``` + +- Do konzole dostopate: `Desni klik` > `inspect` > `console` + +#### Vstavljanje podatkov v tabelo + +Sedaj ko imamo želene podatke v spremenljivki `users`, jih moramo vstaviti v tabelo. + +- Z zanko `for` zaženemo kodo za vsakega uporabnika + +- Spremenljivka `user` se vsak krog spremeni na naslednjega v seznamu `users` + + ```js + for (const user of users) { + // Vso nadalnjo kodo pišite sem notri + } + ``` + +- Da ustvarimo novo vrstico v tabeli uporabimo funkcijo + + ```js + const row = document.createElement('tr'); + ``` + +- Enaka stvar v html-ju: + + ```html +
${user.id}${user.name}${user.username}${user.email}
(vrednost user.id)(vrednost user.name)(vrednost user.username)(vrednost user.email)
+ + + + + + + +
IDNameUsernameEmail
+ + diff --git a/screenshots/final.png b/screenshots/final.png new file mode 100644 index 0000000..0a6ac13 Binary files /dev/null and b/screenshots/final.png differ diff --git a/screenshots/html.png b/screenshots/html.png new file mode 100644 index 0000000..9332f5f Binary files /dev/null and b/screenshots/html.png differ diff --git a/screenshots/javascript.png b/screenshots/javascript.png new file mode 100644 index 0000000..c6a299e Binary files /dev/null and b/screenshots/javascript.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..a93e2d2 --- /dev/null +++ b/script.js @@ -0,0 +1,20 @@ +const table = document.querySelector('table#users > tbody'); + +async function getUsers() { + const response = await fetch('https://jsonplaceholder.typicode.com/users'); + const users = await response.json(); + + for (const user of users) { + const row = document.createElement('tr'); + row.innerHTML = ` + ${user.id} + ${user.name} + ${user.username} + ${user.email} + `; + + table.appendChild(row); + } +} + +getUsers(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..d37aa7a --- /dev/null +++ b/style.css @@ -0,0 +1,28 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); + +body { + margin: 0; + height: 100vh; + + font-family: 'Nunito', sans-serif; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#users { + border-collapse: collapse; +} + +#users td, +th { + border: 1px solid black; + padding: 6px; +} + +#users td:first-child { + font-weight: bold; + text-align: center; +}