├── currency converter ├── ppp.jfif ├── 9999-removebg-preview.png ├── script.js ├── style.css └── index.html └── README.md /currency converter/ppp.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/Currency-Converter/HEAD/currency converter/ppp.jfif -------------------------------------------------------------------------------- /currency converter/9999-removebg-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vinaykumarmahato/Currency-Converter/HEAD/currency converter/9999-removebg-preview.png -------------------------------------------------------------------------------- /currency converter/script.js: -------------------------------------------------------------------------------- 1 | //get reference to first select element 2 | const currencyEl_one = document.getElementById('currency-one'); 3 | 4 | //get reference to second select element 5 | const currencyEl_two = document.getElementById('currency-two'); 6 | 7 | //get reference to first input element 8 | const amountEl_one = document.getElementById('amount-one'); 9 | 10 | //get reference to second input element 11 | const amountEl_two = document.getElementById('amount-two'); 12 | 13 | //get reference to rate 14 | const rateEl = document.getElementById('rate'); 15 | 16 | //get reference to swap button 17 | const swap = document.getElementById('swap'); 18 | 19 | 20 | function calculate() { 21 | //getting value of first select 22 | const currency_one = currencyEl_one.value; 23 | 24 | //get reference to second select 25 | const currency_two = currencyEl_two.value; 26 | 27 | //fetching the api 28 | fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`) 29 | .then(function(response) { 30 | return response.json(); 31 | }) 32 | .then(function(data) { 33 | console.log(data); 34 | 35 | //searching for the second select element from the api object 36 | const rate = data.rates[currency_two]; 37 | 38 | //changing the rate text accordingly 39 | rateEl.innerText = `1 ${currency_one} = ${rate} ${currency_two}`; 40 | 41 | //changing the second input according to the rate 42 | amountEl_two.value = (amountEl_one.value * rate).toFixed(2); 43 | }); 44 | } 45 | 46 | //event for the first select element 47 | currencyEl_one.addEventListener('change', calculate); 48 | 49 | //event for the first input 50 | amountEl_one.addEventListener('input', calculate); 51 | 52 | //event for the second select element 53 | currencyEl_two.addEventListener('change', calculate); 54 | 55 | //event for the second input 56 | amountEl_two.addEventListener('input', calculate); 57 | 58 | //eveny for swap button 59 | swap.addEventListener('click', function() { 60 | const temp = currencyEl_one.value; 61 | 62 | currencyEl_one.value = currencyEl_two.value; 63 | 64 | currencyEl_two.value = temp; 65 | calculate(); 66 | }); 67 | 68 | calculate(); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ## Currency Converter [check](https://currencyconverteradv.netlify.app/) 3 | This is a simple currency converter web application that allows you to convert between different currencies. You can select two currencies, enter an amount in the first currency, and the equivalent amount will be displayed in the second currency based on the current exchange rate. 4 | 5 | ## Usage 6 | To use the currency converter, follow these steps: 7 | 8 | Clone or download the repository to your local machine. 9 | Open the index.html file in your web browser. 10 | ## Features 11 | Currency Selection: You can choose the currencies you want to convert between using two dropdown menus. The first dropdown represents the currency you have, and the second dropdown represents the currency you want to convert to. 12 | 13 | ## Amount Entry: Enter the amount of the first currency you want to convert in the input field next to the first dropdown. 14 | 15 | ## Conversion: Once you have selected the currencies and entered the amount, the equivalent amount in the second currency will be automatically calculated and displayed. 16 | 17 | ## Swap: Click on the "click me for Converter" button to swap the currencies and recalculate the conversion. This feature is useful if you want to switch between the two currencies without changing the amount. 18 | 19 | ## Supported Currencies 20 | The currency converter supports the following currencies: 21 | 22 | - AED (United Arab Emirates Dirham) 23 | - ARS (Argentine Peso) 24 | - AUD (Australian Dollar) 25 | - BGN (Bulgarian Lev) 26 | - BRL (Brazilian Real) 27 | - BSD (Bahamian Dollar) 28 | - CAD (Canadian Dollar) 29 | - CHF (Swiss Franc) 30 | - CLP (Chilean Peso) 31 | - CNY (Chinese Yuan) 32 | - COP (Colombian Peso) 33 | - CZK (Czech Koruna) 34 | - DKK (Danish Krone) 35 | - DOP (Dominican Peso) 36 | - EGP (Egyptian Pound) 37 | - EUR (Euro) 38 | - FJD (Fijian Dollar) 39 | - GBP (British Pound Sterling) 40 | - GTQ (Guatemalan Quetzal) 41 | - HKD (Hong Kong Dollar) 42 | - HRK (Croatian Kuna) 43 | - HUF (Hungarian Forint) 44 | - IDR (Indonesian Rupiah) 45 | - ILS (Israeli New Shekel) 46 | - INR (Indian Rupee) 47 | - ISK (Icelandic Króna) 48 | - JPY (Japanese Yen) 49 | - KRW (South Korean Won) 50 | - KZT (Kazakhstani Tenge) 51 | - MXN (Mexican Peso) 52 | - MYR (Malaysian Ringgit) 53 | - NOK (Norwegian Krone) 54 | - NZD (New Zealand Dollar) 55 | - PAB (Panamanian Balboa) 56 | - PEN (Peruvian Sol) 57 | - PHP (Philippine Peso) 58 | - PKR (Pakistani Rupee) 59 | - PLN (Polish Złoty) 60 | - PYG (Paraguayan Guarani) 61 | - RON (Romanian Leu) 62 | - RUB (Russian Ruble) 63 | - SAR (Saudi Riyal) 64 | - SEK (Swedish Krona) 65 | - SGD (Singapore Dollar) 66 | - THB (Thai Baht) 67 | - TRY (Turkish Lira) 68 | - TWD (New Taiwan Dollar) 69 | - UAH (Ukrainian Hryvnia) 70 | - USD (United States Dollar) 71 | - UYU (Uruguayan Peso) 72 | - VND (Vietnamese Đồng) 73 | - ZAR (South African Rand) 74 | ## Credits 75 | This project was created by ADV indian coder vinay kumar and is available on GitHub https://github.com/ADVindiancoder/Currency-Converter/tree/main 76 | 77 | Feel free to contribute to this project by submitting pull requests or reporting issues. 78 | 79 | License 80 | This currency converter is open-source and available under the [MIT License]. 81 | -------------------------------------------------------------------------------- /currency converter/style.css: -------------------------------------------------------------------------------- 1 | /* Reset some default styles */ 2 | body, h1, h2, h3, h4, h5, h6, p, ul, li, select, input, textarea { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* Add general styling */ 9 | body { 10 | font-family: Arial, sans-serif; 11 | background-color: hsl(200, 10%, 94%); 12 | color: #333; 13 | } 14 | 15 | .header { 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | background-color: #21c3d8; /* Adjust this color as per your preference */ 20 | padding: 1px; 21 | } 22 | 23 | .profile-img { 24 | width: 100px; /* Adjust the width as per your profile picture */ 25 | height: 100px; /* Adjust the height as per your profile picture */ 26 | border-radius: 10%; 27 | margin-right: 10px; 28 | } 29 | 30 | .container { 31 | max-width: 600px; 32 | margin: 0 auto; 33 | padding: 20px; 34 | background-color: #8dd6ec; 35 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 36 | border-radius: 10px; 37 | } 38 | 39 | .currency { 40 | display: flex; 41 | align-items: center; 42 | margin-bottom: 20px; 43 | } 44 | 45 | .currency select { 46 | flex: 1; 47 | padding: 10px; 48 | font-size: 16px; 49 | border: none; 50 | background-color: #5e924a; 51 | border-radius: 5px; 52 | } 53 | 54 | .currency input { 55 | flex: 1; 56 | padding: 10px; 57 | font-size: 16px; 58 | margin-left: 10px; 59 | border: none; 60 | background-color: hsl(210, 17%, 98%); 61 | border-radius: 5px; 62 | } 63 | 64 | .swap-rate-container { 65 | display: flex; 66 | align-items: center; 67 | justify-content: space-between; 68 | margin-bottom: 20px; 69 | } 70 | 71 | .btn { 72 | padding: 10px 20px; 73 | background-color: #007bff; /* Adjust this color as per your preference */ 74 | color: #fff; 75 | border: none; 76 | cursor: pointer; 77 | font-size: 16px; 78 | border-radius: 4px; 79 | transition: background-color 0.3s ease; 80 | } 81 | 82 | .btn:hover { 83 | background-color: #0056b3; /* Adjust this color as per your preference */ 84 | } 85 | 86 | .rate { 87 | font-size: 18px; 88 | font-weight: bold; 89 | } 90 | 91 | /* Contact section styling */ 92 | .contact { 93 | background-color: #f0f0f0; 94 | padding: 40px 20px; 95 | border-radius: 10px; 96 | } 97 | 98 | .contact__container { 99 | display: grid; 100 | gap: 1rem; 101 | } 102 | 103 | .contact__content { 104 | padding: 20px; 105 | background-color: #fff; 106 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 107 | border-radius: 5px; 108 | } 109 | 110 | .contact__title { 111 | font-size: 24px; 112 | font-weight: bold; 113 | margin-bottom: 20px; 114 | } 115 | 116 | .contact__info { 117 | display: grid; 118 | gap: 1rem; 119 | justify-items: center; 120 | } 121 | 122 | .contact__card { 123 | text-align: center; 124 | } 125 | 126 | .contact__card-icon { 127 | font-size: 24px; 128 | color: #007bff; /* Adjust this color as per your preference */ 129 | } 130 | 131 | .contact__card-title { 132 | font-size: 18px; 133 | font-weight: bold; 134 | margin: 10px 0; 135 | } 136 | 137 | .contact__card-data { 138 | font-size: 16px; 139 | color: #555; 140 | } 141 | 142 | .contact__button { 143 | display: inline-block; 144 | margin-top: 10px; 145 | color: #007bff; /* Adjust this color as per your preference */ 146 | text-decoration: none; 147 | } 148 | 149 | .contact__button:hover { 150 | text-decoration: underline; 151 | } 152 | 153 | .contact__form { 154 | display: grid; 155 | gap: 1rem; 156 | } 157 | 158 | .contact__form-div { 159 | display: flex; 160 | flex-direction: column; 161 | } 162 | 163 | .contact__form-tag { 164 | font-size: 16px; 165 | font-weight: bold; 166 | margin-bottom: 5px; 167 | } 168 | 169 | .contact__form-input, 170 | .contact__form-area { 171 | padding: 10px; 172 | font-size: 16px; 173 | border: 1px solid #ccc; 174 | border-radius: 4px; 175 | width: 100%; 176 | } 177 | 178 | .contact__form-area { 179 | resize: vertical; 180 | } 181 | 182 | .button { 183 | padding: 10px 20px; 184 | background-color: #007bff; /* Adjust this color as per your preference */ 185 | color: #007bff; 186 | border: none; 187 | cursor: pointer; 188 | font-size: 16px; 189 | border-radius: 4px; 190 | transition: background-color 0.3s ease; 191 | } 192 | 193 | .button:hover { 194 | background-color: #0056b3; /* Adjust this color as per your preference */ 195 | } 196 | 197 | /* Responsive styles */ 198 | @media screen and (max-width: 768px) { 199 | .container { 200 | padding: 10px; 201 | } 202 | 203 | .currency { 204 | flex-direction: column; 205 | align-items: center; 206 | } 207 | 208 | .currency select { 209 | margin-bottom: 10px; 210 | } 211 | 212 | .swap-rate-container { 213 | flex-direction: column; 214 | align-items: center; 215 | } 216 | } 217 | -------------------------------------------------------------------------------- /currency converter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Currency Converter 9 | 10 | 11 | 12 | 13 |
14 | 15 | Profile Picture 16 |

Currency Converter

17 |
18 |
19 |
20 | 77 | 78 |
79 |
80 | 81 |
82 |
83 |
84 | 141 | 142 |
143 |
144 | 145 | 146 | 147 | 148 | 149 | --------------------------------------------------------------------------------