Risultato:
@@ -34,6 +29,4 @@
Risultato:
-
-
diff --git a/script.js b/script.js
index f3f561d..3c2e4bb 100644
--- a/script.js
+++ b/script.js
@@ -1,5 +1,48 @@
document.addEventListener("DOMContentLoaded", function () {
+// Funzione per ordinare le bevande predefinite in ordine alfabetico
+function sortPredefinedBeverages(predefinedBeverages) {
+ return predefinedBeverages.sort(function (a, b) {
+ return a.name.localeCompare(b.name);
+ });
+ }
+
+ // Funzione per aggiungere le bevande predefinite
+ function addPredefinedBeverages() {
+ const predefinedContainer = document.getElementById("predefined-beverages");
+
+ const predefinedBeverages = [
+ { name: "Coca-Cola" },
+ { name: "Pepsi" },
+ { name: "Fanta" },
+ { name: "Acqua", defaultUnit: "scatola"},
+ { name: "Tè" },
+ // Aggiungi altre bevande predefinite qui
+ ];
+
+ // Ordina le bevande predefinite in ordine alfabetico
+ const sortedBeverages = sortPredefinedBeverages(predefinedBeverages);
+
+ sortedBeverages.forEach(function (beverage, index) {
+ const beverageDiv = document.createElement("div");
+ beverageDiv.classList.add("form-group", "beverage-item");
+ beverageDiv.innerHTML = `
+
+
+
+
+
+ `;
+ predefinedContainer.appendChild(beverageDiv);
+ });
+ }
+
+ addPredefinedBeverages();
+
const calculateButton = document.getElementById("calculate-button");
const result = document.getElementById("result");
const output = document.getElementById("output");
@@ -7,96 +50,113 @@ document.addEventListener("DOMContentLoaded", function () {
const addBeverageButton = document.getElementById("add-beverage");
const dynamicFields = document.getElementById("dynamic-fields");
let dynamicFieldIndex = 1;
-
+
calculateButton.addEventListener("click", function () {
- let text = "";
- const quantities = document.querySelectorAll(".quantity");
-
- for (let i = 0; i < quantities.length; i++) {
- const quantity = quantities[i].value.trim();
- const beverageInput = document.querySelector(`#beverage${i + 1}`);
-
- if (quantity && beverageInput) {
- const beverageName = beverageInput.value.trim();
- const unit = getUnit(beverageName, parseInt(quantity));
- text += `${beverageName}: ${quantity} ${unit}\n`;
- }
+ let text = "";
+ const predefinedContainers = document.querySelectorAll('#predefined-beverages .form-group');
+ const dynamicContainers = document.querySelectorAll('#dynamic-fields .form-group');
+
+ predefinedContainers.forEach(function (container) {
+ const quantity = parseInt(container.querySelector('.quantity').value.trim());
+ const unit = container.querySelector('.unit').value;
+ const beverageName = container.querySelector('.beverage').value.trim();
+
+ if (!isNaN(quantity) && quantity > 0) {
+ const unitText = getUnitText(unit, quantity);
+ text += `${beverageName}: ${quantity} ${unitText}\n`;
}
-
- // Aggiungi qui il codice per gestire i campi dinamici
- const dynamicQuantityInputs = document.querySelectorAll("#dynamic-fields .quantity");
- const dynamicBeverageInputs = document.querySelectorAll("#dynamic-fields .beverage");
-
- dynamicQuantityInputs.forEach(function (dynamicQuantityInput, index) {
- const quantity = dynamicQuantityInput.value.trim();
- const beverageInput = dynamicBeverageInputs[index];
-
- if (quantity && beverageInput) {
- const beverageName = beverageInput.value.trim();
- const unit = getUnit(beverageName, parseInt(quantity));
- text += `${beverageName}: ${quantity} ${unit}\n`;
- }
- });
-
- if (text) {
- result.classList.remove("hidden");
- output.textContent = text;
- } else {
- result.classList.add("hidden");
+ });
+
+ dynamicContainers.forEach(function (container) {
+ const quantity = parseInt(container.querySelector('.quantity').value.trim());
+ const unit = container.querySelector('.unit').value;
+ const beverageName = container.querySelector('.beverage').value.trim();
+
+ if (!isNaN(quantity) && quantity > 0) {
+ const unitText = getUnitText(unit, quantity);
+ text += `${beverageName}: ${quantity} ${unitText}\n`;
}
+ });
+
+ if (text) {
+ result.classList.remove("hidden");
+ output.textContent = text;
+ } else {
+ result.classList.add("hidden");
+ }
});
-
- // Funzione per ottenere l'unità corretta basata sul nome della bevanda
- function getUnit(beverageName, quantity) {
- if (beverageName.toLowerCase() === "coca-cola") {
- return quantity === 1 ? "bottiglia" : "bottiglie";
- } else if (beverageName.toLowerCase() === "pepsi") {
- return quantity === 1 ? "scatola" : "scatole";
- } else {
- return quantity === 1 ? "unità" : "unità"; // Puoi personalizzare per altre bevande
+
+ function getUnitText(unit, quantity) {
+ if (quantity === 1) {
+ return unit;
+ } else {
+ if (unit === "scatola") {
+ return "scatole";
+ } else if (unit === "bottiglia") {
+ return "bottiglie";
+ } else if (unit === "pacco") {
+ return "pacchi";
}
+ }
}
-
-
-
+
addBeverageButton.addEventListener("click", function () {
- const newFieldGroup = document.createElement("div");
- newFieldGroup.classList.add("form-group");
-
- const newBeverageInput = document.createElement("input");
- newBeverageInput.type = "text";
- newBeverageInput.classList.add("beverage");
- newBeverageInput.placeholder = "Nome Bevanda";
-
- const newQuantityInput = document.createElement("input");
- newQuantityInput.type = "number";
- newQuantityInput.classList.add("quantity");
- newQuantityInput.placeholder = "Quantità";
-
- const removeFieldButton = document.createElement("button");
- removeFieldButton.textContent = "Rimuovi Campo";
- removeFieldButton.addEventListener("click", function () {
- // Codice per rimuovere questo gruppo di campi dinamici
- dynamicFields.removeChild(newFieldGroup);
- });
-
- newFieldGroup.appendChild(newBeverageInput);
- newFieldGroup.appendChild(newQuantityInput);
- newFieldGroup.appendChild(removeFieldButton);
-
- dynamicFields.appendChild(newFieldGroup);
- dynamicFieldIndex++;
+ const newFieldGroup = document.createElement("div");
+ newFieldGroup.classList.add("form-group", "beverage-item");
+
+ const newInputGroup = document.createElement("div");
+ newInputGroup.classList.add("input-group");
+
+ const newBeverageInput = document.createElement("input");
+ newBeverageInput.type = "text";
+ newBeverageInput.classList.add("beverage");
+ newBeverageInput.placeholder = "Nome Bevanda";
+
+ const newQuantityInput = document.createElement("input");
+ newQuantityInput.type = "number";
+ newQuantityInput.classList.add("quantity");
+ newQuantityInput.placeholder = "Quantità";
+
+ const newUnitSelect = document.createElement("select");
+ newUnitSelect.classList.add("unit");
+ const optionBottiglia = document.createElement("option");
+ optionBottiglia.value = "bottiglia";
+ optionBottiglia.textContent = "Bottiglia";
+ const optionScatola = document.createElement("option");
+ optionScatola.value = "scatola";
+ optionScatola.textContent = "Scatola";
+ const optionPacco = document.createElement("option");
+ optionPacco.value = "pacco";
+ optionPacco.textContent = "Pacco";
+ newUnitSelect.appendChild(optionBottiglia);
+ newUnitSelect.appendChild(optionScatola);
+ newUnitSelect.appendChild(optionPacco);
+
+ const removeFieldButton = document.createElement("button");
+ removeFieldButton.textContent = "Rimuovi Campo";
+ removeFieldButton.addEventListener("click", function () {
+ dynamicFields.removeChild(newFieldGroup);
+ });
+
+ newInputGroup.appendChild(newBeverageInput);
+ newInputGroup.appendChild(newQuantityInput);
+ newInputGroup.appendChild(newUnitSelect);
+ newFieldGroup.appendChild(newInputGroup);
+ newFieldGroup.appendChild(removeFieldButton);
+
+ dynamicFields.appendChild(newFieldGroup);
+ dynamicFieldIndex++;
});
-
+
copyButton.addEventListener("click", function () {
- const textToCopy = output.textContent;
- const textArea = document.createElement("textarea");
- textArea.value = textToCopy;
- document.body.appendChild(textArea);
- textArea.select();
- document.execCommand("copy");
- document.body.removeChild(textArea);
- alert("Testo copiato negli appunti!");
+ const textToCopy = output.textContent;
+ const textArea = document.createElement("textarea");
+ textArea.value = textToCopy;
+ document.body.appendChild(textArea);
+ textArea.select();
+ document.execCommand("copy");
+ document.body.removeChild(textArea);
+ alert("Testo copiato negli appunti!");
});
-
- });
\ No newline at end of file
+ });
+
\ No newline at end of file
diff --git a/style.css b/style.css
index 3efd7b6..2f0b4f1 100644
--- a/style.css
+++ b/style.css
@@ -26,9 +26,15 @@ label {
margin-bottom: 5px;
}
+.input-group {
+ display: flex;
+ align-items: center;
+}
+
input[type="text"],
-input[type="number"] {
- width: 100%;
+input[type="number"],
+select {
+ flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
@@ -65,4 +71,4 @@ button {
#calculate-button {
background-color: #007BFF;
color: #fff;
-}
\ No newline at end of file
+}