Stan aplikacji: zmienne globalne, indeksy, zawijanie

<button id="plus">+1</button>
<button id="reset">Zeruj</button>
<p>Kliknięto: <strong id="wynik">0</strong> razy</p>

let liczbaKlikniec = 0; // stan – poza funkcjami

const wynik = document.getElementById('wynik');

function zwieksz() {
  liczbaKlikniec++;
  wynik.textContent = liczbaKlikniec; // każda zmiana stanu → odświeżenie DOM
}

function wyzeruj() {
  liczbaKlikniec = 0;
  wynik.textContent = liczbaKlikniec;
}

document.getElementById('plus').addEventListener('click', zwieksz);
document.getElementById('reset').addEventListener('click', wyzeruj);

<p>Wypełnij pola i przechodź między nimi klawiszem Tab.</p>
<input placeholder="Imię"> <input placeholder="Nazwisko"> <input placeholder="E-mail"><br>
<input placeholder="Telefon"> <input placeholder="Miasto"> <input placeholder="Kod">
<div id="tlo"><div id="pasek">16%</div></div>

#tlo { width: 100%; background: #ddd; margin-top: 12px; }
#pasek { width: 16%; background: SeaGreen; color: white; padding: 4px 0; text-align: center; }
input { width: 28%; margin: 4px 0; }

let szerokosc = 16; // stan początkowy zgodny z CSS
const pasek = document.getElementById('pasek');

function zwiekszPostep() {
  szerokosc = Math.min(szerokosc + 12, 100); // nigdy ponad 100
  pasek.style.width = szerokosc + '%';
  pasek.textContent = szerokosc + '%';
}

// jedno nasłuchiwanie dla każdego pola – zdarzenie blur = opuszczenie pola
const pola = document.querySelectorAll('input');
for (const pole of pola) {
  pole.addEventListener('blur', zwiekszPostep);
}

<div class="galeria">
  <button id="wstecz">&lt;</button>
  <img id="zdjecie" alt="Zdjęcie 1">
  <button id="dalej">&gt;</button>
</div>
<p id="licznik">1 / 7</p>

.galeria { display: flex; align-items: center; gap: 12px; }
img { width: 260px; height: 140px; border-radius: 8px; }
button { font-size: 20px; padding: 8px 14px; }

// Na egzaminie: obraz.src = numer + '.jpg'. Tu generujemy obrazek, bo plac zabaw nie ma plików.
function adresObrazka(numer) {
  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="260" height="140">' +
    '<rect width="260" height="140" fill="hsl(' + numer * 47 + ' 60% 45%)"/>' +
    '<text x="130" y="85" font-size="36" fill="white" text-anchor="middle" font-family="system-ui">' +
    numer + '.jpg</text></svg>';
  return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
}

const LICZBA_ZDJEC = 7;
let numer = 1; // stan galerii

const zdjecie = document.getElementById('zdjecie');
const licznik = document.getElementById('licznik');

function odswiez() {
  zdjecie.src = adresObrazka(numer);   // na egzaminie: numer + '.jpg'
  zdjecie.alt = 'Zdjęcie ' + numer;
  licznik.textContent = numer + ' / ' + LICZBA_ZDJEC;
}

function nastepne() {
  numer++;
  if (numer > LICZBA_ZDJEC) numer = 1;
  odswiez();
}

function poprzednie() {
  numer--;
  if (numer < 1) numer = LICZBA_ZDJEC;
  odswiez();
}

document.getElementById('dalej').addEventListener('click', nastepne);
document.getElementById('wstecz').addEventListener('click', poprzednie);
odswiez(); // stan początkowy też przechodzi przez tę samą funkcję

<blockquote id="cytat1" onclick="pokazNastepny(1)">„Najlepszy kod to ten, którego nie trzeba pisać.” – Ania</blockquote>
<blockquote id="cytat2" onclick="pokazNastepny(2)">„Testuj na dwóch zestawach danych.” – Bartek</blockquote>
<blockquote id="cytat3" onclick="pokazNastepny(3)">„Nazwy zmiennych czyta się częściej, niż pisze.” – Celina</blockquote>

