Prosty kalkulator ułamków

Kalkulator obsługuje dodawanie, odejmowanie, mnożenie oraz dzielenie ułamków.

Poniżej znajdziecie kody jak wstawić taki kalkulator na własną stronę.

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

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Prosty sposób na zdobycie 1000 GB transferu danych na rok w Orange na kartę

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

Kalkulator obsługuje dodawanie, odejmowanie, mnożenie oraz dzielenie ułamków.

Prosty kalkulator ułamkó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ć.

WOŚP 2025

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy