Spis treści

Kalkulator zwykłych ułamków matematycznych

Kalkulator ułamków to zaawansowane narzędzie matematyczne umożliwiające wykonywanie wszystkich podstawowych działań na ułamkach zwykłych.

Aplikacja została zaprojektowana z myślą o uczniach, studentach, nauczycielach oraz wszystkich osobach, które potrzebują szybkich i dokładnych obliczeń na ułamkach.

Funkcje:

- Dodawanie, odejmowanie, mnożenie i dzielenie ułamków
- Automatyczne upraszczanie wyników do najprostszej postaci
- Obsługa kolejności działań matematycznych
- Możliwość pracy z wieloma ułamkami jednocześnie

Kalkulator ułamków

Wartość dziesiętna: 0

Jak działa kalkulator ułamków?

Algorytm obliczeń

Kalkulator wykorzystuje zaawansowany algorytm matematyczny, który:

1. Pobiera dane wejściowe – licznik i mianownik każdego ułamka
2. Waliduje dane – sprawdza poprawność wprowadzonych wartości
3. Przestrzega kolejności działań – wykonuje mnożenie i dzielenie przed dodawaniem i odejmowaniem
4. Oblicza wyniki pośrednie – wykonuje poszczególne działania matematyczne
5. Upraszcza wyniki – redukuje ułamki do najprostszej postaci za pomocą NWD (największego wspólnego dzielnika)
6. Wyświetla wynik końcowy – prezentuje uproszczony ułamek wynikowy

Matematyczne podstawy

Aplikacja implementuje standardowe wzory matematyczne:

Działanie	Wzór matematyczny	Przykład
Dodawanie	a/b + c/d = (a×d + b×c) / (b×d)	1/2 + 1/3 = (1×3 + 2×1) / (2×3) = 5/6
Odejmowanie	a/b – c/d = (a×d – b×c) / (b×d)	3/4 – 1/2 = (3×2 – 4×1) / (4×2) = 2/8 = 1/4
Mnożenie	a/b × c/d = (a×c) / (b×d)	2/3 × 3/4 = (2×3) / (3×4) = 6/12 = 1/2
Dzielenie	a/b ÷ c/d = (a×d) / (b×c)	2/3 ÷ 3/4 = (2×4) / (3×3) = 8/9

Instrukcja korzystania z kalkulatora

Podstawowe kroki

1. Wprowadź pierwszy ułamek – Wpisz licznik i mianownik w odpowiednie pola
2. Wybierz działanie – Z rozwijanej listy wybierz operator (+, -, ×, ÷)
3. Dodaj kolejne ułamki – Kliknij „+ Dodaj ułamek” aby dodać więcej składników
4. Oblicz wynik – Kliknij przycisk „=” lub naciśnij Enter
5. Przeczytaj wynik – Wynik pojawi się w polach po prawej stronie, automatycznie uproszczony

Przykład 1: Proste dodawanie

Chcemy dodać 1/2 + 1/4:

- Wprowadź pierwszy ułamek: licznik = 1, mianownik = 2
- Wybierz operator: +
- Wprowadź drugi ułamek: licznik = 1, mianownik = 4
- Kliknij „=”
- Wynik: 3/4

Przykład 2: Działania złożone z kolejnością działań

Chcemy obliczyć: 1/2 + 1/3 × 2/5

- Kalkulator automatycznie wykona mnożenie przed dodawaniem
- Najpierw obliczy: 1/3 × 2/5 = 2/15
- Następnie doda: 1/2 + 2/15 = 19/30
- Wynik końcowy: 19/30

Zaawansowane funkcje

- Ułamki ujemne – możesz wprowadzać ujemne wartości w liczniku
- Wiele ułamków – dodaj dowolną liczbę ułamków do obliczeń
- Automatyczne obliczenia – wynik aktualizuje się automatycznie przy zmianie danych
- Walidacja błędów – aplikacja ostrzega przed dzieleniem przez zero i innymi błędami

Zastosowania edukacyjne

Dla uczniów

