Skip to content

Commit bdc7242

Browse files
alfatoxicalfatoxic
committed
editted files to premgajare
1 parent b39f1d3 commit bdc7242

File tree

3 files changed

+118
-255
lines changed

3 files changed

+118
-255
lines changed

‎CurrencyConverter/premgajare/index.html

+27-130
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,32 @@
11
<!DOCTYPE html>
2-
<html lang="en" dir="ltr">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Exchange Rate Calculator</title>
6-
<link rel="stylesheet" href="style.css">
7-
</head>
8-
<body>
9-
<img src="https://vanillawebprojects.com/projects/exchange-rate/img/money.png" alt="">
10-
<h1>Exchange Rate Calculator</h1>
11-
<p>Choose the currency and the amounts to get the exchange rate</p>
12-
<div class="container">
13-
<div class="currency">
14-
<select id="currency-one">
15-
<option value="AED">AED</option>
16-
<option value="ARS">ARS</option>
17-
<option value="AUD">AUD</option>
18-
<option value="BGN">BGN</option>
19-
<option value="BRL">BRL</option>
20-
<option value="BSD">BSD</option>
21-
<option value="CAD">CAD</option>
22-
<option value="CHF">CHF</option>
23-
<option value="CLP">CLP</option>
24-
<option value="CNY">CNY</option>
25-
<option value="COP">COP</option>
26-
<option value="CZK">CZK</option>
27-
<option value="DKK">DKK</option>
28-
<option value="DOP">DOP</option>
29-
<option value="EGP">EGP</option>
30-
<option value="EUR">EUR</option>
31-
<option value="FJD">FJD</option>
32-
<option value="GBP">GBP</option>
33-
<option value="GTQ">GTQ</option>
34-
<option value="HKD">HKD</option>
35-
<option value="HRK">HRK</option>
36-
<option value="HUF">HUF</option>
37-
<option value="IDR">IDR</option>
38-
<option value="ILS">ILS</option>
39-
<option value="INR">INR</option>
40-
<option value="ISK">ISK</option>
41-
<option value="JPY">JPY</option>
42-
<option value="KRW">KRW</option>
43-
<option value="KZT">KZT</option>
44-
<option value="MXN">MXN</option>
45-
<option value="MYR">MYR</option>
46-
<option value="NOK">NOK</option>
47-
<option value="NZD">NZD</option>
48-
<option value="PAB">PAB</option>
49-
<option value="PEN">PEN</option>
50-
<option value="PHP">PHP</option>
51-
<option value="PKR">PKR</option>
52-
<option value="PLN">PLN</option>
53-
<option value="PYG">PYG</option>
54-
<option value="RON">RON</option>
55-
<option value="RUB">RUB</option>
56-
<option value="SAR">SAR</option>
57-
<option value="SEK">SEK</option>
58-
<option value="SGD">SGD</option>
59-
<option value="THB">THB</option>
60-
<option value="TRY">TRY</option>
61-
<option value="TWD">TWD</option>
62-
<option value="UAH">UAH</option>
63-
<option value="USD" selected>USD</option>
64-
<option value="UYU">UYU</option>
65-
<option value="VND">VND</option>
66-
<option value="ZAR">ZAR</option>
2+
<html>
3+
4+
<head>
5+
<title>Currency Converter</title>
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
</head>
8+
9+
<body>
10+
<h1>Currency Converter</h1>
11+
<div>
12+
<label for="amount">Amount (INR):</label>
13+
<input type="number" id="amount" placeholder="Enter amount">
14+
</div>
15+
<div>
16+
<label for="toCurrency">To Currency:</label>
17+
<select id="toCurrency">
18+
<option value="USD">USD</option>
19+
<option value="EUR">EUR</option>
20+
<option value="GBP">GBP</option>
21+
<option value="JPY">JPY</option>
22+
<option value="AUD">AUD</option>
6723
</select>
68-
<input type="number" id="amount-one" placeholder="0" value="1">
6924
</div>
70-
<div class="swap-rate-container">
71-
<button class="btn" id="swap">Swap</button>
72-
<div class="rate" id="rate">1 USD = 0.883 EUR</div>
73-
</div>
74-
<div class="currency">
75-
<select id="currency-two">
76-
<option value="AED">AED</option>
77-
<option value="ARS">ARS</option>
78-
<option value="AUD">AUD</option>
79-
<option value="BGN">BGN</option>
80-
<option value="BRL">BRL</option>
81-
<option value="BSD">BSD</option>
82-
<option value="CAD">CAD</option>
83-
<option value="CHF">CHF</option>
84-
<option value="CLP">CLP</option>
85-
<option value="CNY">CNY</option>
86-
<option value="COP">COP</option>
87-
<option value="CZK">CZK</option>
88-
<option value="DKK">DKK</option>
89-
<option value="DOP">DOP</option>
90-
<option value="EGP">EGP</option>
91-
<option value="EUR" selected="">EUR</option>
92-
<option value="FJD">FJD</option>
93-
<option value="GBP">GBP</option>
94-
<option value="GTQ">GTQ</option>
95-
<option value="HKD">HKD</option>
96-
<option value="HRK">HRK</option>
97-
<option value="HUF">HUF</option>
98-
<option value="IDR">IDR</option>
99-
<option value="ILS">ILS</option>
100-
<option value="INR">INR</option>
101-
<option value="ISK">ISK</option>
102-
<option value="JPY">JPY</option>
103-
<option value="KRW">KRW</option>
104-
<option value="KZT">KZT</option>
105-
<option value="MXN">MXN</option>
106-
<option value="MYR">MYR</option>
107-
<option value="NOK">NOK</option>
108-
<option value="NZD">NZD</option>
109-
<option value="PAB">PAB</option>
110-
<option value="PEN">PEN</option>
111-
<option value="PHP">PHP</option>
112-
<option value="PKR">PKR</option>
113-
<option value="PLN">PLN</option>
114-
<option value="PYG">PYG</option>
115-
<option value="RON">RON</option>
116-
<option value="RUB">RUB</option>
117-
<option value="SAR">SAR</option>
118-
<option value="SEK">SEK</option>
119-
<option value="SGD">SGD</option>
120-
<option value="THB">THB</option>
121-
<option value="TRY">TRY</option>
122-
<option value="TWD">TWD</option>
123-
<option value="UAH">UAH</option>
124-
<option value="USD">USD</option>
125-
<option value="UYU">UYU</option>
126-
<option value="VND">VND</option>
127-
<option value="ZAR">ZAR</option>
128-
</select>
129-
<input type="number" id="amount-two" placeholder="0">
130-
</div>
131-
</div>
132-
<script src="script.js" charset="utf-8"></script>
25+
<button onclick="convertCurrency()">Convert</button>
26+
<div>
27+
<p>Result: <span id="result"></span></p>
28+
</div>
29+
<script src="script.js"></script>
30+
</body>
13331

