Zadanie - panele

Baza do pobrania: >>TUTAJ<<

Cały arkusz do pobrania: >>TUTAJ<<

Pliki graficzne do pobrania: >>TUTAJ<<

Baza  + grafiki

Grafika:

Jak przygotować grafikę w gimp – instrukcja:

Sposób 1: Wypełnienie napisu obrazem (teksturą)

(działa dla napisu, który jest czarny na jasnym tle)

Otwórz obraz z napisem w GIMP-ie.

Otwórz też obraz, który ma być wypełnieniem (tekstura, zdjęcie itp.).

Skopiuj go (Ctrl+C) i wklej do obrazu z napisem (Ctrl+V).

Utwórz z niego nową warstwę (Prawy przycisk → Nowa warstwa).

Upewnij się, że ta warstwa z teksturą jest nad napisem.

Kliknij warstwę z napisem (czarnym tekstem).

Następnie:

Zaznaczenie → Zaznaczenie z koloru

Kliknij czarny napis — powinien się zaznaczyć jego kształt.

Teraz przejdź na warstwę z teksturą (obrazem do wypełnienia).

Gdy zaznaczenie nadal jest aktywne, wybierz:

Zaznaczenie → Odwróć

Potem naciśnij Delete (usuń).

Teraz litery zostaną wypełnione obrazem, a reszta zniknie.

Wyjaśnienia do JS:

Definicja funkcji

function oblicz() { … }

– Tworzy funkcję o nazwie oblicz.
– Funkcja zostanie wywołana np. po kliknięciu przycisku (np. <button onclick=”oblicz()”>).

Pobranie wartości z pól input

let szerokosc = +document.getElementById(„szerokosc”).value;
let dlugosc = +document.getElementById(„dlugosc”).value;

document.getElementById(„szerokosc”) – znajduje element HTML o id=”szerokosc” (np. <input id=”szerokosc”>).
.value – pobiera tekst wpisany przez użytkownika (zawsze jako ciąg znaków, np. „5”).
+ przed wyrażeniem – konwertuje tekst na liczbę (np. „5” → 5).

Jeśli pole jest puste → +”” → 0

Pobranie elementów HTML

const wynik = document.getElementById(„wynik”);
const typLaminowane = document.getElementById(„laminowane”);
const typWinylowe = document.getElementById(„winylowe”);
const typDeska = document.getElementById(„deska”);

Pobiera elementy HTML:

wynik – prawdopodobnie <div> lub <p>, gdzie będzie wyświetlony wynik.
laminowane, winylowe, deska – to pola wyboru (radio buttons) typu:
<input type=”radio” id=”laminowane” name=”typ”>

(Ważne: wszystkie radio buttony muszą mieć tę samą wartość name, by działało poprawne wybieranie.)

Sprawdzenie, czy pola nie są puste

if (szerokosc == ” || dlugosc == ”) {
wynik.innerHTML = „Wprowadź poprawne dane”;
}

Sprawdza, czy szerokosc lub dlugosc są puste.

Obliczenie pola powierzchni

let pole = dlugosc * szerokosc;

Mnoży długość przez szerokość → daje pole w metrach kwadratowych.

Ustawienie ceny w zależności od typu podłogi

let cena = 0
if (typLaminowane.checked) {
cena = 12 * pole;
}
if (typWinylowe.checked) {
cena = 14 * pole;
}
if (typDeska.checked) {
cena = 18 * pole;
}

cena zaczyna od 0.
Sprawdzane są radio buttony:

.checked → true, jeśli użytkownik zaznaczył ten przycisk.

Ceny:

Laminowane: 12 zł/m²
Winylowe: 14 zł/m²
Deska: 18 zł/m²

Wyświetlenie wyniku
wynik.innerHTML = `Pole powierzchni pomieszczenia: ${pole}, koszt montażu ${cena}`;

Wstawia tekst do elementu wynik (np. <div id=”wynik”></div>).
Używa template literals (`tekst ${zmienna}`).

Przykład wyniku:

Pole powierzchni pomieszczenia: 20, koszt montażu 240