- Sprawdzanie prac domowych – szybka weryfikacja własnych obliczeń
- Nauka przez obserwację – zrozumienie kolejności działań na przykładach
- Przygotowanie do sprawdzianów – ćwiczenie różnych typów zadań
- Wizualizacja ułamków – lepsze zrozumienie pojęcia ułamka

Dla nauczycieli

- Tworzenie materiałów dydaktycznych – szybkie generowanie przykładów
- Sprawdzanie zadań – efektywna weryfikacja prac uczniów
- Demonstracje na lekcji – pokazywanie działania na żywo
- Indywidualizacja nauczania – dostosowanie poziomu trudności przykładów

Dla rodziców

- Pomoc dzieciom w nauce – wspólne rozwiązywanie zadań
- Kontrola postępów – monitorowanie umiejętności matematycznych
- Tworzenie własnych zadań – przygotowanie dodatkowych ćwiczeń

Jak wstawić gadżet na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Tworzymy odpowiednie pliki:

index.html
style.css
script.js

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style2.css">
<title>Kalkulator ułamków</title>
</head>
<body> --> 
<div class="container">
  <h2>Działania na ułamkach</h2>
  <form name="calc">
    <div id="data-in"></div>
    <div class="main">
      <button type="submit">=</button>
      <div class="fraction">
        <input type="text" readonly id="resultNumerator">
        <hr>
        <input type="text" readonly id="resultDenominator">
      </div>
    </div>
    <p id="error"></p>
    <p><a id="add-button" href="#">WSTAW UŁAMEK</a></p>
  </form>
</div>
<script src="script.js"></script>
<!--
</body>
</html>

style.css

