Skip to content

Commit

Permalink
New version
Browse files Browse the repository at this point in the history
  • Loading branch information
IlDivinatore01 committed Sep 27, 2023
1 parent ad60d7d commit ae8de6a
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 103 deletions.
27 changes: 10 additions & 17 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,30 +1,25 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calcolatore di Bevande</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<h1>Calcolatore di Bevande</h1>
<div class="form-group">
<input type="text" id="beverage1" class="beverage form-control" value="Coca-Cola" readonly>
<input type="number" id="quantity1" class="quantity form-control" placeholder="Quantità">
</div>
<div class="form-group">
<input type="text" id="beverage2" class="beverage form-control" value="Pepsi" readonly>
<input type="number" id="quantity2" class="quantity form-control" placeholder="Quantità">
</div>
<div id="dynamic-fields">
<!-- Campi dinamici saranno qui -->
</div>
<button id="add-beverage" class="btn btn-success">+ Aggiungi Bevanda</button>
<button id="calculate-button" class="btn btn-primary">Calcola</button>
<form>
<div id="predefined-beverages">
<!-- Bevande predefinite saranno aggiunte qui -->
</div>
<div id="dynamic-fields">
<!-- Campi dinamici saranno qui -->
</div>
<button type="button" id="add-beverage" class="btn btn-success">+ Aggiungi Bevanda</button>
<button type="button" id="calculate-button" class="btn btn-primary">Calcola</button>
</form>
<div id="result" class="hidden">
<h2>Risultato:</h2>
<pre id="output"></pre>
Expand All @@ -34,6 +29,4 @@ <h2>Risultato:</h2>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>

</html>

226 changes: 143 additions & 83 deletions script.js
Original file line number Diff line number Diff line change
@@ -1,102 +1,162 @@
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 = `
<div class="input-group">
<input type="text" class="beverage form-control" value="${beverage.name}" readonly>
<input type="number" class="quantity form-control" placeholder="Quantità">
<select class="unit form-control">
<option value="bottiglia" ${beverage.defaultUnit === "bottiglia" ? 'selected' : ''}>Bottiglia</option>
<option value="scatola" ${beverage.defaultUnit === "scatola" ? 'selected' : ''}>Scatola</option>
<option value="pacco" ${beverage.defaultUnit === "pacco" ? 'selected' : ''}>Pacco</option>
</select>
</div>
`;
predefinedContainer.appendChild(beverageDiv);
});
}

addPredefinedBeverages();

const calculateButton = document.getElementById("calculate-button");
const result = document.getElementById("result");
const output = document.getElementById("output");
const copyButton = document.getElementById("copy-button");
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!");
});
});
});

12 changes: 9 additions & 3 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -65,4 +71,4 @@ button {
#calculate-button {
background-color: #007BFF;
color: #fff;
}
}

0 comments on commit ae8de6a

Please sign in to comment.