{"id":10251,"date":"2025-06-23T10:10:26","date_gmt":"2025-06-23T10:10:26","guid":{"rendered":"https:\/\/elfsight.com\/pl\/?p=10251"},"modified":"2025-11-19T07:59:49","modified_gmt":"2025-11-19T07:59:49","slug":"how-to-make-a-simple-html-calculator","status":"publish","type":"post","link":"https:\/\/elfsight.com\/pl\/blog\/how-to-make-a-simple-html-calculator\/","title":{"rendered":"Jak zrobi\u0107 prosty kalkulator w HTML-u"},"content":{"rendered":"
\r\n\t\t\t
Contents<\/div>\r\n\t\t\t
  1. Jak stworzy\u0107 kalkulator za pomoc\u0105 HTML<\/a><\/li>
  2. Jak zrobi\u0107 kalkulator do z\u0142o\u017conych zada\u0144<\/a><\/li>
  3. Tworzenie wid\u017cetu kalkulatora HTML bez kodowania<\/a><\/li>
  4. Przyk\u0142ady kalkulator\u00f3w w HTML<\/a><\/li>
  5. Podsumowanie<\/a><\/li>
  6. Edytor: Stw\u00f3rz kalkulator HTML za darmo<\/a><\/li><\/ol>\r\n\t\t<\/div>\n

    Jak stworzy\u0107 kalkulator za pomoc\u0105 HTML<\/h2>

    Je\u015bli potrzebujesz szybkiego i prostego kalkulatora z podstawowymi funkcjami, takimi jak dodawanie, odejmowanie, mno\u017cenie i dzielenie, skorzystaj z poni\u017cszego kodu. Mo\u017cesz wklei\u0107 ten kod HTML kalkulatora do swojego pliku HTML i sprawdzi\u0107, jak wszystko dzia\u0142a. Kod zawiera komentarze, kt\u00f3re pomog\u0105 Ci zrozumie\u0107 dzia\u0142anie oraz wprowadzi\u0107 zmiany w stylu i uk\u0142adzie aplikacji.<\/p>

    <!DOCTYPE html><html lang=\"en\"><head>  <meta charset=\"UTF-8\">  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">  <title>Prosty kalkulator<\/title>  <style>    \/* Styl dla ca\u0142ego cia\u0142a strony, centrowanie kalkulatora *\/    body {      font-family: Arial, sans-serif;      display: flex;      justify-content: center;      align-items: center;      height: 100vh;      background-color: #f0f0f0;    }    \/* Styl dla kontenera kalkulatora *\/    .calculator {      background-color: white;      padding: 20px;      border-radius: 10px;      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);    }    \/* Styl dla pola wy\u015bwietlacza *\/    .display {      width: 160px;      height: 40px;      text-align: right;      margin-bottom: 10px;      font-size: 1.5em;      padding: 5px;    }    \/* Uk\u0142ad siatki dla przycisk\u00f3w kalkulatora *\/    .buttons {      display: grid;      grid-template-columns: repeat(4, 40px);      gap: 10px;    }    \/* Styl dla przycisk\u00f3w *\/    .buttons button {      width: 40px;      height: 40px;      font-size: 1.2em;      border: none;      background-color: #4CAF50;      color: white;      border-radius: 5px;      cursor: pointer;    }    \/* Efekt najechania na przyciski *\/    .buttons button:hover {      background-color: #45a049;    }    \/* Specjalny styl dla przycisku r\u00f3wna si\u0119 *\/    .buttons .equals {      grid-column: span 2; \/* Zajmuje 2 kolumny *\/      background-color: #2196F3;    }    \/* Efekt najechania na przycisk r\u00f3wna si\u0119 *\/    .buttons .equals:hover {      background-color: #0b7dda;    }  <\/style><\/head><body>  <div class=\"calculator\">    <!-- Pole wej\u015bciowe do wy\u015bwietlania wynik\u00f3w kalkulatora -->    <input type=\"text\" class=\"display\" id=\"display\" disabled>        <!-- Przyciski kalkulatora u\u0142o\u017cone w siatk\u0119 -->    <div class=\"buttons\">      <button onclick=\"appendNumber('1')\">1<\/button>      <button onclick=\"appendNumber('2')\">2<\/button>      <button onclick=\"appendNumber('3')\">3<\/button>      <button onclick=\"setOperator('+')\">+<\/button>      <button onclick=\"appendNumber('4')\">4<\/button>      <button onclick=\"appendNumber('5')\">5<\/button>      <button onclick=\"appendNumber('6')\">6<\/button>      <button onclick=\"setOperator('-')\">-<\/button>      <button onclick=\"appendNumber('7')\">7<\/button>      <button onclick=\"appendNumber('8')\">8<\/button>      <button onclick=\"appendNumber('9')\">9<\/button>      <button onclick=\"setOperator('*')\">*<\/button>      <button onclick=\"clearDisplay()\">C<\/button>      <button onclick=\"appendNumber('0')\">0<\/button>      <button onclick=\"calculate()\" class=\"equals\">=<\/button>      <button onclick=\"setOperator('\/')\">\/<\/button>    <\/div>  <\/div>  <script>    \/* Zmienne do przechowywania bie\u017c\u0105cego i poprzedniego wej\u015bcia oraz operatora *\/    let currentInput = '';    let operator = '';    let previousInput = '';    \/* Funkcja dodaj\u0105ca liczby do bie\u017c\u0105cego wej\u015bcia *\/    function appendNumber(number) {      currentInput += number; \/\/ Dodaj klikni\u0119t\u0105 cyfr\u0119 do bie\u017c\u0105cego wej\u015bcia      document.getElementById('display').value = currentInput; \/\/ Aktualizuj wy\u015bwietlacz    }    \/* Funkcja ustawiaj\u0105ca operator i przygotowuj\u0105ca na kolejne wej\u015bcie *\/    function setOperator(op) {      operator = op; \/\/ Zapisz wybrany operator      previousInput = currentInput; \/\/ Zapisz bie\u017c\u0105ce wej\u015bcie jako poprzednie      currentInput = ''; \/\/ Wyczy\u015b\u0107 bie\u017c\u0105ce wej\u015bcie na kolejn\u0105 liczb\u0119    }    \/* Funkcja wykonuj\u0105ca obliczenia na podstawie operatora *\/    function calculate() {      let result;      \/\/ Wykonaj odpowiedni\u0105 operacj\u0119 w zale\u017cno\u015bci od operatora      if (operator === '+') {        result = parseFloat(previousInput) + parseFloat(currentInput);      } else if (operator === '-') {        result = parseFloat(previousInput) - parseFloat(currentInput);      } else if (operator === '*') {        result = parseFloat(previousInput) * parseFloat(currentInput);      } else if (operator === '\/') {        result = parseFloat(previousInput) \/ parseFloat(currentInput);      }      document.getElementById('display').value = result; \/\/ Wy\u015bwietl wynik      currentInput = result.toString(); \/\/ Zapisz wynik jako nowe bie\u017c\u0105ce wej\u015bcie      operator = ''; \/\/ Zresetuj operator    }    \/* Funkcja czyszcz\u0105ca wy\u015bwietlacz i resetuj\u0105ca kalkulator *\/    function clearDisplay() {      currentInput = '';      previousInput = '';      operator = '';      document.getElementById('display').value = ''; \/\/ Wyczy\u015b\u0107 wy\u015bwietlacz    }  <\/script><\/body><\/html><\/code><\/pre>
    Wyja\u015bnienie kluczowych sekcji<\/h3>
    Aby u\u0142atwi\u0107 zarz\u0105dzanie i dostosowanie kalkulatora, przygotowali\u015bmy dodatkowe wskaz\u00f3wki dotycz\u0105ce jego funkcji:<\/p>
    Struktura HTML<\/h4>