Add the functionality to the site
This commit is contained in:
parent
45be126126
commit
3777ee8d7f
2 changed files with 107 additions and 1 deletions
43
index.html
43
index.html
|
|
@ -4,11 +4,52 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="./script.js"></script>
|
||||
<title>D&D Currency Converter</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>D&D Currency Converter</h1>
|
||||
<div class="centered">
|
||||
<select id="from-in">
|
||||
<option value="error">Choose Currency</option>
|
||||
<option value="0">Bronze</option>
|
||||
<option value="1">Silver</option>
|
||||
<option value="2">Gold</option>
|
||||
<option value="3">Platinum</option>
|
||||
</select>
|
||||
<img src="./assets/icons/right-arrow.svg" alt="--------->" width="62px" height="45px">
|
||||
<select id="to-in">
|
||||
<option value="error">Choose Currency</option>
|
||||
<option value="0">Bronze</option>
|
||||
<option value="1">Silver</option>
|
||||
<option value="2">Gold</option>
|
||||
<option value="3">Platinum</option>
|
||||
</select>
|
||||
<br>
|
||||
<input type="text" id="amount" placeholder="Amount of Money">
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="centered">
|
||||
<button onclick="convert()">Convert</button>
|
||||
<br>
|
||||
<div>
|
||||
<h3 id="response-area"></h3>
|
||||
</div>
|
||||
</div>
|
||||
<br><br><br><br>
|
||||
<div class="centered">
|
||||
Arrow icon made by
|
||||
<a href="https://www.flaticon.com/authors/lyolya" title="Lyolya">Lyolya</a>
|
||||
from <a href="https://www.flaticon.com/" title="Flaticon">flaticon</a>
|
||||
is licensed by
|
||||
<a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">
|
||||
CC 3.0 BY</a>
|
||||
</div>
|
||||
<div>
|
||||
Source is auditable <a href="">here</a>.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
65
script.js
Normal file
65
script.js
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
const value_dict = {
|
||||
0: "Bronze",
|
||||
1: "Silver",
|
||||
2: "Gold",
|
||||
3: "Platinum"
|
||||
}
|
||||
|
||||
|
||||
|
||||
const calculate_remainder = (amount, delta) => {
|
||||
if (delta < 0) {
|
||||
return amount % 10 ** Math.abs(delta)
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const convert_to = (amount, delta) => {
|
||||
return Math.floor(amount * 10 ** delta)
|
||||
};
|
||||
|
||||
|
||||
|
||||
const convert = () => {
|
||||
let from_currency = parseInt(document.getElementById("from-in").value);
|
||||
let to_currency = parseInt(document.getElementById("to-in").value);
|
||||
let value = parseInt(document.getElementById("amount").value)
|
||||
let response_area = document.getElementById("response-area");
|
||||
|
||||
let delta = from_currency - to_currency
|
||||
|
||||
|
||||
// Ensure that they have selected coins so we can convert
|
||||
if (isNaN(from_currency) || isNaN(to_currency)) {
|
||||
response_area.innerText = "ERROR: Both sides of the conversion must have a selected coin type."
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
// Ensure we aren't converting to the same type of coin
|
||||
if (delta === 0) {
|
||||
response_area.innerText = "ERROR: Cannot convert from one coin to the same coin"
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
const remainder = calculate_remainder(value, delta);
|
||||
const amount = convert_to(value, delta);
|
||||
|
||||
|
||||
let response = "";
|
||||
|
||||
|
||||
response += `${value_dict[to_currency]}: ${amount}`
|
||||
|
||||
|
||||
// Check if we can't go into a whole number of the new coins
|
||||
if (remainder !== 0) {
|
||||
response += `<br>${value_dict[from_currency]}: ${remainder}`
|
||||
}
|
||||
|
||||
|
||||
response_area.innerHTML = response
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue