├── img ├── logo.png └── money.png ├── MIT.md ├── script.js ├── style.css ├── index.html └── README.md /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alejandroq12/exchange-rate-calculator/HEAD/img/logo.png -------------------------------------------------------------------------------- /img/money.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alejandroq12/exchange-rate-calculator/HEAD/img/money.png -------------------------------------------------------------------------------- /MIT.md: -------------------------------------------------------------------------------- 1 | ## Copyright 2023, [Julio Quezada] 2 | 3 | ###### Exchange Rate Calculator 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this Exchange Rate Calculator and associated documentation files, to deal in the Exchange Rate Calculator without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Exchange Rate Calculator, and to permit persons to whom the Exchange Rate Calculator is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Exchange Rate Calculator. 8 | 9 | THE EXCHANGE RATE CALCULATOR IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE EXCHANGE RATE CALCULATOR OR THE USE OR OTHER DEALINGS IN THE EXCHANGE RATE CALCULATOR. 10 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const currencyEl_one = document.getElementById('currency-one'); 2 | const amountEl_one = document.getElementById('amount-one'); 3 | const currencyEl_two = document.getElementById('currency-two'); 4 | const amountEl_two = document.getElementById('amount-two'); 5 | 6 | const rateEl = document.getElementById('rate'); 7 | const swap = document.getElementById('swap'); 8 | 9 | // Fetch exchange rates and update the DOM 10 | function calculate() { 11 | const currency_one = currencyEl_one.value; 12 | const currency_two = currencyEl_two.value; 13 | fetch( 14 | `https://v6.exchangerate-api.com/v6/a5845194cdcffe510122bf20/latest/${currency_one}` 15 | ) 16 | .then((res) => res.json()) 17 | .then((data) => { 18 | // console.log(data); 19 | const rate = data.conversion_rates[currency_two]; 20 | 21 | rateEl.innerText = `1 ${currency_one} = ${rate} ${currency_two}`; 22 | 23 | amountEl_two.value = (amountEl_one.value * rate).toFixed(2); 24 | }); 25 | } 26 | 27 | // Event listeners 28 | currencyEl_one.addEventListener('change', calculate); 29 | amountEl_one.addEventListener('input', calculate); 30 | currencyEl_two.addEventListener('change', calculate); 31 | amountEl_two.addEventListener('input', calculate); 32 | 33 | swap.addEventListener('click', () => { 34 | const temp = currencyEl_one.value; 35 | currencyEl_one.value = currencyEl_two.value; 36 | currencyEl_two.value = temp; 37 | 38 | calculate(); 39 | }); 40 | calculate(); 41 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #5fbaa7; 3 | } 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | margin: 0; 16 | padding: 20px; 17 | } 18 | 19 | h1 { 20 | color: var(--primary-color); 21 | text-align: center; 22 | } 23 | 24 | p { 25 | text-align: center; 26 | } 27 | 28 | .btn { 29 | color: #fff; 30 | background: var(--primary-color); 31 | cursor: pointer; 32 | border-radius: 5px; 33 | font-size: 12px; 34 | padding: 5px 12px; 35 | } 36 | 37 | .money-img { 38 | width: 150px; 39 | } 40 | 41 | .currency { 42 | padding: 40px 0; 43 | display: flex; 44 | align-items: center; 45 | justify-content: space-between; 46 | } 47 | 48 | .currency select { 49 | padding: 10px 20px 10px 10px; 50 | -moz-appearance: none; 51 | -webkit-appearance: none; 52 | appearance: none; 53 | border: 1px solid #dedede; 54 | font-size: 16px; 55 | background: transparent; 56 | background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%20000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); 57 | background-position: right 10px top 50%, 0, 0; 58 | background-size: 12px auto, 100%; 59 | background-repeat: no-repeat; 60 | } 61 | 62 | .currency input { 63 | border: 0; 64 | background: transparent; 65 | font-size: 30px; 66 | text-align: right; 67 | } 68 | 69 | .swap-rate-container { 70 | display: flex; 71 | align-items: center; 72 | justify-content: space-between; 73 | } 74 | 75 | .rate { 76 | color: var(--primary-color); 77 | font-size: 14px; 78 | padding: 0 10px; 79 | } 80 | 81 | select:focus, 82 | input:focus, 83 | button:focus { 84 | outline: 0; 85 | } 86 | 87 | @media (max-width: 600px) { 88 | .currency input { 89 | width: 200px; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exchange Rate Calculator 8 | 9 | 10 | 11 | Money image 12 |

Exchange Rate Calculator

13 |

Choose the currency and the amount to get the exchange rate

14 |
15 |
16 | 70 | 71 |
72 |
73 | 74 |
75 |
76 |
77 | 131 | 132 |
133 |
134 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | logo 5 |
6 | 7 |

Exchange Rate Calculator

