Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter
Running

App Files Community
GarGerry commited on
Commit
8b72495
·
verified ·
1 Parent(s): 37dec25

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +49 -74
index.html CHANGED
@@ -8,95 +8,70 @@
8
  </head>
9
  <body>
10
  <!-- Navbar -->
11
- <header id="navbar">
12
- <div class="container">
13
- <h1>Currency Converter</h1>
14
- <p>Welcome to the Currency Converter!</p>
15
  </div>
16
- </header>
17
 
18
  <!-- Headline and Explanation -->
19
- <section id="headline">
20
- <div class="container">
21
- <h2>Convert Your Currencies</h2>
22
- <p>Enter the amount and select currencies to convert. Get the current exchange rate instantly!</p>
23
- </div>
24
  </section>
25
 
26
- <!-- Currency Converter Section -->
27
- <section id="converter">
28
- <div class="container">
29
- <div class="currency-container">
30
- <!-- Amount Input -->
31
- <div class="currency-input">
32
- <label for="amount">Amount</label>
33
- <input type="number" id="amount" placeholder="Enter amount">
34
- </div>
35
-
36
- <!-- From Currency -->
37
- <div class="currency-input">
38
- <label for="from-currency">From Currency</label>
39
- <select id="from-currency">
40
- <option value="USD">USD</option>
41
- <option value="EUR">EUR</option>
42
- <!-- Add more currencies here -->
43
- </select>
44
- </div>
45
-
46
- <!-- To Currency -->
47
- <div class="currency-input">
48
- <label for="to-currency">To Currency</label>
49
- <select id="to-currency">
50
- <option value="EUR">EUR</option>
51
- <option value="USD">USD</option>
52
- <!-- Add more currencies here -->
53
- </select>
54
- </div>
55
-
56
- <!-- Swap Button -->
57
- <button id="swap-btn" onclick="swapCurrencies()">↔️</button>
58
-
59
- <!-- Convert Button -->
60
- <button id="convert-btn" onclick="convertCurrency()">Convert</button>
61
-
62
- <!-- Conversion Result -->
63
- <div id="result"></div>
64
  </div>
 
 
 
 
 
 
 
 
 
 
65
  </div>
 
66
  </section>
67
 
68
- <!-- Step-by-step Guide -->
69
- <section id="how-to">
70
- <div class="container">
71
- <h3>How to Convert</h3>
72
- <div class="steps">
73
- <div class="step">
74
- <h4>Step 1</h4>
75
- <div class="step-box">
76
- <p>Enter the amount you want to convert in the input field.</p>
77
- </div>
78
- </div>
79
- <div class="step">
80
- <h4>Step 2</h4>
81
- <div class="step-box">
82
- <p>Select the currencies you want to convert from and to.</p>
83
- </div>
84
- </div>
85
- <div class="step">
86
- <h4>Step 3</h4>
87
- <div class="step-box">
88
- <p>Click "Convert" to see the exchange rate and converted amount.</p>
89
- </div>
90
- </div>
91
  </div>
92
  </div>
93
  </section>
94
 
95
  <!-- Footer -->
96
  <footer>
97
- <div class="container">
98
- <p>About | <a href="#">Social Media</a> | &copy; 2025 Currency Converter</p>
99
- </div>
100
  </footer>
101
 
102
  <script src="script.js"></script>
 
8
  </head>
9
  <body>
10
  <!-- Navbar -->
11
+ <nav class="navbar">
12
+ <div class="navbar-content">
13
+ <img src="logo.png" alt="Logo" class="logo">
14
+ <p class="welcome-text">Welcome to Currency Converter</p>
15
  </div>
16
+ </nav>
17
 
18
  <!-- Headline and Explanation -->
19
+ <section class="headline-section">
20
+ <h1 class="headline">Currency Converter</h1>
21
+ <p class="explanation">Easily convert between different currencies using the latest exchange rates.</p>
 
 
22
  </section>
23
 
24
+ <!-- Currency Converter Form -->
25
+ <section class="converter-container">
26
+ <div class="currency-container">
27
+ <div class="currency-input">
28
+ <label for="amount">Amount:</label>
29
+ <input type="number" id="amount" placeholder="Enter amount">
30
+ </div>
31
+ <div class="currency-input">
32
+ <label for="from-currency">From:</label>
33
+ <select id="from-currency">
34
+ <option value="USD">USD</option>
35
+ <option value="EUR">EUR</option>
36
+ <option value="IDR">IDR</option>
37
+ </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  </div>
39
+ <div class="currency-input">
40
+ <label for="to-currency">To:</label>
41
+ <select id="to-currency">
42
+ <option value="EUR">EUR</option>
43
+ <option value="USD">USD</option>
44
+ <option value="IDR">IDR</option>
45
+ </select>
46
+ </div>
47
+ <button id="swap-btn" onclick="swapCurrencies()">🔄</button>
48
+ <button id="convert-btn" onclick="convertCurrency()">Convert</button>
49
  </div>
50
+ <div id="result"></div>
51
  </section>
52
 
53
+ <!-- Steps to use Converter -->
54
+ <section class="steps-container">
55
+ <h2>How to Convert</h2>
56
+ <div class="steps">
57
+ <div class="step">
58
+ <h3>1. Enter Amount</h3>
59
+ <p>Simply type the amount you want to convert into the amount box.</p>
60
+ </div>
61
+ <div class="step">
62
+ <h3>2. Select Your Currency</h3>
63
+ <p>Select the currency you are converting from and to from the dropdown menus.</p>
64
+ </div>
65
+ <div class="step">
66
+ <h3>3. That's It!</h3>
67
+ <p>The exchange rate will be calculated and displayed instantly.</p>
 
 
 
 
 
 
 
 
68
  </div>
69
  </div>
70
  </section>
71
 
72
  <!-- Footer -->
73
  <footer>
74
+ <p>&copy; 2025 Currency Converter. All Rights Reserved.</p>
 
 
75
  </footer>
76
 
77
  <script src="script.js"></script>