134-
</body>
13532
</html>

‎CurrencyConverter/premgajare/script.js

+29-32
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,32 @@
1-
const currencyOne =document.getElementById('currency-one');
2-
const amountOne =document.getElementById('amount-one');
3-
const currencyTwo =document.getElementById('currency-two');
4-
const amountTwo =document.getElementById('amount-two');
5-
const swap =document.getElementById('swap');
6-
const rate =document.getElementById('rate');
1+
<!DOCTYPE html>
2+
<html>
73

4+
<head>
5+
<title>Currency Converter</title>
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
</head>
88

9-
function calculate(){
10-
const currency_one = currencyOne.value;
11-
const currency_two = currencyTwo.value;
12-
fetch(" https://v6.exchangerate-api.com/v6/3e8ffaddefcdd36522ddc01f/latest/USD")
13-
.then(res => res.json())
14-
.then(data=>{
15-
// console.log(data);
16-
const rate_new=data.conversion_rates[currency_two]/data.conversion_rates[currency_one];
17-
rate.innerText= `1 ${currency_one} = ${rate_new.toFixed(2)} ${currency_two}`;
18-
amountTwo.value=(amountOne.value*(rate_new)).toFixed(2);
19-
});
20-
}
9+
<body>
10+
<h1>Currency Converter</h1>
11+
<div>
12+
<label for="amount">Amount (INR):</label>
13+
<input type="number" id="amount" placeholder="Enter amount">
14+
</div>
15+
<div>
16+
<label for="toCurrency">To Currency:</label>
17+
<select id="toCurrency">
18+
<option value="USD">USD</option>
19+
<option value="EUR">EUR</option>
20+
<option value="GBP">GBP</option>
21+
<option value="JPY">JPY</option>
22+
<option value="AUD">AUD</option>
23+
</select>
24+
</div>
25+
<button onclick="convertCurrency()">Convert</button>
26+
<div>
27+
<p>Result: <span id="result"></span></p>
28+
</div>
29+
<script src="script.js"></script>
30+
</body>
2131

