From 6b13a5e74c9d00fbd440eaa5576e59ecd89ea07b Mon Sep 17 00:00:00 2001 From: Samar Khan Date: Fri, 19 Jan 2024 01:28:43 +0530 Subject: [PATCH] Files Added --- CurrencyConvertor/Samar-exe/index.html | 42 +++++++ .../Samar-exe/rupee-convertor.js | 76 +++++++++++ CurrencyConvertor/Samar-exe/style.css | 119 ++++++++++++++++++ 3 files changed, 237 insertions(+) create mode 100644 CurrencyConvertor/Samar-exe/index.html create mode 100644 CurrencyConvertor/Samar-exe/rupee-convertor.js create mode 100644 CurrencyConvertor/Samar-exe/style.css diff --git a/CurrencyConvertor/Samar-exe/index.html b/CurrencyConvertor/Samar-exe/index.html new file mode 100644 index 000000000..42dccbe01 --- /dev/null +++ b/CurrencyConvertor/Samar-exe/index.html @@ -0,0 +1,42 @@ + + + + Rupee convertor + + + + + + +

Welcome!!!!

+
+

+ This site contains a Javascript program that converts Indian rupee into + different country's currency. +

+

Please enter the amount you desire to convert and then click submit

+
+
+ +
+
+ + +
+
+

Output

+
+
    +
    +
    +
    +

    Contact me at : samarik2004@gmail.com

    +
    + + + diff --git a/CurrencyConvertor/Samar-exe/rupee-convertor.js b/CurrencyConvertor/Samar-exe/rupee-convertor.js new file mode 100644 index 000000000..e44ef2a3b --- /dev/null +++ b/CurrencyConvertor/Samar-exe/rupee-convertor.js @@ -0,0 +1,76 @@ +const conversionRates = { + us_dollar: 0.012, + riyal: 0.045, + euro: 0.0109, + cad: 0.0163, + yen: 1.7786, + rub: 1.0689, + won: 15.5345, + sgd: 0.0163, + yuan: 0.0855, +}; + +document.getElementById("submit").addEventListener("click", run); +document.getElementById("reset").addEventListener("click", resetForm); + +function run() { + const input = document.getElementById("num1"); + const userInput = Number(input.value); + + if (isNaN(userInput)) { + alert("Please enter a valid number."); + return; + } + + convertCurrency(userInput); +} + +function resetForm() { + document.getElementById("num1").value = 0; + clearResults(); +} + +function convertCurrency(amountInINR) { + clearResults(); + + for (const currencyCode in conversionRates) { + const convertedAmount = amountInINR * conversionRates[currencyCode]; + displayResult(currencyCode, convertedAmount.toFixed(2)); + } +} + +function clearResults() { + const resultList = document.getElementById("mylist"); + resultList.innerHTML = ''; +} + +function displayResult(currencyCode, convertedAmount) { + const countryNames = { + us_dollar: "USA", + riyal: "Saudi Arabia", + euro: "Europe", + cad: "Canada", + yen: "Japan", + rub: "Russia", + won: "Korea", + sgd: "Singapore", + yuan: "China", + }; + + const currencyNames = { + us_dollar: "Dollar", + riyal: "Riyal", + euro: "Euro", + cad: "Dollar", + yen: "Yen", + rub: "Rub", + won: "Won", + sgd: "Dollar", + yuan: "Yuan", + }; + + const resultList = document.getElementById("mylist"); + const listItem = document.createElement("li"); + listItem.innerText = `${countryNames[currencyCode]} ${currencyNames[currencyCode]}: ${convertedAmount}`; + resultList.appendChild(listItem); +} diff --git a/CurrencyConvertor/Samar-exe/style.css b/CurrencyConvertor/Samar-exe/style.css new file mode 100644 index 000000000..5d79bdfee --- /dev/null +++ b/CurrencyConvertor/Samar-exe/style.css @@ -0,0 +1,119 @@ +body { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Keeping the Cinzel font for an elegant touch */ + margin: 0; + padding: 0; + background: #1e1e1e; /* Dark Background */ + color: #ffffff; /* Light Text */ +} + +h1 { + font-size: 3em; + color: #ffffff; /* Light Text */ + text-align: center; + margin-top: 30px; +} +.para { + text-align: center; +} +p { + font-size: 1.2em; +} + +/* Input Styling */ +.input { + text-align: center; + margin-bottom: 20px; +} + +input { + font-size: 1.2em; + padding: 14px; + width: 80%; + border: 2px solid #4caf50; /* Accent Green */ + border-radius: 12px; + box-sizing: border-box; + background-color: #1e1e1e; /* Dark Background */ + color: #ffffff; /* Light Text */ + box-shadow: 0 0 10px rgba(100, 207, 204, 0.8); + -moz-appearance: textfield; + appearance: none; +} +input:focus { + outline: none; + border-color: #4caf50; + box-shadow: 0 0 10px rgba(52, 152, 219, 0.5); +} +input:hover { + transform: scale(1.02); + transition: transform 0.3s; +} +::-webkit-input-placeholder { + -webkit-appearance: none; + appearance: none; +} + +/* Button Styling */ +.button { + text-align: center; +} + +button { + font-size: 1.4em; + background-color: #4caf50; /* Accent Green */ + color: #ffffff; /* Light Text */ + padding: 14px 28px; + margin: 0 5px; + border: none; + border-radius: 12px; + cursor: pointer; + box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); + transition: transform 0.2s ease; +} + +button:hover { + background-color: #45a049; /* Slightly darker shade on hover */ + transform: scale(1.05); +} + +/* Result Styling */ +.result { + text-align: center; + margin-top: 20px; +} + +ul{ + list-style-type: none; +} +/* List Styling */ +#mylist li { + font-size: 1.2em; + margin-bottom: 15px; + padding: 14px; + border: 2px solid #4caf50; /* Accent Green */ + border-radius: 12px; + background-color: #1e1e1e; /* Dark Background */ + transition: background-color 0.3s ease; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 1685px; +} + +#mylist li:hover { + background-color: #22540882; /* Slightly darker shade on hover */ + transform: scale(1.02); + transition: transform 0.3s; +} + +/* Footer Styling */ +footer { + font-size: 1.2em; + text-align: center; + margin-top: 20px; + padding: 15px 0; + background: #1e1e1e; /* Dark Background */ + color: #ffffff; /* Light Text */ + border-top: 2px solid #4caf50; /* Accent Green */ +} +.contact { + display: flex; + justify-content: center; +}