Commit 5d01f91

authored

Merge pull request #39 from tajulafreen/Currcency_converter

50Projects-HTML-CSS-JavaScript : Currcency converter

2 parents b122c9c + a94bc17 commit 5d01f91Copy full SHA for 5d01f91

File tree

+119

-0

lines changed

+119

-0

lines changed

Lines changed: 11 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -408,6 +408,17 @@ In order to run this project you need:`
`408`	`408`	`</details>`
`409`	`409`	`</li>`
`410`	`410`
	`411`	`+<li>`
	`412`	`+<details>`
	`413`	`+<summary>Currency Converter</summary>`
	`414`	`+<p>This project is a Currency Converter application built using HTML, CSS, and JavaScript. It allows users to convert one currency into another by inputting an amount and selecting the currencies they want to convert from and to.</p>`
	`415`	`+<ul>`
	`416`	`+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/CurrencyConverter/">Live Demo</a></li>`
	`417`	`+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/CurrencyConverter">Source</a></li>`
	`418`	`+</ul>`
	`419`	`+</details>`
	`420`	`+</li>`
	`421`	`+`
`411`	`422`	`</ol>`
`412`	`423`
`413`	`424`	`<p align="right">(<a href="#readme-top">back to top</a>)</p>`

Lines changed: 33 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,33 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+<head>`
	`4`	`+ <meta charset="UTF-8">`
	`5`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`6`	`+ <title>Currency Converter</title>`
	`7`	`+ <link rel="stylesheet" href="style.css">`
	`8`	`+</head>`
	`9`	`+<body>`
	`10`	`+ <div class="container">`
	`11`	`+ <h1>Currency Converter</h1>`
	`12`	`+ <div class="converter">`
	`13`	`+ <input type="number" id="amount" placeholder="Amount" />`
	`14`	`+ <select id="from-currency">`
	`15`	`+ <option value="USD">USD</option>`
	`16`	`+ <option value="EUR">EUR</option>`
	`17`	`+ <option value="INR">INR</option>`
	`18`	`+ <option value="GBP">GBP</option>`
	`19`	`+ </select>`
	`20`	`+ <span>to</span>`
	`21`	`+ <select id="to-currency">`
	`22`	`+ <option value="INR">INR</option>`
	`23`	`+ <option value="USD">USD</option>`
	`24`	`+ <option value="EUR">EUR</option>`
	`25`	`+ <option value="GBP">GBP</option>`
	`26`	`+ </select>`
	`27`	`+ <button id="convert">Convert</button>`
	`28`	`+ </div>`
	`29`	`+ <div id="result"></div>`
	`30`	`+ </div>`
	`31`	`+ <script src="script.js"></script>`
	`32`	`+</body>`
	`33`	`+</html>`

Lines changed: 27 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,27 @@`
	`1`	`+document.getElementById('convert').addEventListener('click', () => {`
	`2`	`+ const amount = document.getElementById('amount').value;`
	`3`	`+ const fromCurrency = document.getElementById('from-currency').value;`
	`4`	`+ const toCurrency = document.getElementById('to-currency').value;`
	`5`	`+`
	`6`	`+ if (amount === '' \|\| Number.isNaN(Number(amount))) {`
	`7`	`+ alert('Please enter a valid amount');`
	`8`	`+ return;`
	`9`	`+ }`
	`10`	`+`
	`11`	+ const apiUrl = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`;
	`12`	`+`
	`13`	`+ fetch(apiUrl)`
	`14`	`+ .then((response) => response.json())`
	`15`	`+ .then((data) => {`
	`16`	`+ const exchangeRate = data.rates[toCurrency];`
	`17`	`+ const convertedAmount = (amount * exchangeRate).toFixed(2);`
	`18`	`+ document.getElementById(`
	`19`	`+ 'result',`
	`20`	+ ).innerText = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`;
	`21`	`+ })`
	`22`	`+ .catch((error) => {`
	`23`	`+ document.getElementById(`
	`24`	`+ 'result',`
	`25`	+ ).innerText = `Error fetching exchange rates. ${error}Try again later.`;
	`26`	`+ });`
	`27`	`+});`

Lines changed: 48 additions & 0 deletions

Comments

(0)