Merge pull request #887 from Sulagna-Dutta-Roy/Sulagna

Added Currency Converter
Ayush7614 · Oct 22, 2022 · 4bf2b78 · 4bf2b78
2 parents 37677c0 + 2e5d165
commit 4bf2b78
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 0 deletions.
diff --git a/Currency Converter/README.md b/Currency Converter/README.md
@@ -0,0 +1,15 @@
+<h1>Currency Converter</h1>
+
+<h2>Tech Stack</h2>
+<ul>
+   <li>Html5</li>
+   <li>CSS</li>
+   <li>Javascript</li>
+</ul>
+
+<h2>Explanation:</h2>
+<p>I've used Frankfurter Api for this project. User can convert any currencies.</p>
+
+<h2>Demo:</h2>
+
+![Currency-converter](https://user-images.githubusercontent.com/72568715/196792687-aa1f9391-cb0d-4b08-a9bc-11d904f63532.PNG)
diff --git a/Currency Converter/Style.css b/Currency Converter/Style.css
@@ -0,0 +1,71 @@
+*
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.content {
+    width: 500px;
+    background-color: #dde1e7;
+    box-shadow: -3px -3px 7px #babecc,
+                2px 2px 5px rgba(94,104,121);
+    border-radius: 5px;
+    padding: 50px 50px;
+}
+.container {
+    width: 400px;
+}
+h1 {
+    color: #4d6366;
+    margin-bottom: 0.4em;
+    text-align: center;
+}
+.container .box{
+    width: 100%;
+    display: flex;
+}
+.box div {
+    width: 100%;
+}
+select {
+    width: 95%;
+    height: 40px;
+    font-size: 1em;
+    cursor: pointer;
+    outline: none;
+    background: #848885;
+    color: #fff;
+    margin: 0.2em 0;
+    padding: 0 1em;
+    border-radius: 10px;
+    border: none;
+}
+input {
+    width: 95%;
+    height: 40px;
+    font-size: 1em;
+    margin: 0.2em 0;
+    border-radius: 10px;
+    border: none;
+    background: #edeef7;
+    outline: none;
+    padding: 0 1em;
+}
+
+.btn {
+    width: 98%;
+    height: 40px;
+    background: rgb(18, 46, 71);
+    color: #fff;
+    border-radius: 10px;
+    border: none;
+    cursor: pointer;
+    font-size: 1em;
+    margin: 0.5em 0;
+}
diff --git a/Currency Converter/index.html b/Currency Converter/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width-device=width,initial-scale=1">
+    <title>Currency Converter</title>
+    <link rel="stylesheet" href="Style.css">
+</head>
+<body>
+<div class="content">
+    <div class="container">
+        <h1>Currency Converter</h1>
+        <div class="box">
+            <div class="left_box">
+                <select name="currency" class="currency"></select>
+                <input type="number" name="" id="num">
+            </div>
+            <div class="right_box">
+                <select name="currency" class="currency"></select>
+                <input type="text" name="" id="ans" disabled>
+            </div>
+        </div>
+        <button class="btn" id="btn">Convert</button>
+    </div>
+</div>
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/Currency Converter/script.js b/Currency Converter/script.js
@@ -0,0 +1,42 @@
+const select = document.querySelectorAll('.currency');
+const btn = document.getElementById('btn');
+const num = document.getElementById('num');
+const ans = document.getElementById('ans');
+
+fetch("https://api.frankfurter.app/currencies")
+    .then((data) => data.json())
+    .then((data) => {
+        display(data);
+    });
+
+function display(data) {
+    const entries = Object.entries(data);
+    for(var i = 0; i < entries.length; i++) {
+        select[0].innerHTML += `<option value = "${entries[i][0]}" > ${entries[i][0]}</option>`;
+        select[1].innerHTML += `<option value = "${entries[i][0]}" > ${entries[i][0]}</option>`;
+    }
+}
+btn.addEventListener('click', () => {
+    let currency1 = select[0].value;
+    let currency2 = select[1].value;
+    let value = num.value;
+
+    if(currency1 != currency2) {
+        convert(currency1, currency2, value);
+    }
+    else {
+        alert('Choose Different Currency');
+    }
+});
+
+function convert (currency1, currency2, value) {
+    const host = 'api.frankfurter.app';
+    fetch(
+        `https://${host}/latest?amount=${value}&from=${currency1}&to=${currency2}`
+    )
+    .then((val) => val.json())
+    .then((val) => {
+        console.log(Object.values(val.rates)[0]);
+        ans.value = Object.values(val.rates)[0];
+    });
+}