blockquote { cursor: pointer; background: #fdf3c4; padding: 16px; border-left: 6px solid #d9a800; margin: 0; }
#cytat2, #cytat3 { display: none; } /* na start widoczny tylko pierwszy */

const LICZBA_CYTATOW = 3;

// Styl egzaminacyjny: atrybut onclick="pokazNastepny(2)" w HTML wywołuje tę funkcję
function pokazNastepny(numerKlikniety) {
  let nastepny = numerKlikniety + 1;
  if (nastepny > LICZBA_CYTATOW) nastepny = 1; // po 3 wraca 1

  document.getElementById('cytat' + numerKlikniety).style.display = 'none';
  document.getElementById('cytat' + nastepny).style.display = 'block';
}

<nav>
  <button class="karta-btn" onclick="pokazKarte('klient', this)">Klient</button>
  <button class="karta-btn" onclick="pokazKarte('adres', this)">Adres</button>
  <button class="karta-btn" onclick="pokazKarte('kontakt', this)">Kontakt</button>
</nav>
<section id="klient" class="karta">Imię: <input> Nazwisko: <input></section>
<section id="adres" class="karta">Ulica: <input> Miasto: <input></section>
<section id="kontakt" class="karta">E-mail: <input> Telefon: <input></section>

.karta { display: none; padding: 16px; border: 1px solid #ccc; margin-top: 8px; }
#klient { display: block; } /* stan początkowy: pierwsza karta widoczna */
.karta-btn { background: Crimson; color: white; border: 0; padding: 8px 16px; }

function pokazKarte(idKarty, klikniety) {
  // 1. wszystkim „nieaktywny”
  const karty = document.querySelectorAll('.karta');
  for (const karta of karty) karta.style.display = 'none';

  const przyciski = document.querySelectorAll('.karta-btn');
  for (const przycisk of przyciski) przycisk.style.backgroundColor = 'Crimson';

  // 2. jednemu „aktywny”
  document.getElementById(idKarty).style.display = 'block';
  klikniety.style.backgroundColor = 'Salmon';
}

// Stan początkowy: pierwszy przycisk podświetlony tak samo, jak po kliknięciu
document.querySelector('.karta-btn').style.backgroundColor = 'Salmon';

<nav id="menu">
  <button data-karta="opis">Opis</button>
  <button data-karta="cennik">Cennik</button>
  <button data-karta="galeria">Galeria</button>
</nav>
<section id="opis" class="karta aktywna">Opis produktu…</section>
<section id="cennik" class="karta">Cennik: 49 zł / 89 zł</section>
<section id="galeria" class="karta">[galeria zdjęć]</section>

.karta { display: none; padding: 12px; background: #eef; margin-top: 8px; }
.karta.aktywna { display: block; }
#menu button.aktywny { font-weight: bold; text-decoration: underline; }

const przyciski = document.querySelectorAll('#menu button');

function przelaczKarte(zdarzenie) {
  const klikniety = zdarzenie.target;            // element, który kliknięto
  const idKarty = klikniety.dataset.karta;       // z atrybutu data-karta

  for (const p of przyciski) p.classList.remove('aktywny');
  for (const k of document.querySelectorAll('.karta')) k.classList.remove('aktywna');

  klikniety.classList.add('aktywny');
  document.getElementById(idKarty).classList.add('aktywna');
}

for (const przycisk of przyciski) {
  przycisk.addEventListener('click', przelaczKarte); // ta sama funkcja dla każdego
}
przyciski[0].classList.add('aktywny'); // stan początkowy

<p>Kliknij miniaturę:</p>
<img class="miniatura" data-figura="trojkat" alt="trójkąt" onclick="wybierzFigure(this)">
<img class="miniatura" data-figura="prostokat" alt="prostokąt" onclick="wybierzFigure(this)">
<br>
<img id="duzy" data-figura="trojkat" alt="trójkąt">
<p>
  <label>a (bok / podstawa): <input id="bokA" type="number" value="4"></label>
  <label>b (bok / wysokość): <input id="bokB" type="number" value="3"></label>
  <button onclick="obliczPole()">Oblicz</button>
</p>
<p id="wynik"></p>

.miniatura { width: 60px; height: 40px; cursor: pointer; border: 2px solid transparent; margin-right: 6px; }
#duzy { width: 180px; height: 120px; display: block; margin: 8px 0; }
input[type=number] { width: 60px; }

// Na egzaminie: pliki 1m.bmp / 2m.bmp (miniatury) i 1d.bmp / 2d.bmp (duże). Tu rysujemy figury w SVG.
function rysunek(figura, w, h) {
  const ksztalt = figura === 'trojkat'
    ? '<polygon points="' + (w / 2) + ',5 5,' + (h - 5) + ' ' + (w - 5) + ',' + (h - 5) + '" fill="SteelBlue"/>'
    : '<rect x="5" y="5" width="' + (w - 10) + '" height="' + (h - 10) + '" fill="DarkOrange"/>';
  return 'data:image/svg+xml;utf8,' + encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + h + '">' + ksztalt + '</svg>');
}

const duzy = document.getElementById('duzy');
const miniatury = document.querySelectorAll('.miniatura');
for (const m of miniatury) m.src = rysunek(m.dataset.figura, 60, 40);
duzy.src = rysunek('trojkat', 180, 120); // stan początkowy: trójkąt

function wybierzFigure(miniatura) {
  const figura = miniatura.dataset.figura;
  duzy.src = rysunek(figura, 180, 120);   // na egzaminie: duzy.src = '2d.bmp'
  duzy.dataset.figura = figura;           // zapisujemy stan w DOM
  duzy.alt = miniatura.alt;
}

function obliczPole() {
  const a = parseFloat(document.getElementById('bokA').value);
  const b = parseFloat(document.getElementById('bokB').value);
  let pole;
  // odczyt stanu: która figura jest TERAZ wyświetlona?
  if (duzy.dataset.figura === 'trojkat') {
    pole = 0.5 * a * b;
  } else {
    pole = a * b;
  }
  document.getElementById('wynik').textContent =
    'Pole ' + duzy.alt + 'a: ' + pole; // np. „Pole trójkąta: 6”
}

<p id="cytat"></p>
<button id="nastepny">Następny</button>
<button id="losowy">Losowy</button>
<small id="info"></small>

const cytaty = [
  'Najpierw spraw, by działało. Potem, by było ładne.',
  'Każdy błąd w konsoli to wskazówka, nie wyrok.',
  'Testuj na dwóch zestawach danych.',
  'Nazwa zmiennej to komentarz, którego nie da się pominąć.'
];
let indeks = 0; // stan: który cytat jest widoczny

const cytat = document.getElementById('cytat');
const info = document.getElementById('info');

function odswiez() {
  cytat.textContent = cytaty[indeks];
  info.textContent = 'Cytat ' + (indeks + 1) + ' z ' + cytaty.length; // dla człowieka numerujemy od 1
}

document.getElementById('nastepny').addEventListener('click', () => {
  indeks = (indeks + 1) % cytaty.length; // zawijanie przez modulo
  odswiez();
});

document.getElementById('losowy').addEventListener('click', () => {
  indeks = Math.floor(Math.random() * cytaty.length); // 0 … length-1
  odswiez();
});

odswiez();