body {
  width: 98%;
  height: 98%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  margin: 5% 0;
  width: 90%;
  height: 100vh;
  text-align: center;
  background-color: #fafafa;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.2);
  font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif';
  overflow-y: scroll;
}
::-webkit-scrollbar {
  width: 0px;
}
/* Track */ ::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Handle */ ::-webkit-scrollbar-thumb {
  background: #888;
}
/* Handle on hover */ ::-webkit-scrollbar-thumb:hover {
  background: #555;
}
h2 {
  background-color: #fafafa;
  padding: 0.7em;
  margin-top: 20px;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
}
form {
  display: inline-block;
  margin: 0 auto;
  margin-top: 20px;
}
input {
  width: 8em;
  height: 2em;
  margin-left: 1em;
  border: none;
  outline: none;
  font-size: 18px;
  margin-right: 1em;
  border: 1px solid #999;
}
input[type="text"]:focus {
  -webkit-transform: scaleX(1) translateY(-2px);
  transform: scaleX(1) translateY(-2px);
  opacity: 1;
}
hr {
  background-color: rgb(0, 0, 0);
  height: 2px;  
}
.main {
  display: inline-block;
}
button {
  height: 32px;
  width: 62px;
  background-color: #209cff;
  border: none;
  outline: none;
  color: white;
  font-weight: bolder;
  font-size: 18px;
  margin-left: 10px;
}
#data-in {
  display: inline-block;
  margin-bottom: 2em;
}
#error {
  color: red;
}
.fraction {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1em;
  margin-bottom: 2em;  
}
#add-button {
  color: rgb(0, 0, 0);
  text-decoration: none;
  border: 3px solid rgb(0, 0, 0);
  background-color: #eaeaea; 
  padding: 0.7em;
}
select {
  padding: 5px 10px;
  outline: none;
  border: none;
  width: 62px;  
  background-color: rgba(255, 31, 31, 1);
  font-weight: 900;
  font-size: 18px; 
  color: #fff;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

script.js

// JavaScript Document
// www.skrip.pl
var Fraction = function (numerator, denominator) {
    this.init(numerator, denominator);
    return this;
};
Fraction.prototype = {
    constructor: Fraction,

    init: function (numerator, denominator) {
        this.numerator = numerator;
        this.denominator = denominator;
        this.validate();
    },

    // add fraction to DOM
    createDom: function () {
        var self = this;
        var container = document.createElement('div');
        container.className = "fraction";
       
        var numeratorInput = document.createElement('input');
        numeratorInput.type = "number";
        numeratorInput.value = this.numerator || '';
        numeratorInput.onchange = function () {
            self.numerator = parseInt(this.value);
            calc();
        };
        container.appendChild(numeratorInput);

        container.appendChild(document.createElement('hr'));

        var denominatorInput = document.createElement('input');
        denominatorInput.type = "number";
        denominatorInput.value = this.denominator || '';
        denominatorInput.onchange = function () {
            self.denominator = parseInt(this.value);
            calc();
        };
        container.appendChild(denominatorInput);

        return container;
    },

    // addition
    add: function (argument) {
        var num = this.numerator * argument.denominator + argument.numerator * this.denominator,
            den = this.denominator * argument.denominator;
        return new Fraction(num, den);
    },

    // subtraction
    subtract: function (argument) {
        var num = this.numerator * argument.denominator - argument.numerator * this.denominator,
            den = this.denominator * argument.denominator;
        return new Fraction(num, den);
    },

    // multiplication
    multiply: function (argument) {
        var num = this.numerator * argument.numerator,
            den = this.denominator * argument.denominator;
        return new Fraction(num, den);
    },

    // division
    divide: function (argument) {
        var num = this.numerator * argument.denominator,
            den = this.denominator * argument.numerator;
        return new Fraction(num, den);
    },

    simplify: function () {
        if (this.numerator  0) {
        var operation = document.createElement('select');
        for (var i = 0; i 
<br>
<button id="javalBtn" onclick="copyJAVA()" style="border: 1px solid #fafafa; background: #ff0000; cursor: pointer; font-size: 14px; font-weight: 500; padding: 5px 30px;">Kopiuj</button>
<script>
    function copyJAVA() {
      const text = document.querySelector("#javaText");
      const btnText = document.querySelector("#javaBtn");
      text.select();
      document.execCommand("copy");
      btnText.textContent = "Copied";
      setTimeout(function(){
          btnText.textContent = "Copy";
      }, 5000);
}
</script>

Top Stories

Czytnik Tekstu Online – Zamiana Tekstu na Mowę v.4

Kalkulator równań kwadratowych

Przelicznik Walut online – oparte na notowaniach NBP

Kalkulator do działań na zwykłych ułamkach

Wykonuj działania na ułamkach zwykłych: dodawanie, odejmowanie, mnożenie, dzielenie z automatycznym upraszczaniem wyników.

Kalkulator zwykłych ułamków matematycznych

Kalkulator ułamków

Jak działa kalkulator ułamków?

Algorytm obliczeń

Matematyczne podstawy

Instrukcja korzystania z kalkulatora

Podstawowe kroki

Przykład 1: Proste dodawanie

Przykład 2: Działania złożone z kolejnością działań

Zaawansowane funkcje

Zastosowania edukacyjne

Dla uczniów

Dla nauczycieli

Dla rodziców

Jak wstawić gadżet na własną stronę?

index.html

style.css

script.js

Lub można pobrać gotowe pliki kalkulatora i je edytować.

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy

Top Stories

Czytnik Tekstu Online – Zamiana Tekstu na Mowę v.4

Kalkulator równań kwadratowych

Przelicznik Walut online – oparte na notowaniach NBP

Kalkulator zwykłych ułamków matematycznych

Kalkulator ułamków

Jak działa kalkulator ułamków?

Algorytm obliczeń

Matematyczne podstawy

Instrukcja korzystania z kalkulatora

Podstawowe kroki

Przykład 1: Proste dodawanie

Przykład 2: Działania złożone z kolejnością działań

Zaawansowane funkcje

Zastosowania edukacyjne

Dla uczniów

Dla nauczycieli

Dla rodziców

Jak wstawić gadżet na własną stronę?

index.html

style.css

script.js

Lub można pobrać gotowe pliki kalkulatora i je edytować.

Może Ci się spodobać:

Zmiana tekstu na mowę v.3

Notatnik online

Generator oraz skaner kodów QR do wstawienia na własną stronę

Grające pianino na stronę