Programowanie z Chat GPT
Była potrzeba, wiedziałem, że mogę sobie przypomnieć i w godziny dwie napisać ten kawałek kodu ale wolałem zapytać Chata-GPT, za którego zapłaciłem ostatnio 20$.
Zapytałem - oto dialog, a poniżej działający wynik - czyli kalkulator. A jeszcze niżej kod jaki stworzył.
Powiedziałeś(-aś):
Będziemy programować w js do html5.
ChatGPT powiedział:
Super! Masz już jakiś konkretny projekt na myśli, czy chcesz po prostu poćwiczyć podstawy i zacząć od czegoś prostego? 🚀
Powiedziałeś(-aś):
Napisz mi kawałek kodu w js do HTML5 aby na stronie dało się skalkulować cenę za usługę.
Pola, które mają być zainicjowane stałymi, ale też mają podlegać edycji:
Koszt sprzątania małego pokoju: 200
Koszt sprzątania podwójnego pokoju: 280
Koszt za noc w małym pokoju: 30
Koszt za noc w dużym pokoju: 40
Liczba nocy: 2 (przy tym polu mogą być dodatkowo guziki z + i - aby powiększać i pomniejszać)
Wyliczony koszt: (wyświetlać wytłuszczone)
Hojna dopłata wyważona w procentach
Hojna dopłata wyrażona w złotówkach
Wyliczony koszt + hojność: (wyświetlać wytłuszczone)
Każda zmiana edytowanego pola ma przeliczać wynik.
ChatGPT powiedział:
Oto kod HTML5 + JavaScript, który pozwala na kalkulację ceny za usługę z możliwością edycji wartości oraz zmiany liczby nocy za pomocą przycisków. Każda zmiana w polach wejściowych od razu aktualizuje wynik. Daj znać, jeśli potrzebujesz modyfikacji! 🚀
Powiedziałeś(-aś):
4 pola pola z zadanymi wartościami umieść w ramce
dodaj wybór: mały pokój, podwójny pokój
pole „wyliczona wartość” daj przez polami o hojności
ChatGPT powiedział:
Dodałem ramkę dla pól kosztów, możliwość wyboru rodzaju pokoju oraz zmieniłem układ wyświetlania kosztów zgodnie z Twoimi wymaganiami. Teraz wyliczona wartość pojawia się nad polami hojności. Daj znać, jeśli potrzebujesz dodatkowych zmian! 😊
************************************************
************************************************
Kalkulator ceny usługi
Wyliczony koszt: 0 PLN
Wyliczony koszt + hojność: 0 PLN
************************************************
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Usługi</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
label { display: block; margin-top: 10px; }
input { margin-top: 5px; }
.bold { font-weight: bold; }
fieldset { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }
legend { font-weight: bold; }
</style>
</head>
<body>
<h2>Kalkulator ceny usługi</h2>
<fieldset>
<legend>Podstawowe koszty</legend>
<label>Koszt sprzątania małego pokoju:
<input type="number" id="cleanSmall" value="200">
</label>
<label>Koszt sprzątania podwójnego pokoju:
<input type="number" id="cleanLarge" value="280">
</label>
<label>Koszt za noc w małym pokoju:
<input type="number" id="nightSmall" value="30">
</label>
<label>Koszt za noc w dużym pokoju:
<input type="number" id="nightLarge" value="40">
</label>
</fieldset>
<label>Rodzaj pokoju:
<select id="roomType">
<option value="small">Mały pokój</option>
<option value="large">Podwójny pokój</option>
</select>
</label>
<label>Liczba nocy:
<button onclick="changeNights(-1)">-</button>
<input type="number" id="nights" value="2" min="1">
<button onclick="changeNights(1)">+</button>
</label>
<h3>Wyliczony koszt: <span id="totalCost" class="bold">0</span> PLN</h3>
<label>Hojna dopłata (%):
<input type="number" id="tipPercent" value="0">
</label>
<label>Hojna dopłata (PLN):
<input type="number" id="tipFixed" value="0">
</label>
<h3>Wyliczony koszt + hojność: <span id="finalCost" class="bold">0</span> PLN</h3>
<script>
function calculate() {
let cleanSmall = parseFloat(document.getElementById('cleanSmall').value);
let cleanLarge = parseFloat(document.getElementById('cleanLarge').value);
let nightSmall = parseFloat(document.getElementById('nightSmall').value);
let nightLarge = parseFloat(document.getElementById('nightLarge').value);
let nights = parseInt(document.getElementById('nights').value);
let tipPercent = parseFloat(document.getElementById('tipPercent').value);
let tipFixed = parseFloat(document.getElementById('tipFixed').value);
let roomType = document.getElementById('roomType').value;
let baseCost = (roomType === 'small' ? cleanSmall + nights * nightSmall : cleanLarge + nights * nightLarge);
let tipAmount = (tipPercent / 100) * baseCost + tipFixed;
let finalCost = baseCost + tipAmount;
document.getElementById('totalCost').textContent = baseCost.toFixed(2);
document.getElementById('finalCost').textContent = finalCost.toFixed(2);
}
function changeNights(amount) {
let nightsInput = document.getElementById('nights');
let newValue = parseInt(nightsInput.value) + amount;
if (newValue < 1) newValue = 1;
nightsInput.value = newValue;
calculate();
}
document.querySelectorAll('input, select').forEach(input => {
input.addEventListener('input', calculate);
});
calculate(); // Initial calculation
</script>
</body>
</html>