Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

App Files Community
GarGerry commited on
Commit
467b80e
·
verified ·
1 Parent(s): 1c65488

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +51 -43
index.html CHANGED
@@ -4,74 +4,82 @@
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="styles.css">
8
  </head>
9
  <body>
10
- <!-- Navbar -->
11
- <div class="navbar">
12
- <div class="logo">
13
- <img src="logo.png" alt="Logo">
14
- </div>
15
- </div>
 
16
 
17
- <!-- Headline -->
18
- <div class="headline">
19
  <h1>Currency Converter</h1>
20
- <p>Convert currencies easily and quickly</p>
21
- </div>
22
 
23
- <!-- Content Converter -->
24
- <div class="content">
25
  <div class="converter-container">
 
26
  <div class="currency-box">
27
- <label for="amount">Amount</label>
28
  <input type="number" id="amount" placeholder="Enter amount">
29
  </div>
30
- <div class="currency-group">
31
- <label for="from">From</label>
32
- <select id="from">
33
- <option value="USD">USD</option>
34
- <option value="EUR">EUR</option>
35
- </select>
36
- </div>
37
- <div class="currency-group">
38
- <label for="to">To</label>
39
- <select id="to">
40
- <option value="EUR">EUR</option>
41
- <option value="USD">USD</option>
42
- </select>
 
 
 
 
 
 
 
 
43
  </div>
44
- <button id="swap-btn">Swap</button>
45
  <button id="convert-btn">Convert</button>
46
- <div id="result"></div>
47
  </div>
48
- </div>
49
 
50
- <!-- How to Use -->
51
- <div class="how-to-use">
52
  <h2>How to Convert</h2>
53
  <div class="steps">
54
  <div class="step">
55
- <h3>Step 1</h3>
56
- <p>Enter the amount you want to convert.</p>
57
  </div>
58
  <div class="step">
59
- <h3>Step 2</h3>
60
- <p>Select your currencies.</p>
61
  </div>
62
  <div class="step">
63
- <h3>Step 3</h3>
64
- <p>Click Convert and get your result.</p>
65
  </div>
66
  </div>
67
- </div>
68
 
69
- <!-- Footer -->
70
- <div class="footer">
71
  <div class="footer-content">
72
- <p>About Us | Social Media | Copyright</p>
 
 
73
  </div>
74
- </div>
75
 
76
  <script src="script.js"></script>
77
  </body>
 
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">
8
  </head>
9
  <body>
10
+ <header>
11
+ <nav class="navbar">
12
+ <div class="logo">
13
+ <img src="logo.png" alt="Logo">
14
+ </div>
15
+ </nav>
16
+ </header>
17
 
18
+ <section class="headline">
 
19
  <h1>Currency Converter</h1>
20
+ <p>Convert your money between different currencies easily.</p>
21
+ </section>
22
 
23
+ <section class="content">
 
24
  <div class="converter-container">
25
+ <!-- Amount -->
26
  <div class="currency-box">
27
+ <label for="amount">Amount:</label>
28
  <input type="number" id="amount" placeholder="Enter amount">
29
  </div>
30
+ <!-- From & To Currency -->
31
+ <div class="currency-select">
32
+ <div class="currency-group">
33
+ <label for="from-currency">From:</label>
34
+ <select id="from-currency">
35
+ <option value="USD">🇺🇸 USD</option>
36
+ <option value="EUR">🇪🇺 EUR</option>
37
+ <!-- Add other currencies here -->
38
+ </select>
39
+ </div>
40
+
41
+ <button id="swap-btn" onclick="swapCurrencies()">⇅</button>
42
+
43
+ <div class="currency-group">
44
+ <label for="to-currency">To:</label>
45
+ <select id="to-currency">
46
+ <option value="EUR">🇪🇺 EUR</option>
47
+ <option value="USD">🇺🇸 USD</option>
48
+ <!-- Add other currencies here -->
49
+ </select>
50
+ </div>
51
  </div>
52
+
53
  <button id="convert-btn">Convert</button>
54
+ <p id="result"></p>
55
  </div>
56
+ </section>
57
 
58
+ <section class="how-to-use">
 
59
  <h2>How to Convert</h2>
60
  <div class="steps">
61
  <div class="step">
62
+ <h3>1. Enter the Amount</h3>
63
+ <p>Simply type the amount you want to convert in the input box.</p>
64
  </div>
65
  <div class="step">
66
+ <h3>2. Select Your Currencies</h3>
67
+ <p>Choose the currency you want to convert from and to.</p>
68
  </div>
69
  <div class="step">
70
+ <h3>3. That's It</h3>
71
+ <p>Our currency converter will show you the current exchange rate.</p>
72
  </div>
73
  </div>
74
+ </section>
75
 
76
+ <footer class="footer">
 
77
  <div class="footer-content">
78
+ <p>About</p>
79
+ <p>Social Media</p>
80
+ <p>Copyright © 2022025</p>
81
  </div>
82
+ </footer>
83
 
84
  <script src="script.js"></script>
85
  </body>