Added Calculator

3 files changed, 52 insertions, 3 deletions

diff --git a/index.html b/index.html
index b0c5487..a9b416b 100644
--- a/index.html
+++ b/index.html
@@ -20,14 +20,14 @@
                 </blockquote>
             </div>
             <div class="calculator">
-                <form>
+                <form id="calculate">
                     <div class="form-block">
-                        <label for="buyprice">Buying Price</label>
+                        <label for="buyprice">Listed Price</label>
                         <input type="text" name="buyprice" id="buyprice" class="afnum" placeholder="Buying Price (Gil)" required autocomplete="off">
                         <img class="gillogo" src="static/images/gil.webp" alt="Gil Logo">
                     </div>
                     <div class="form-block">
-                        <label for="sellprice">Selling Price</label>
+                        <label for="sellprice">Listing Price</label>
                         <input type="text" name="sellprice" id="sellprice" class="afnum" placeholder="Selling Price (Gil)" required autocomplete="off">
                         <img class="gillogo" src="static/images/gil.webp" alt="Gil Logo">
                     </div>
@@ -57,5 +57,6 @@
             </div>
         </div>
     </div>
+    <script src="static/js/script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index 5d44712..d8c567e 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -158,6 +158,14 @@ input[type="submit"] {
     margin-top: 2em;
 }
 
+.loss {
+    color: #9f1313;
+}
+
+.profit {
+    color: #008609;
+}
+
 .fflogo {
     width: 100%;
     max-width: 355px;
@@ -192,6 +200,7 @@ input[type="submit"] {
     font-weight: 700;
     font-family: 'Crimson Text', serif;
     color: #792200;
+    font-size: 12px;
 }
 
 a, .spl {
@@ -211,6 +220,9 @@ a:hover {
 
 #result {
     min-height: 54px;
+    font-weight: bold;
+    color: #64330b;
+    font-size: 13px;
 }
 
 @media screen and (max-width: 1000px) {
diff --git a/static/js/script.js b/static/js/script.js
new file mode 100644
index 0000000..9c4cc0e
--- /dev/null
+++ b/static/js/script.js
@@ -0,0 +1,36 @@
+const numInputs = document.querySelectorAll(".afnum");
+const calculateForm = document.getElementById("calculate");
+const result = document.getElementById("result");
+
+function commaSeparateNumber(val) {
+    while (/(\d+)(\d{3})/.test(val.toString())) {
+        val = val.toString().replace(/(\d+)(\d{3})/, "$1" + "," + "$2");
+    }
+    return val;
+}
+
+numInputs.forEach((input) => {
+    input.addEventListener("keyup", (e) => {
+        const num = e.target.value.replace(/\D/g, "");
+    });
+});
+
+calculateForm.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const buyPrice = document.getElementById("buyprice");
+    const sellPrice = document.getElementById("sellprice");
+    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 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 ? "<span class='profit'>make a profit</span>" : "<span class='loss'>suffer a loss</span>"} of ${commaSeparateNumber(Math.abs(profit))} Gil.`;
+    const statementElement = document.createElement("p");
+    statementElement.innerHTML = resultStatement;
+    result.innerHTML = "";
+    result.appendChild(statementElement);
+});