← Torna alla Tabella

1. Struttura HTML (index.html)
In questa sezione definiamo gli input per inserire i dati (Asset, Quantità e Prezzo) e lo scheletro della tabella.

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Gestione Portafoglio Investimenti</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
<a href="home.html" class="btn-home">← Torna alla Home</a>

<h1>Monitoraggio Investimenti</h1>

<div class="input-section">
<input type="text" id="asset" placeholder="Esempio: Bitcoin o ETF S&P500">
<input type="number" id="quantita" placeholder="Quantità">
<input type="number" id="prezzo" placeholder="Prezzo Unitario (€)">
<button onclick="aggiungiRiga()" class="btn-add">Aggiungi Titolo</button>
</div>

<table id="tabellaInvestimenti">
<thead>
<tr>
<th>Asset</th>
<th>Quantità</th>
<th>Prezzo Unitario</th>
<th>Totale Investito</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<div class="action-buttons">
<button onclick="svuotaTabella()" class="btn-clear">Svuota Tabella</button>
<button onclick="scaricaCSV()" class="btn-download">Scarica CSV</button>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

2. Stile CSS (style.css)
Un design pulito per rendere l'interfaccia professionale e leggibile.

body { font-family: sans-serif; background-color: #f4f7f6; padding: 20px; }
.container { max-width: 900px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

h1 { color: #2c3e50; }

.btn-home { display: inline-block; margin-bottom: 20px; text-decoration: none; color: #3498db; font-weight: bold; }

.input-section { margin-bottom: 20px; display: flex; gap: 10px; }
input { padding: 8px; border: 1px solid #ddd; border-radius: 4px; flex: 1; }

table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
th { background-color: #2c3e50; color: white; }

.btn-add { background: #27ae60; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px; }
.btn-delete { background: #e74c3c; color: white; border: none; padding: 5px 10px; cursor: pointer; border-radius: 4px; }
.btn-clear { background: #7f8c8d; color: white; border: none; padding: 10px 20px; cursor: pointer; margin-top: 20px; border-radius: 4px; }
.btn-download { background: #3498db; color: white; border: none; padding: 10px 20px; cursor: pointer; margin-top: 20px; border-radius: 4px; }

3. Logica JavaScript (script.js)
Qui gestiamo i calcoli matematici e le funzionalità di esportazione.
Esempio numerico applicato: Se si inserisce 0.5 Bitcoin a 40.000€, il sistema calcolerà automaticamente un totale di 20.000€.

function aggiungiRiga() {
const asset = document.getElementById('asset').value;
const quantita = parseFloat(document.getElementById('quantita').value);
const prezzo = parseFloat(document.getElementById('prezzo').value);

if (asset === "" || isNaN(quantita) || isNaN(prezzo)) {
alert("Per favore, compila tutti i campi correttamente.");
return;
}

const tabella = document.getElementById('tabellaInvestimenti').getElementsByTagName('tbody')[0];
const nuovaRiga = tabella.insertRow();

// Calcolo del Totale
const totale = (quantita * prezzo).toFixed(2);

nuovaRiga.innerHTML = `
<td>${asset}</td>
<td>${quantita}</td>
<td>€ ${prezzo.toFixed(2)}</td>
<td>€ ${totale}</td>
<td><button class="btn-delete" onclick="eliminaRiga(this)">Elimina</button></td>
`;

// Pulisce i campi input
document.getElementById('asset').value = "";
document.getElementById('quantita').value = "";
document.getElementById('prezzo').value = "";
}

function eliminaRiga(btn) {
const riga = btn.parentNode.parentNode;
riga.parentNode.removeChild(riga);
}

function svuotaTabella() {
document.querySelector('#tabellaInvestimenti tbody').innerHTML = "";
}

function scaricaCSV() {
let csv = "Asset,Quantita,Prezzo,Totale\n";
const righe = document.querySelectorAll("#tabellaInvestimenti tr");

for (let i = 1; i < righe.length; i++) {
const col = righe[i].querySelectorAll("td");
const rigaDati = Array.from(col).map(c => c.innerText.replace('€ ', '')).slice(0, 4).join(",");
csv += rigaDati + "\n";
}

const blob = new Blob([csv], { type: 'text/csv' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.setAttribute('href', url);
a.setAttribute('download', 'portafoglio_investimenti.csv');
a.click();
}