Kalkulator stężeń

HTML:

<div id="candle-calculator" class="candle-box">
<h3>Kalkulator stężeń</h3>
<label>Stężenie zapachu (%): <span id="percentageValue">10</span>%</label>
<input type="range" id="percentage" min="1" max="30" value="10" step="1">
<label>Waga jednej świecy (g):</label>
<input type="number" id="weight" value="100" min="1">
<label>Ilość świec do zalania:</label>
<input type="number" id="quantity" value="1" min="1">
<label>Komentarz / Nazwa świecy:</label>
<input type="text" id="note" placeholder="np. Świeca waniliowa 120g">
<h4>Wyniki:</h4>
<div id="results">
<p>Waga potrzebnego wosku: <strong id="waxWeight">0</strong> g</p>
<p>Waga potrzebnego olejku: <strong id="oilWeight">0</strong> g</p>
</div>
<div style="display: flex; gap: 10px;">
<button onclick="downloadAsText()">Zapisz obliczenia</button>
<button onclick="copyToClipboard()">Kopiuj do schowka</button>
</div>
</div>

CSS

#candle-calculator {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px 25px; 
  border: 1px solid #ccc;
  border-radius: 10px;
  font-family: sans-serif;
  background: #fff;
  box-sizing: border-box;
}

#candle-calculator h3 {
  margin-top: 0;
}

#candle-calculator label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  margin-top: 15px;
  font-size: 14px;
}

#candle-calculator input[type="number"],
#candle-calculator input[type="range"],
#candle-calculator input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 5px;
  box-sizing: border-box;
}

#results {
  padding: 10px;
  border: 1px solid #eee;
  background: #f9f9f9;
  border-radius: 5px;
  margin: 15px 0;
}

#results p {
  margin: 8px 0;
  font-size: 15px;
}

#candle-calculator button {
  flex: 1;
  padding: 10px;
  background-color: #59925E;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#candle-calculator button:hover {
  background-color: #68314e;
}

#candle-calculator div[style*="display: flex"] {
  gap: 10px;
  margin-top: 10px;
}

#candle-calculator input[type="range"] {
  accent-color: #59925E;
  width: 100%;
  height: 6px;
  border-radius: 5px;
  
}

JS

document.addEventListener("DOMContentLoaded", function () {
  function calculate() {
    const percentage = parseFloat(document.getElementById("percentage").value);
    const weight = parseFloat(document.getElementById("weight").value);
    const quantity = parseFloat(document.getElementById("quantity").value);

    const totalWeight = weight * quantity;
    const oil = (totalWeight * percentage) / 100;
    const wax = totalWeight - oil;

    document.getElementById("percentageValue").textContent = percentage;
    document.getElementById("waxWeight").textContent = wax.toFixed(2);
    document.getElementById("oilWeight").textContent = oil.toFixed(2);
  }

  ["percentage", "weight", "quantity"].forEach(id => {
    document.getElementById(id).addEventListener("input", calculate);
  });

  calculate();

  window.downloadAsText = function () {
    const text = getCalculationText();
    const blob = new Blob([text], { type: "text/plain" });
    const link = document.createElement("a");
    link.download = "kalkulator_swiec.txt";
    link.href = window.URL.createObjectURL(blob);
    link.click();
  };

  window.copyToClipboard = function () {
    const text = getCalculationText();
    navigator.clipboard.writeText(text).then(() => {
      alert("Obliczenia zostały skopiowane do schowka!");
    });
  };

  function getCalculationText() {
    const percentage = document.getElementById("percentage").value;
    const weight = document.getElementById("weight").value;
    const quantity = document.getElementById("quantity").value;
    const wax = document.getElementById("waxWeight").textContent;
    const oil = document.getElementById("oilWeight").textContent;
    const note = document.getElementById("note").value;

    return `Kalkulator świec

Komentarz / Nazwa świecy: ${note}

Stężenie zapachu: ${percentage}%
Waga jednej świecy: ${weight} g
Ilość świec: ${quantity}

Wyniki:
- Waga potrzebnego wosku: ${wax} g
- Waga potrzebnego olejku: ${oil} g`;
  }
});