Ściąga 📌

<h1>My website</h1>

Największy nagłówek. Tylko raz na stronie – jak tytuł książki.

<h2>Chapter</h2>

Mniejszy nagłówek. Są aż do <h6> (najmniejszy).

<p>Hi, this is text.</p>

Akapit zwykłego tekstu.

<strong>important</strong>

Pogrubia tekst.

<em>interesting</em>

Tekst kursywą (pochylony).

<a href="https://example.com">Click</a>

Link. W href jest adres, dokąd ma prowadzić.

<img src="dog.jpg" alt="My dog">

Obrazek. src = plik z obrazkiem, alt = opis na wypadek, gdyby się nie załadował.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

Lista z kropkami. Każdy element to <li>.

<ol>
  <li>step 1</li>
  <li>step 2</li>
</ol>

Lista numerowana – numery dodaje sama przeglądarka.

<div class="card">...</div>

Pudełko do grupowania rzeczy, które do siebie pasują. Nazwę klasy wymyślasz sam(a).

<!-- note to myself -->

Komentarz. Przeglądarka go ignoruje – jest tylko dla ciebie.

h1 {
  color: red;
}

Wszystkie nagłówki <h1> będą czerwone.

.card {
  background: yellow;
}

Wszystko z class="card" dostanie żółte tło. Kropka = szukam po klasie.

p {
  font-size: 20px;
}

Rozmiar czcionki akapitów. Większa liczba = większy tekst.

body {
  font-family: Arial;
}

Czcionka dla całej strony.

.card {
  padding: 16px;
}

Wewnętrzny odstęp – wypełnienie między treścią a krawędzią pudełka.

.card {
  margin: 16px;
}

Zewnętrzny odstęp – dystans od rzeczy wokół.

.card {
  border: 2px solid black;
}

Ramka: grubość, styl linii i kolor.

.card {
  border-radius: 12px;
}

Zaokrąglone rogi. Większa liczba = bardziej okrągłe.

.menu {
  display: flex;
  gap: 10px;
}

Elementy w środku ustawiają się obok siebie z odstępem 10px. Magiczny trik na menu!

img {
  width: 200px;
}

Szerokość obrazka. Wysokość dopasuje się sama, żeby nie był spłaszczony.

const name = 'Kate';

Zmienna – pudełko z etykietą, w którym coś przechowujesz.

let points = 0;
points = points + 1;

let to pudełko, które możesz zmieniać. Tu dodajemy punkt.

alert('Hi!');

Wyskakuje okienko z wiadomością. Dobre na pierwsze eksperymenty.

console.log('it works');

Wypisuje wiadomość do konsoli (F12) – tajne okno dla programistów.

document.querySelector('h1')

Znajduje pierwszy <h1> na stronie, żebyś mógł(a) z nim pracować.

element.textContent = 'New text';

Podmienia tekst wewnątrz znalezionego elementu.

element.addEventListener('click', () => {
  alert('Clicked!');
});

Gdy ktoś kliknie element, uruchamia się to, co jest w środku.

if (points > 10) {
  alert('You won!');
}

Warunek: kod w środku działa tylko wtedy, gdy to w nawiasie jest prawdą.

element.classList.toggle("dark");

Dodaje klasę, gdy jej brakuje – i usuwa, gdy jest. Dokładnie tak działa tryb ciemny.

const r = await fetch(address);

Wyślij zapytanie do API i poczekaj (await) na odpowiedź.

const data = await r.json();

Zamień odpowiedź na obiekt, z którym możesz pracować.

data.current_weather.temperature

Wyciągnij wartość z obiektu kropkami – jak z każdego innego obiektu.

await fetch('/ask', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ question }),
});

POST = wyślij dane NA serwer. W body jest obiekt zamieniony na tekst.

{ "city": "Prague", "temperature": 21 }

JSON – wspólny język API. Tekst w cudzysłowach, liczby bez.

JSON.stringify(obj)

Zamień obiekt na tekst JSON (przed wysłaniem).

JSON.parse(text)

Zamień tekst JSON z powrotem na obiekt (po odebraniu).

process.env.AI_KEY

Na serwerze: odczytaj tajny klucz z pliku .env. Klucze nigdy nie trafiają do przeglądarki!

cd my-website

Wejdź do folderu my-website (cd = change directory, zmień folder).

ls

Wypisz, co jest w bieżącym folderze (w Windows: dir).

node server.js

Uruchom plik server.js za pomocą Node.js.

npm install

Pobierz wszystkie paczki, których potrzebuje projekt.

git status

Pokaż, co się zmieniło w projekcie od ostatniego zapisu.

git add .

Przygotuj wszystkie zmiany do zapisu (kropka = wszystko).

git commit -m "Added a menu"

Zapisz zmiany w historii z notatką, co zrobiłeś(a).

git push

Wyślij zapisane zmiany na GitHub.