Skip to content

Commit 7915c97

Browse files
AyushSaini00AyushSaini00
committed
new project : currency converter styled
1 parent ed5ba70 commit 7915c97

File tree

2 files changed

+173
-0
lines changed

2 files changed

+173
-0
lines changed

‎Currency-Converter/index.html

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Currency Converter</title>
7+
<link rel="stylesheet" href="./style.css" type="text/css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1 class="title">Currency Converter</h1>
12+
<div class="row">
13+
<input type="number" name="currency-1" id="currency-1">
14+
<select name="currency-1" id="select-currency-1">
15+
<option value="CAD">CAD</option>
16+
<option value="HKD">HKD</option>
17+
<option value="ISK">ISK</option>
18+
<option value="PHP">PHP</option>
19+
<option value="DKK">DKK</option>
20+
<option value="HUF">HUF</option>
21+
<option value="CZK">CZK</option>
22+
<option value="AUD">AUD</option>
23+
<option value="RON">RON</option>
24+
<option value="SEK">SEK</option>
25+
<option value="IDR">IDR</option>
26+
<option value="INR">INR</option>
27+
<option value="BRL">BRL</option>
28+
<option value="RUB">RUB</option>
29+
<option value="HRK">HRK</option>
30+
<option value="JPY">JPY</option>
31+
<option value="THB">THB</option>
32+
<option value="CHF">CHF</option>
33+
<option value="SGD">SGD</option>
34+
<option value="PLN">PLN</option>
35+
<option value="BGN">BGN</option>
36+
<option value="TRY">TRY</option>
37+
<option value="CNY">CNY</option>
38+
<option value="NOK">NOK</option>
39+
<option value="NZD">NZD</option>
40+
<option value="ZAR">ZAR</option>
41+
<option value="USD">USD</option>
42+
<option value="MXN">MXN</option>
43+
<option value="ILS">ILS</option>
44+
<option value="GBP">GBP</option>
45+
<option value="KRW">KRW</option>
46+
<option value="MYR">MYR</option>
47+
</select>
48+
</div>
49+
<button id="btn">Convert</button>
50+
<div class="row">
51+
<input type="number" name="currency-2" id="currency-2">
52+
<select name="currency-2" id="select-currency-2">
53+
<option value="CAD">CAD</option>
54+
<option value="HKD">HKD</option>
55+
<option value="ISK">ISK</option>
56+
<option value="PHP">PHP</option>
57+
<option value="DKK">DKK</option>
58+
<option value="HUF">HUF</option>
59+
<option value="CZK">CZK</option>
60+
<option value="AUD">AUD</option>
61+
<option value="RON">RON</option>
62+
<option value="SEK">SEK</option>
63+
<option value="IDR">IDR</option>
64+
<option value="INR">INR</option>
65+
<option value="BRL">BRL</option>
66+
<option value="RUB">RUB</option>
67+
<option value="HRK">HRK</option>
68+
<option value="JPY">JPY</option>
69+
<option value="THB">THB</option>
70+
<option value="CHF">CHF</option>
71+
<option value="SGD">SGD</option>
72+
<option value="PLN">PLN</option>
73+
<option value="BGN">BGN</option>
74+
<option value="TRY">TRY</option>
75+
<option value="CNY">CNY</option>
76+
<option value="NOK">NOK</option>
77+
<option value="NZD">NZD</option>
78+
<option value="ZAR">ZAR</option>
79+
<option value="USD">USD</option>
80+
<option value="MXN">MXN</option>
81+
<option value="ILS">ILS</option>
82+
<option value="GBP">GBP</option>
83+
<option value="KRW">KRW</option>
84+
<option value="MYR">MYR</option>
85+
</select>
86+
</div>
87+
<div id="rate-detail">
88+
1 EUR = 87.6185 INR
89+
</div>
90+
</div>
91+
<p class="footer">This project is a part of <a href="https://60minutejs.vercel.app/">60 Minute javascript</a></p>
92+
<script src="./app.js" type="text/javascript"></script>
93+
</body>
94+
</html>

‎Currency-Converter/style.css

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
*::before,
7+
*::after {
8+
box-sizing: border-box;
9+
}
10+
html,
11+
body {
12+
font-size: 10px;
13+
font-family: 'lato', Arial, Helvetica, sans-serif;
14+
}
15+
body {
16+
min-height: 100vh;
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: center;
20+
align-items: center;
21+
background-color: #af8c9d;
22+
background-image: linear-gradient(315deg, #af8c9d 0%, #8cacac 74%);
23+
}
24+
.container {
25+
display: flex;
26+
flex-direction: column;
27+
align-items: center;
28+
width: 30rem;
29+
height: 80vh;
30+
text-align: center;
31+
padding: 1.5rem;
32+
justify-content: space-evenly;
33+
}
34+
.title {
35+
font-size: 3rem;
36+
}
37+
.row {
38+
display: flex;
39+
width: 100%;
40+
justify-content: space-between;
41+
background: linear-gradient(315deg, #89dbb9 0%, #cbcedb 74%);
42+
height: 5rem;
43+
padding: 1rem;
44+
border-radius: 0.5rem;
45+
}
46+
input,
47+
select {
48+
font-size: 1.7rem;
49+
border: none;
50+
background: transparent;
51+
}
52+
#btn {
53+
border: none;
54+
padding: 1rem;
55+
width: 50%;
56+
border-radius: 0.5rem;
57+
font-size: 2rem;
58+
letter-spacing: 4px;
59+
cursor: pointer;
60+
background: linear-gradient(315deg, #e1aac5 0%, #97e8e8 74%);
61+
color: black;
62+
}
63+
#btn:hover{
64+
opacity: 0.7;
65+
transition: 0.2s opacity ease;
66+
}
67+
#rate-detail {
68+
font-size: 1.8rem;
69+
font-weight: lighter;
70+
}
71+
.footer {
72+
font-size: 1.2rem;
73+
position: relative;
74+
bottom: -2rem;
75+
letter-spacing: 1px;
76+
}
77+
.footer > a {
78+
text-decoration: none;
79+
}

0 commit comments

Comments
 (0)