Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverterBaru
Running

App Files Community
1
GarGerry commited on
Commit
0ad5a52
·
verified ·
1 Parent(s): 776031c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +31 -30
index.html CHANGED
@@ -7,60 +7,61 @@
7
  <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
-
11
- <header class="navbar">
12
- <div class="logo">Currency Converter</div>
 
 
 
13
  </header>
14
-
15
  <section class="headline">
16
- <h1>Welcome to the Currency Converter</h1>
17
- <p>Convert your currencies easily and instantly!</p>
18
  </section>
19
 
20
- <section class="converter">
21
- <h2>Currency Converter</h2>
22
- <input type="number" id="amount" placeholder="Enter Amount" class="amount-input" />
23
- <div class="currency-container">
24
- <select id="from-currency" class="currency-select">
25
- <option value="USD">USD - United States Dollar</option>
26
- <option value="EUR">EUR - Euro</option>
27
  <!-- Add other currencies here -->
28
  </select>
29
-
30
- <button id="swap-btn" onclick="swapCurrencies()">Swap</button>
31
-
32
- <select id="to-currency" class="currency-select">
33
- <option value="EUR">EUR - Euro</option>
34
- <option value="USD">USD - United States Dollar</option>
35
  <!-- Add other currencies here -->
36
  </select>
 
 
 
37
  </div>
38
-
39
- <button id="convert-btn">Convert</button>
40
-
41
- <div id="result"></div>
42
  </section>
43
 
44
  <section class="how-to-use">
45
- <h3>How to Convert</h3>
46
  <div class="steps">
47
  <div class="step">
48
- <strong>1. Enter the Amount</strong>
49
  <p>Simply type the amount you want to convert in the input box.</p>
50
  </div>
51
  <div class="step">
52
- <strong>2. Select Your Currencies</strong>
53
- <p>Choose USD in the first option and EUR in the second option.</p>
54
  </div>
55
  <div class="step">
56
- <strong>3. That's It</strong>
57
- <p>Your conversion result will be displayed.</p>
58
  </div>
59
  </div>
60
  </section>
61
 
62
  <footer class="footer">
63
- <p>&copy; 2025 Currency Converter. All Rights Reserved.</p>
 
 
 
 
64
  </footer>
65
 
66
  <script src="script.js"></script>
 
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
  <section class="headline">
18
+ <h1>Currency Converter</h1>
19
+ <p>Convert your money between different currencies easily.</p>
20
  </section>
21
 
22
+ <section class="content">
23
+ <div class="converter-container">
24
+ <input type="number" id="amount" placeholder="Enter amount">
25
+ <select id="from-currency">
26
+ <option value="USD">🇺🇸 USD</option>
27
+ <option value="EUR">🇪🇺 EUR</option>
 
28
  <!-- Add other currencies here -->
29
  </select>
30
+ <select id="to-currency">
31
+ <option value="EUR">🇪🇺 EUR</option>
32
+ <option value="USD">🇺🇸 USD</option>
 
 
 
33
  <!-- Add other currencies here -->
34
  </select>
35
+ <button id="convert-btn">Convert</button>
36
+ <p id="result"></p>
37
+ <button id="swap-btn" onclick="swapCurrencies()">Swap</button>
38
  </div>
 
 
 
 
39
  </section>
40
 
41
  <section class="how-to-use">
42
+ <h2>How to Convert</h2>
43
  <div class="steps">
44
  <div class="step">
45
+ <h3>1. Enter the Amount</h3>
46
  <p>Simply type the amount you want to convert in the input box.</p>
47
  </div>
48
  <div class="step">
49
+ <h3>2. Select Your Currencies</h3>
50
+ <p>Choose the currency you want to convert from and to.</p>
51
  </div>
52
  <div class="step">
53
+ <h3>3. That's It</h3>
54
+ <p>Our currency converter will show you the current exchange rate.</p>
55
  </div>
56
  </div>
57
  </section>
58
 
59
  <footer class="footer">
60
+ <div class="footer-content">
61
+ <p>About</p>
62
+ <p>Social Media</p>
63
+ <p>Copyright © 2025</p>
64
+ </div>
65
  </footer>
66
 
67
  <script src="script.js"></script>