-onsubmit calculate +oninput calculate/reverseCalculate _+reverseCalculate

js/01/index.html

@@ -38,18 +38,17 @@
                     });
             }
             const exchangeForm = `
-            <form action="" class="form" onsubmit="calculate(event)">
+            <form action="" class="form" >
                 <div class="form-body">
                     <label for="">Currency:</label>
-                    <select type="number" name="currency" class="form-input" id = "currency">
+                    <select type="number" name="currency" class="form-input" id = "currency" onchange = "calculate()">
                     </select>
                     <label for="#amount">Amount</label>
-                    <input type="number" name="Amount" id="amount" class="form-input" id="" value="0" />
-                    <button type="submit" class="form-btn btn">Calculate</button>
+                    <input type="number" name="amount" id="amount" class="form-input" id="" value="1" oninput = "calculate()"/>
                 </div>
                 <div class="form-footer">
                     <label for="USD">USD</label>
-                    <input type="text" name="USD" placeholder="0" id="USD" class="form-input" readonly />
+                    <input type="text" name="USD" placeholder="0" id="USD" class="form-input" oninput = "reverseCalculate()"/>
                 </div>
             </form>
             `;
@@ -87,6 +86,7 @@
                     document.querySelector("div.container-form").innerHTML = exchangeForm;
                     updateCurrencyBlock();
                     removeAlert("", "error");
+                    calculate();
                 } else {
                     document.querySelector("div.container-form").innerHTML = authForm;
                     document.querySelector("div.header").innerHTML = "";
@@ -157,12 +157,25 @@
                 checkIsAuth();
             }
 
+            function reverseCalculate(e) {
+                let currency = document.querySelector('select[name="currency"]').selectedOptions[0].value;
+                let amount = +document.querySelector('input[name="USD"]')?.value ?? 0;
+
+                if (amount <= 0) {
+                    addAlert("Amount field value should be greater than 0!", "error");
+                    return;
+                }
+
+                removeAlert("Amount field value should be greater than 0!", "error");
+
+                document.querySelector('input[name="amount"]').value = (amount * +exchangeRates[currency]).toFixed(3);
+            }
+
             function calculate(e) {
-                e?.preventDefault();
-                let currency = e.target.elements.currency.selectedOptions[0].value;
-                let amount = +e.target.elements.amount?.value ?? 0;
+                let currency = document.querySelector('select[name="currency"]').selectedOptions[0].value;
+                let amount = +document.querySelector('input[name="amount"]')?.value ?? 0;
 
-                if (amount < 0) {
+                if (amount <= 0) {
                     addAlert("Amount field value should be greater than 0!", "error");
                     return;
                 }