Files Added

thinkswell · Jan 18, 2024 · 6b13a5e · 6b13a5e
1 parent dfb62bb
commit 6b13a5e
Show file tree

Hide file tree

Showing 3 changed files with 237 additions and 0 deletions.
diff --git a/CurrencyConvertor/Samar-exe/index.html b/CurrencyConvertor/Samar-exe/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Rupee convertor</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap"
+    />
+  </head>
+  <body>
+    <h1>Welcome!!!!</h1>
+    <div class="para">
+      <p>
+        This site contains a Javascript program that converts Indian rupee into
+        different country's currency.
+      </p>
+      <p>Please enter the amount you desire to convert and then click submit</p>
+    </div>
+    <div class="input">
+      <input type="number" value="0" id="num1" />
+    </div>
+    <div class="button">
+      <button type="button" onclick="run()" id="submit">Submit</button>
+      <button type="button" onclick="location.reload()" id="reset">
+        Reset
+      </button>
+    </div>
+    <div class="result">
+      <h1>Output</h1>
+      <div id="final">
+        <ul id="mylist"></ul>
+      </div>
+    </div>
+    <div class="contact">
+      <h2>Contact me at : [email protected]</h2>
+    </div>
+    <script src="rupee-convertor.js"></script>
+  </body>
+</html>
diff --git a/CurrencyConvertor/Samar-exe/rupee-convertor.js 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
@@ -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;
+}