0
0
Fork 0

Add the functionality to the site

This commit is contained in:
Tyler-A 2019-05-21 18:41:28 -06:00
parent 45be126126
commit 3777ee8d7f
2 changed files with 107 additions and 1 deletions

View file

@ -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
View 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
};