22-
// event listener
23-
currencyOne.addEventListener('change',calculate);
24-
amountOne.addEventListener('input',calculate);
25-
currencyTwo.addEventListener('change',calculate);
26-
amountTwo.addEventListener('input',calculate);
27-
28-
swap.addEventListener('click',()=>{
29-
const temp=currencyOne.value;
30-
currencyOne.value=currencyTwo.value;
31-
currencyTwo.value=temp;
32-
calculate();
33-
});
34-
35-
// calculate();
32+
</html>

‎CurrencyConverter/premgajare/style.css

+62-93
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,62 @@
1-
:root {
2-
--primary-color: #5fbaa7;
3-
}
4-
5-
* {
6-
box-sizing: border-box;
7-
}
8-
9-
body {
10-
background-color: #f4f4f4;
11-
font-family: Arial, Helvetica, sans-serif;
12-
display: flex;
13-
flex-direction: column;
14-
align-items: center;
15-
justify-content: center;
16-
height: 100vh;
17-
margin: 0;
18-
padding: 20px;
19-
}
20-
21-
h1 {
22-
color: var(--primary-color);
23-
}
24-
25-
p {
26-
text-align: center;
27-
}
28-
29-
.btn {
30-
color: #fff;
31-
background: var(--primary-color);
32-
cursor: pointer;
33-
border-radius: 5px;
34-
font-size: 12px;
35-
padding: 5px 12px;
36-
}
37-
38-
.money-img {
39-
width: 150px;
40-
}
41-
42-
.currency {
43-
padding: 40px 0;
44-
display: flex;
45-
align-items: center;
46-
justify-content: space-between;
47-
}
48-
49-
.currency select {
50-
padding: 10px 20px 10px 10px;
51-
-moz-appearance: none;
52-
-webkit-appearance: none;
53-
appearance: none;
54-
border: 1px solid #dedede;
55-
font-size: 16px;
56-
/* You may not need these following lines. The arrow did not show for me on MacOS/Chrome so I added it. Just remove it if you would like */
57-
background: transparent;
58-
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%20000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
59-
background-position: right 10px top 50%, 0, 0;
60-
background-size: 12px auto, 100%;
61-
background-repeat: no-repeat;
62-
}
63-
64-
.currency input {
65-
border: 0;
66-
background: transparent;
67-
font-size: 30px;
68-
text-align: right;
69-
}
70-
71-
.swap-rate-container {
72-
display: flex;
73-
align-items: center;
74-
justify-content: space-between;
75-
}
76-
77-
.rate {
78-
color: var(--primary-color);
79-
font-size: 14px;
80-
padding: 0 10px;
81-
}
82-
83-
select:focus,
84-
input:focus,
85-
button:focus {
86-
outline: 0;
87-
}
88-
89-
@media (max-width: 600px) {
90-
.currency input {
91-
width: 200px;
92-
}
93-
}
1+
body {
2+
font-family: 'Arial', sans-serif;
3+
align-items: center;
4+
justify-content: center;
5+
height: 100vh;
6+
margin: 0;
7+
background: linear-gradient(135deg, #3498db, #8e44ad, #e74c3c, #f39c12);
8+
background-size: 400% 400%;
9+
animation: gradientAnimation 15s infinite;
10+
}
11+
12+
@keyframes gradientAnimation {
13+
0% {
14+
background-position: 0% 50%;
15+
}
16+
17+
50% {
18+
background-position: 100% 50%;
19+
}
20+
21+
100% {
22+
background-position: 0% 50%;
23+
}
24+
}
25+
26+
.converter {
27+
text-align: center;
28+
border: 1px solid #ccc;
29+
padding: 20px;
30+
border-radius: 8px;
31+
background: rgba(255, 255, 255, 0.9);
32+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
33+
}
34+
35+
.input-container {
36+
margin: 10px 0;
37+
}
38+
39+
input,
40+
select,
41+
button {
42+
padding: 10px;
43+
margin: 5px;
44+
border: 1px solid #ddd;
45+
border-radius: 4px;
46+
box-sizing: border-box;
47+
}
48+
49+
button {
50+
background: linear-gradient(45deg, #3498db, #8e44ad, #e74c3c, #f39c12);
51+
color: white;
52+
cursor: pointer;
53+
border: none;
54+
border-radius: 4px;
55+
padding: 10px 20px;
56+
font-size: 1em;
57+
transition: background 0.3s ease;
58+
}
59+
60+
button:hover {
61+
background: linear-gradient(45deg, #f39c12, #e74c3c, #8e44ad, #3498db);
62+
}

0 commit comments

Comments
 (0)