Public
Edited
Oct 30, 2024
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
label {
display: block;
margin-top: 10px;
}
h3 {
margin-top: 20px;
}
</style>
<body>
<h1>Currency and Date Formatter</h1>
<!-- Input for Amount -->
<label for="amount">Enter Amount:</label>
<input type="number" id="amount" value="1234567.89" step="0.01">
<br><br>
<!-- Input for Date -->
<label for="date">Select Date:</label>
<input type="date" id="date">
<br><br>
<!-- Dropdown for Locale -->
<label for="locale">Select Locale:</label>
<select id="locale">
<option value="en-US">en-US</option>
<option value="en-IN">en-IN</option>
<option value="ja-JP">ja-JP</option>
<option value="fr-FR">fr-FR</option>
<option value="de-DE">de-DE</option>
</select>
<br><br>
<!-- Output for Formatted Amount and Date -->
<div>
<h3>Formatted Output</h3>
<p><strong>Selected Locale:</strong> <span id="selected-locale">-</span></p>
<p><strong>Formatted Amount:</strong> <span id="formatted-amount">-</span></p>
<p><strong>Formatted Date:</strong> <span id="formatted-date">-</span></p>
</div>
<script>
// Define the currency locales and corresponding currencies
const currencyLocales = [
{ locale: "en-US", currency: "USD" },
{ locale: "en-IN", currency: "INR" },
{ locale: "ja-JP", currency: "JPY" },
{ locale: "fr-FR", currency: "EUR" },
{ locale: "de-DE", currency: "EUR" }
];
// DOM elements
const amountInput = document.getElementById('amount');
const dateInput = document.getElementById('date');
const localeSelect = document.getElementById('locale');
const selectedLocaleDisplay = document.getElementById('selected-locale');
const formattedAmountDisplay = document.getElementById('formatted-amount');
const formattedDateDisplay = document.getElementById('formatted-date');
// Function to update the formatted output
function updateOutput() {
// Get the values from the inputs
const amount = parseFloat(amountInput.value) || 0;
const dateValue = dateInput.value ? new Date(dateInput.value) : new Date();
const selectedLocale = localeSelect.value;
// Find the corresponding currency for the selected locale
const selectedCurrency = (currencyLocales.find(item => item.locale === selectedLocale) || {}).currency || "USD";
// Format the amount
const formattedAmount = amount.toLocaleString(selectedLocale, {
style: 'currency',
currency: selectedCurrency
});
// Format the date
const formattedDate = dateValue.toLocaleDateString(selectedLocale);
// Update the HTML with the formatted values
selectedLocaleDisplay.textContent = selectedLocale;
formattedAmountDisplay.textContent = formattedAmount;
formattedDateDisplay.textContent = formattedDate;
}
// Add event listeners to update the output when inputs change
amountInput.addEventListener('input', updateOutput);
dateInput.addEventListener('input', updateOutput);
localeSelect.addEventListener('change', updateOutput);
// Initialize date input with today's date and trigger initial formatting
dateInput.value = new Date().toISOString().substr(0, 10);
updateOutput();
</script>
</body>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
