logic & ui

Author: AyushSaini00

Currency-Converter/app.js

@@ -0,0 +1,38 @@
+const currency1InputElem = document.getElementById('currency-1');
+const selectCurrency1 = document.getElementById('select-currency-1');
+const currency2InputElem = document.getElementById('currency-2');
+const selectCurrency2 = document.getElementById('select-currency-2');
+const rateDetail = document.getElementById('rate-detail');
+
+calc();
+
+function calc(){
+    
+    const selectCurrency1value = selectCurrency1.value;
+    const selectCurrency2value = selectCurrency2.value;
+
+    fetch(`https://api.exchangerate-api.com/v4/latest/${selectCurrency1value}`)
+    .then(response => {
+        //if promise wasn't resolved
+        if(!response.ok){
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    })
+    .then(data => {
+        
+        const val = data.rates[selectCurrency2value];
+        currency2InputElem.value = (currency1InputElem.value * val).toFixed(3);
+        
+        rateDetail.innerText = `1 ${selectCurrency1value} = ${val.toFixed(3)} ${selectCurrency2value}`;
+    })
+    .catch(error => {
+        console.log('problem : ', error);
+    });
+}
+
+currency1InputElem.addEventListener('input', calc);
+currency2InputElem.addEventListener('input', calc);
+
+selectCurrency1.addEventListener('change', calc);
+selectCurrency2.addEventListener('change', calc);

Currency-Converter/index.html

@@ -10,8 +10,9 @@
     <div class="container">
         <h1 class="title">Currency Converter</h1>
         <div class="row">
-            <input type="number" name="currency-1" id="currency-1">
+            <input type="number" name="currency-1" id="currency-1" step="any">
             <select name="currency-1" id="select-currency-1">
+                <option value="EUR">EUR</option>
                 <option value="CAD">CAD</option>
                 <option value="HKD">HKD</option>
                 <option value="ISK">ISK</option>
@@ -38,18 +39,18 @@ <h1 class="title">Currency Converter</h1>
                 <option value="NOK">NOK</option>
                 <option value="NZD">NZD</option>
                 <option value="ZAR">ZAR</option>
-                <option value="USD">USD</option>
+                <option value="USD" selected>USD</option>
                 <option value="MXN">MXN</option>
                 <option value="ILS">ILS</option>
                 <option value="GBP">GBP</option>
                 <option value="KRW">KRW</option>
                 <option value="MYR">MYR</option>
             </select>
         </div>
-        <button id="btn">Convert</button>
         <div class="row">
-            <input type="number" name="currency-2" id="currency-2">
+            <input type="number" name="currency-2" id="currency-2" step="any">
             <select name="currency-2" id="select-currency-2">
+                <option value="EUR">EUR</option>
                 <option value="CAD">CAD</option>
                 <option value="HKD">HKD</option>
                 <option value="ISK">ISK</option>
@@ -61,7 +62,7 @@ <h1 class="title">Currency Converter</h1>
                 <option value="RON">RON</option>
                 <option value="SEK">SEK</option>
                 <option value="IDR">IDR</option>
-                <option value="INR">INR</option>
+                <option value="INR" selected>INR</option>
                 <option value="BRL">BRL</option>
                 <option value="RUB">RUB</option>
                 <option value="HRK">HRK</option>
@@ -84,9 +85,7 @@ <h1 class="title">Currency Converter</h1>
                 <option value="MYR">MYR</option>
             </select>
         </div>
-        <div id="rate-detail">
-            1 EUR = 87.6185 INR
-        </div>
+        <div id="rate-detail"></div>
     </div>
     <p class="footer">This project is a part of <a href="https://60minutejs.vercel.app/">60 Minute javascript</a></p>
     <script src="./app.js" type="text/javascript"></script>

Currency-Converter/style.css

@@ -3,10 +3,6 @@
     padding: 0;
     box-sizing: border-box;
 }
-*::before,
-*::after {
-    box-sizing: border-box;
-}
 html,
 body {
     font-size: 10px;
@@ -18,8 +14,8 @@ body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: #af8c9d;
-    background-image: linear-gradient(315deg, #af8c9d 0%, #8cacac 74%);
+    background-color: #6bc1c1;
+    background-image: linear-gradient(315deg, #73a6e8 0%, #64d7a1 74%);
 }
 .container {
     display: flex;
@@ -30,9 +26,7 @@ body {
     padding: 1.5rem;
     justify-content: space-evenly;
 }
-.title {
-    font-size: 3rem;
-}
+.title { font-size: 3rem; }
 .row {
     display: flex;
     justify-content: space-between;
@@ -41,39 +35,21 @@ body {
     padding: 1rem;
     border-radius: 0.5rem;
 }
-input {
-    margin-right: 2rem;
-}
+input { margin-right: 2rem; }
 input,
 select {
     font-size: 1.7rem;
     border: none;
     background: transparent;
 }
-#btn {
-    border: none;
-    padding: 1rem;
-    width: 50%;
-    border-radius: 0.5rem;
-    font-size: 2rem;
-    letter-spacing: 4px;
-    cursor: pointer;
-    background: linear-gradient(315deg, #e1aac5 0%, #97e8e8 74%);
-    color: black;
-}
-#btn:hover{
-    opacity: 0.7;
-    transition: 0.2s opacity ease;
-}
 #rate-detail {
     font-size: 1.8rem;
+    border-bottom: 3px dotted #035d66;
 }
 .footer {
     font-size: 1.2rem;
     position: relative;
     bottom: -2rem;
     letter-spacing: 1px;
 }
-.footer > a {
-    text-decoration: none;
-}
+.footer > a { text-decoration: none; }