I want to add an option to change currency in my app through a button with HTML and JS. I have now tried quite a few times, but nothing seems to work.
const balance = document.getElementById("balance");
const money_plus = document.getElementById("money-plus");
const money_minus = document.getElementById("money-minus");
const list = document.getElementById("list");
const form = document.getElementById("form");
const text = document.getElementById("text");
const amount = document.getElementById("amount");
const localStorageTransactions = JSON.parse(localStorage.getItem("transactions"));
let transactions = localStorage.getItem("transactions") !== null ? localStorageTransactions : [];
function addTransaction(e) {
e.preventDefault();
if (text.value.trim() === "" || amount.value.trim() === "") {
alert("Please add text and amount :D");
} else {
const transaction = {
id: generateID(),
text: text.value,
amount: +amount.value,
};
transactions.push(transaction);
addTransactionDOM(transaction);
updateValues();
updateLocalStorage();
text.value = "";
amount.value = "";
}
}
function generateID() {
return Math.floor(Math.random() * 1000000000);
}
function addTransactionDOM(transaction) {
const sign = transaction.amount < 0 ? "-" : "+";
const item = document.createElement("li");
item.classList.add(transaction.amount < 0 ? "minus" : "plus");
item.innerHTML = `${transaction.text} <span>${sign}${Math.abs(transaction.amount)}</span><button class="delete-btn" onclick="removeTransaction(${transaction.id})">x</button>`;
list.appendChild(item);
}
function updateValues() {
const amounts = transactions.map((transaction) => transaction.amount);
const total = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2);
const income = amounts
.filter((item) => item > 0)
.reduce((acc, item) => (acc += item), 0)
.toFixed(2);
const expense = (
amounts.filter((item) => item < 0).reduce((acc, item) => (acc += item), 0) *
-1
).toFixed(2);
balance.innerText = `₹${total}`;
money_plus.innerText = `₹${income}`;
money_minus.innerText = `₹${expense}`;
}
function removeTransaction(id) {
transactions = transactions.filter((transaction) => transaction.id !== id);
updateLocalStorage();
Init();
}
function updateLocalStorage() {
localStorage.setItem("transactions", JSON.stringify(transactions));
}
function Init() {
list.innerHTML = "";
transactions.forEach(addTransactionDOM);
updateValues();
}
Init();
form.addEventListener("submit", addTransaction);
<h2>Expense Tracker</h2>
<div class="container">
<h4>Your Balance</h4>
<h1 id="balance">₹0.00</h1>
<div class="inc-exp-container">
<div>
<h4>Income</h4>
<p id="money-plus" class="money-plus">+₹0.00</p>
</div>
<div>
<h4>Expense</h4>
<p id="money-minus" class="money-minus">-₹0.00</p>
</div>
</div>
<h3>History</h3>
<ul id="list" class="list"></ul>
<h3>Add New Transaction</h3>
<form id="form">
<div class="form-control">
<label for="text">Text</label>
<input type="text" id="text" placeholder="Enter Text...." autocomplete="off" />
</div>
<div class="form-control">
<label for="amount">
Amount <br />
(- for expense , + for income)
</label>
<input type="number" id="amount" placeholder="Enter amount..." autocomplete="off" />
</div>
<button class="btn">Add transaction</button>
</form>
</div>
And please don't tell the code in fancy details like react or anything. Thanks a lot!