1 Mill - Learn about Monetary Value
About this app
1 Mill App helps users understand the value of 1 million in various contexts, boosts financial literacy, and assists with simple budgeting scenarios.
1 Mill - Learn about Monetary Value 1 Mill - Understanding Monetary Values Enter an amount ($): Calculate
Related apps
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>1 Mill - Learn about Monetary Value</title>
<meta name="description" content="1 Mill App helps users understand the value of 1 million in various contexts, boosts financial literacy, and assists with simple budgeting scenarios.">
<meta name="keywords" content="Monetary value, Finance, Budgeting, Financial literacy, 1 million">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
const calculateBtn = document.getElementById('calculate-btn');
calculateBtn.addEventListener('click', calculateValues);
function calculateValues() {
const inputAmount = parseFloat(document.getElementById('amount-input').value);
const outputDiv = document.getElementById('output');
if (isNaN(inputAmount)) {
outputDiv.innerHTML = '<p class="text-danger">Please enter a valid number.</p>';
return;
}
const conversions = {
'dollars': inputAmount,
'hundreds': (inputAmount / 100).toFixed(2),
'thousands': (inputAmount / 1000).toFixed(2),
'millions': (inputAmount / 1000000).toFixed(2),
'billions': (inputAmount / 1000000000).toFixed(10)
};
outputDiv.innerHTML = `
<h5>Value Conversions:</h5>
<ul>
<li> Dollars: $${conversions.dollars.toLocaleString()} </li>
<li> Hundreds: $${conversions.hundreds.toLocaleString()} </li>
<li> Thousands: $${conversions.thousands.toLocaleString()} </li>
<li> Millions: $${conversions.millions.toLocaleString()} </li>
<li> Billions: $${conversions.billions.toLocaleString()} </li>
</ul>`;
}
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(to right, #74ebd5, #acb6e5);
color: #333;
}
#main-container {
padding: 20px;
border-radius: 10px;
background: white;
box-shadow: 0 4px 30px rgba(0,0,0,0.1);
margin-top: 50px;
}
h1 {
color: #5e7d8a;
}
input[type="number"] {
flex: 1;
margin-right: 10px;
}
.btn {
background-color: #5e4db2;
color: white;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #4d3a90;
}
.text-danger {
font-weight: bold;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center">1 Mill - Understanding Monetary Values</h1>
<div class="form-group">
<label for="amount-input">Enter an amount ($):</label>
<div class="d-flex">
<input type="number" id="amount-input" class="form-control" placeholder="Enter amount">
<button id="calculate-btn" class="btn">Calculate</button>
</div>
</div>
<div id="output" class="mt-3">
<!-- Calculated results will appear here -->
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!