From c4e3cfc22ec8d3476b58b3211815571f7e61b67f Mon Sep 17 00:00:00 2001 From: Bobby <30593201+luciferreeves@users.noreply.github.com> Date: Thu, 6 Apr 2023 07:34:23 +0000 Subject: Update interface with better table layout --- index.html | 27 ++++++++++++++------------- static/css/main.css | 49 ++++++++++++++++++++++++++++++++++++++++--------- static/js/script.js | 45 +++++++++++++++++++++++++++++++++++++-------- 3 files changed, 91 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index a9b416b..1088334 100644 --- a/index.html +++ b/index.html @@ -18,17 +18,26 @@

Saw that sweet sweet item that got listed accidentally for 400 Gil, while it should be 400,000 Gil and wondered if you buy it and sell it again, how much profit you would make? You know you pay tax both ways, but how much will you end up with?

+
+

+ 1. All graphics and icons used in this website are licensed under the Creative Commons Attribution-NonCommercial 4.0 International License. +
+ 2. This project is not affiliated with Square Enix Co., Ltd. or any of its subsidiaries. The Final Fantasy XIV logo is a trademark of Square Enix Co., Ltd. +
+ 3. This project is licensed under the MIT License. The source code can be found on GitHub. +

+
- - + +
- - + +
@@ -45,15 +54,7 @@
-
-

- 1. All graphics and icons used in this website are licensed under the Creative Commons Attribution-NonCommercial 4.0 International License. -
- 2. This project is not affiliated with Square Enix Co., Ltd. or any of its subsidiaries. The Final Fantasy XIV logo is a trademark of Square Enix Co., Ltd. -
- 3. This project is licensed under the MIT License. The source code can be found on GitHub. -

-
+
diff --git a/static/css/main.css b/static/css/main.css index d8c567e..4b9553e 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital@0;1&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400&display=swap'); * { margin: 0; padding: 0; @@ -22,6 +22,7 @@ body { padding: 0; display: flex; justify-content: center; + font-weight: 400; font-family: 'Crimson Text', serif; } @@ -46,8 +47,7 @@ label { input[type="text"] { font-size: 1rem; - font-weight: bold; - color: #8b6b00; + color: #472504; font-family: 'Crimson Text', serif; background-color: rgba(183, 154, 26, 0.2); border: 2px solid #795b00; @@ -138,7 +138,7 @@ input[type="submit"] { .calculator { width: 100%; max-width: 460px; - padding: 20px; + padding: 20px 20px 0px 20px; background-color: #ffefd0bd; border: 2px solid Gold; border-radius: 8px; @@ -183,12 +183,11 @@ input[type="submit"] { } .blockquote { - padding: 20px; + padding: 15px; } .quote { - font-size: 1.4rem; - line-height: 1.4; + font-size: 1.1rem; font-style: italic; text-align: justify; } @@ -197,7 +196,7 @@ input[type="submit"] { margin-top: 0.5em; border-top: 1px solid #795b00; padding-top: 0.5em; - font-weight: 700; + font-weight: 400; font-family: 'Crimson Text', serif; color: #792200; font-size: 12px; @@ -212,10 +211,42 @@ a:hover { color: #9b7a0d; } +table { + width: 100%; + border-collapse: collapse; + border: 1px solid #795b00; + border-radius: 8px; + margin-bottom: 1em; + font-size: 1.1rem; +} + +td { + border-right: 1px solid #795b00; + padding: 0.5em; +} + +tr { + border-bottom: 1px solid #795b00; +} + +td:first-child { + font-weight: 700; +} + +td:last-child { + text-align: right; + font-weight: 400; +} + +tr:last-child { + border-top: 2px solid #795b00; +} + + .credit-text { font-size: 12px; - font-weight: 700; color: #2e345a; + padding: 15px; } #result { diff --git a/static/js/script.js b/static/js/script.js index 9c4cc0e..caf78d1 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -11,7 +11,9 @@ function commaSeparateNumber(val) { numInputs.forEach((input) => { input.addEventListener("keyup", (e) => { - const num = e.target.value.replace(/\D/g, ""); + const value = e.target.value; + const formattedValue = commaSeparateNumber(value.replace(/\D/g, "")); + e.target.value = formattedValue; }); }); @@ -22,15 +24,42 @@ calculateForm.addEventListener("submit", (e) => { const reducedTaxes = document.getElementById("taxrates"); const buyTaxRate = 0.05; const sellTaxRate = reducedTaxes.checked ? 0.03 : 0.05; - const buyPriceValue = buyPrice.value.replace(/\D/g, ""); - const sellPriceValue = sellPrice.value.replace(/\D/g, ""); + const buyPriceValue = parseInt(buyPrice.value.replace(/\D/g, "")); + const sellPriceValue = parseInt(sellPrice.value.replace(/\D/g, "")); const buyTax = Math.ceil(buyPriceValue * buyTaxRate); const sellTax = Math.ceil(sellPriceValue * sellTaxRate); const profit = sellPriceValue - buyPriceValue - buyTax - sellTax; - - const resultStatement = `For an item listed at ${commaSeparateNumber(buyPriceValue)} Gil, you will pay ${commaSeparateNumber(buyTax)} Gil in taxes. If you sell the item for ${commaSeparateNumber(sellPriceValue)} Gil, you will pay ${commaSeparateNumber(sellTax)} Gil in taxes. After all taxes are paid, you will ${profit > 0 ? "make a profit" : "suffer a loss"} of ${commaSeparateNumber(Math.abs(profit))} Gil.`; - const statementElement = document.createElement("p"); - statementElement.innerHTML = resultStatement; + const timesProfit = profit / (buyPriceValue + buyTax); + + const resultDisplay = ` + + + + + + + + + + + + + + + + + + + + + + +
Buying Cost:${commaSeparateNumber(buyPriceValue)} Gil
Buying Tax:${commaSeparateNumber(buyTax)} Gil
Selling Cost:${commaSeparateNumber(sellPriceValue)} Gil
Selling Tax:${commaSeparateNumber(sellTax)} Gil
${profit > 0 ? "Profit" : "Loss"}:${commaSeparateNumber(Math.abs(profit))} Gil + ${profit > 0 ? `(${timesProfit.toFixed(2)}x returns)` : `(${timesProfit.toFixed(2)}x loss)`}
+ `; + + const resultElement = document.createElement("div"); + resultElement.innerHTML = resultDisplay; result.innerHTML = ""; - result.appendChild(statementElement); + result.appendChild(resultElement); }); -- cgit v1.2.3