Skip to content

Commit 6b13a5e

Browse files
Samar-exeSamar-exe
committed
Files Added
1 parent dfb62bb commit 6b13a5e

File tree

3 files changed

+237
-0
lines changed

3 files changed

+237
-0
lines changed

‎CurrencyConvertor/Samar-exe/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Rupee convertor</title>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link rel="stylesheet" href="style.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap"
11+
/>
12+
</head>
13+
<body>
14+
<h1>Welcome!!!!</h1>
15+
<div class="para">
16+
<p>
17+
This site contains a Javascript program that converts Indian rupee into
18+
different country's currency.
19+
</p>
20+
<p>Please enter the amount you desire to convert and then click submit</p>
21+
</div>
22+
<div class="input">
23+
<input type="number" value="0" id="num1" />
24+
</div>
25+
<div class="button">
26+
<button type="button" onclick="run()" id="submit">Submit</button>
27+
<button type="button" onclick="location.reload()" id="reset">
28+
Reset
29+
</button>
30+
</div>
31+
<div class="result">
32+
<h1>Output</h1>
33+
<div id="final">
34+
<ul id="mylist"></ul>
35+
</div>
36+
</div>
37+
<div class="contact">
38+
<h2>Contact me at : samarik2004@gmail.com</h2>
39+
</div>
40+
<script src="rupee-convertor.js"></script>
41+
</body>
42+
</html>

‎CurrencyConvertor/Samar-exe/rupee-convertor.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
const conversionRates = {
2+
us_dollar: 0.012,
3+
riyal: 0.045,
4+
euro: 0.0109,
5+
cad: 0.0163,
6+
yen: 1.7786,
7+
rub: 1.0689,
8+
won: 15.5345,
9+
sgd: 0.0163,
10+
yuan: 0.0855,
11+
};
12+
13+
document.getElementById("submit").addEventListener("click", run);
14+
document.getElementById("reset").addEventListener("click", resetForm);
15+
16+
function run() {
17+
const input = document.getElementById("num1");
18+
const userInput = Number(input.value);
19+
20+
if (isNaN(userInput)) {
21+
alert("Please enter a valid number.");
22+
return;
23+
}
24+
25+
convertCurrency(userInput);
26+
}
27+
28+
function resetForm() {
29+
document.getElementById("num1").value = 0;
30+
clearResults();
31+
}
32+
33+
function convertCurrency(amountInINR) {
34+
clearResults();
35+
36+
for (const currencyCode in conversionRates) {
37+
const convertedAmount = amountInINR * conversionRates[currencyCode];
38+
displayResult(currencyCode, convertedAmount.toFixed(2));
39+
}
40+
}
41+
42+
function clearResults() {
43+
const resultList = document.getElementById("mylist");
44+
resultList.innerHTML = '';
45+
}
46+
47+
function displayResult(currencyCode, convertedAmount) {
48+
const countryNames = {
49+
us_dollar: "USA",
50+
riyal: "Saudi Arabia",
51+
euro: "Europe",
52+
cad: "Canada",
53+
yen: "Japan",
54+
rub: "Russia",
55+
won: "Korea",
56+
sgd: "Singapore",
57+
yuan: "China",
58+
};
59+
60+
const currencyNames = {
61+
us_dollar: "Dollar",
62+
riyal: "Riyal",
63+
euro: "Euro",
64+
cad: "Dollar",
65+
yen: "Yen",
66+
rub: "Rub",
67+
won: "Won",
68+
sgd: "Dollar",
69+
yuan: "Yuan",
70+
};
71+
72+
const resultList = document.getElementById("mylist");
73+
const listItem = document.createElement("li");
74+
listItem.innerText = `${countryNames[currencyCode]} ${currencyNames[currencyCode]}: ${convertedAmount}`;
75+
resultList.appendChild(listItem);
76+
}

‎CurrencyConvertor/Samar-exe/style.css‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
body {
2+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Keeping the Cinzel font for an elegant touch */
3+
margin: 0;
4+
padding: 0;
5+
background: #1e1e1e; /* Dark Background */
6+
color: #ffffff; /* Light Text */
7+
}
8+
9+
h1 {
10+
font-size: 3em;
11+
color: #ffffff; /* Light Text */
12+
text-align: center;
13+
margin-top: 30px;
14+
}
15+
.para {
16+
text-align: center;
17+
}
18+
p {
19+
font-size: 1.2em;
20+
}
21+
22+
/* Input Styling */
23+
.input {
24+
text-align: center;
25+
margin-bottom: 20px;
26+
}
27+
28+
input {
29+
font-size: 1.2em;
30+
padding: 14px;
31+
width: 80%;
32+
border: 2px solid #4caf50; /* Accent Green */
33+
border-radius: 12px;
34+
box-sizing: border-box;
35+
background-color: #1e1e1e; /* Dark Background */
36+
color: #ffffff; /* Light Text */
37+
box-shadow: 0 0 10px rgba(100, 207, 204, 0.8);
38+
-moz-appearance: textfield;
39+
appearance: none;
40+
}
41+
input:focus {
42+
outline: none;
43+
border-color: #4caf50;
44+
box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
45+
}
46+
input:hover {
47+
transform: scale(1.02);
48+
transition: transform 0.3s;
49+
}
50+
::-webkit-input-placeholder {
51+
-webkit-appearance: none;
52+
appearance: none;
53+
}
54+
55+
/* Button Styling */
56+
.button {
57+
text-align: center;
58+
}
59+
60+
button {
61+
font-size: 1.4em;
62+
background-color: #4caf50; /* Accent Green */
63+
color: #ffffff; /* Light Text */
64+
padding: 14px 28px;
65+
margin: 0 5px;
66+
border: none;
67+
border-radius: 12px;
68+
cursor: pointer;
69+
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
70+
transition: transform 0.2s ease;
71+
}
72+
73+
button:hover {
74+
background-color: #45a049; /* Slightly darker shade on hover */
75+
transform: scale(1.05);
76+
}
77+
78+
/* Result Styling */
79+
.result {
80+
text-align: center;
81+
margin-top: 20px;
82+
}
83+
84+
ul{
85+
list-style-type: none;
86+
}
87+
/* List Styling */
88+
#mylist li {
89+
font-size: 1.2em;
90+
margin-bottom: 15px;
91+
padding: 14px;
92+
border: 2px solid #4caf50; /* Accent Green */
93+
border-radius: 12px;
94+
background-color: #1e1e1e; /* Dark Background */
95+
transition: background-color 0.3s ease;
96+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
97+
width: 1685px;
98+
}
99+
100+
#mylist li:hover {
101+
background-color: #22540882; /* Slightly darker shade on hover */
102+
transform: scale(1.02);
103+
transition: transform 0.3s;
104+
}
105+
106+
/* Footer Styling */
107+
footer {
108+
font-size: 1.2em;
109+
text-align: center;
110+
margin-top: 20px;
111+
padding: 15px 0;
112+
background: #1e1e1e; /* Dark Background */
113+
color: #ffffff; /* Light Text */
114+
border-top: 2px solid #4caf50; /* Accent Green */
115+
}
116+
.contact {
117+
display: flex;
118+
justify-content: center;
119+
}

0 commit comments

Comments
 (0)