8 | 9 |
10 | 11 | 12 | 13 | # 📗 Table of Contents 14 | 15 | - [📗 Table of Contents](#-table-of-contents) 16 | - [📖 Exchange Rate Calculator ](#-exchange-rate-calculator-) 17 | - [🛠 Built With ](#-built-with-) 18 | - [Tech Stack ](#tech-stack-) 19 | - [Key Features ](#key-features-) 20 | - [🚀 Live Demo ](#-live-demo-) 21 | - [💻 Getting Started ](#-getting-started-) 22 | - [Prerequisites](#prerequisites) 23 | - [Setup](#setup) 24 | - [Install](#install) 25 | - [Usage](#usage) 26 | - [Run tests](#run-tests) 27 | - [Deployment](#deployment) 28 | - [👥 Authors ](#-authors-) 29 | - [🔭 Future Features ](#-future-features-) 30 | - [🤝 Contributing ](#-contributing-) 31 | - [⭐️ Show your support ](#️-show-your-support-) 32 | - [🙏 Acknowledgments ](#-acknowledgments-) 33 | - [❓ FAQ ](#-faq-) 34 | - [📝 Disclaimer ](#-disclaimer-) 35 | - [📝 License ](#-license-) 36 | 37 | 38 | 39 | # 📖 Exchange Rate Calculator 40 | 41 | Meet the "Exchange Rate Calculator," a simple yet effective web-based tool built using Javascript, CSS, and HTML. This straightforward calculator enables users to convert between various global currencies with up-to-date exchange rates. With a clean design and easy-to-use interface, the Exchange Rate Calculator is a practical solution for travelers and anyone needing to perform currency conversions. Try it out for a hassle-free approach to managing foreign exchange. 42 | 43 | 44 | ## 🛠 Built With 45 | 46 | ### Tech Stack 47 | 48 |
49 | Frontend 50 | 55 |
56 | 57 | 58 | 59 | ### Key Features 60 | 61 | 62 | - **Wide currency selection: My calculator supports a comprehensive list of global currencies, making it easy to convert between your desired currency pairs.** 63 | 64 |

(back to top)

65 | 66 | 67 | 68 | ## 🚀 Live Demo 69 | 70 | 71 | - [Live Demo Link](https://alejandroq12.github.io/exchange-rate-calculator/) 72 | 73 |

(back to top)

74 | 75 | 76 | 77 | ## 💻 Getting Started 78 | 79 | 80 | To get a local copy up and running, follow these steps. 81 | 82 | ### Prerequisites 83 | 84 | In order to run this project you need: 85 | 86 | - Only a web browser. 87 | 88 | ### Setup 89 | 90 | Clone this repository to your desired folder: 91 | 92 | - Open the terminal and use the following command: 93 | 94 | ``` 95 | cd my-folder 96 | git clone https://github.com/Alejandroq12/exchange-rate-calculator.git 97 | ``` 98 | 99 | 100 | ### Install 101 | 102 | Install this project with: 103 | 104 | For this project you just need a web browser. 105 | 106 | ### Usage 107 | 108 | To run the project, execute the following command: 109 | 110 | For this project you just need to open the index.html file with your browser. 111 | 112 | ### Run tests 113 | 114 | No tests were added to this project. 115 | 116 | 117 | ### Deployment 118 | 119 | You can deploy this project using: 120 | 121 | You can deploy this project using: GitHub Pages, 122 | - I used GitHub Pages to deploy my website. 123 | - For more information about publishing sources, see "[About GitHub pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#publishing-sources-for-github-pages-sites)". 124 | 125 |

(back to top)

126 | 127 | 128 | 129 | ## 👥 Authors 130 | 131 | 👤 **Julio Quezada** 132 | 133 | - GitHub: [Alejandroq12](https://github.com/Alejandroq12) 134 | - Twitter: [@JulioAle54](https://twitter.com/JulioAle54) 135 | - LinkedIn: [Julio Quezada](https://www.linkedin.com/in/quezadajulio/) 136 | 137 | 138 |

(back to top)

139 | 140 | 141 | 142 | ## 🔭 Future Features 143 | 144 | - [ ] **I will add a header and footer.** 145 | - [ ] **I will add another page** 146 | 147 |

(back to top)

148 | 149 | 150 | 151 | ## 🤝 Contributing 152 | 153 | Contributions, issues, and feature requests are welcome! 154 | 155 | Feel free to check the [issues page](../../issues/). 156 | 157 |

(back to top)

158 | 159 | 160 | 161 | ## ⭐️ Show your support 162 | 163 | If you like this project please give me a star. 164 | 165 |

(back to top)

166 | 167 | 168 | 169 | ## 🙏 Acknowledgments 170 | 171 | I would like to thank Traversy Media for his amazing content and incredible learning platform. 172 | 173 |

(back to top)

174 | 175 | 176 | 177 | ## ❓ FAQ 178 | 179 | - **What did you learn?** 180 | 181 | - I learned a lot about event listeners. 182 | 183 |

(back to top)

184 | 185 | 186 | 187 | ## 📝 Disclaimer 188 | 189 | Disclaimer: I have created the Exchange Rate Calculator for informational purposes only, and it should not be relied upon for any financial decision-making. While I strive to ensure the accuracy of the exchange rates used in the calculations, I cannot guarantee their correctness at all times due to the volatile nature of currency markets. Users are advised to independently verify the exchange rates before making any financial transactions or commitments. As the developer of the Exchange Rate Calculator, I shall not be held responsible for any errors, omissions, or financial losses resulting from the use of this tool. 190 | 191 | 192 |

(back to top)

193 | 194 | 195 | 196 | ## 📝 License 197 | 198 | This project is [MIT](./MIT.md) licensed. 199 | 200 | 201 |

(back to top)

202 | 203 | --------------------------------------------------------------------------------