Initial commit

2023-01-06 21:40:41 +01:00 · 2023-01-06 21:40:41 +01:00 · 6c1a85bcf1
commit 6c1a85bcf1
8 changed files with 332 additions and 0 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}
--- a/README.md
+++ 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
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <title>Naloga 1</title>
+    </head>
+    <body></body>
+  </html>
+  ```
+
+- V datoteko `index.html` povežemo `style.css` tako, v `<head>` dodamo vrstico
+
+  ```html
+  <link rel="stylesheet" href="style.css" />
+  ```
+
+- Nato na enak način povežemo še `script.js`:
+
+  ```html
+  <script defer src="script.js"></script>
+  ```
+
+### HTML
+
+- V `<body>` spletne strani dodamo naslov `<h1>` in tabelo (`<table>`) z idjem `id="users"`.
+- Nato v tabelo dodamo še znački za glavo (`<thead>`) in telo (`<tbody>`) tabele.
+- Podatki, ki jih bomo prikazovali o uporabnikih so `id`, `ime`, `uporabniško ime` in `email`, zato v glavo tabele dodamo `<th>` 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
+  <tr></tr>
+  ```
+
+- 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 = `
+    <td>${user.id}</td>
+    <td>${user.name}</td>
+    <td>${user.username}</td>
+    <td>${user.email}</td>
+  `;
+  ```
+
+- Enaka stvar v html-ju:
+
+  ```html
+  <tr>
+    <td>(vrednost user.id)</td>
+    <td>(vrednost user.name)</td>
+    <td>(vrednost user.username)</td>
+    <td>(vrednost user.email)</td>
+  </tr>
+  ```
+
+- 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)
--- a/index.html
+++ b/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Naloga 1</title>
+
+    <link rel="stylesheet" href="style.css" />
+    <script defer src="script.js"></script>
+  </head>
+  <body>
+    <h1>Users</h1>
+
+    <table id="users">
+      <thead>
+        <th>ID</th>
+        <th>Name</th>
+        <th>Username</th>
+        <th>Email</th>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </body>
+</html>
--- a/screenshots/final.png
+++ b/screenshots/final.png
--- a/screenshots/html.png
+++ b/screenshots/html.png
--- a/screenshots/javascript.png
+++ b/screenshots/javascript.png
--- a/script.js
+++ 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 = `
+    <td>${user.id}</td>
+    <td>${user.name}</td>
+    <td>${user.username}</td>
+    <td>${user.email}</td>
+    `;
+
+    table.appendChild(row);
+  }
+}
+
+getUsers();
--- a/style.css
+++ 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;
+}