Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverterBaru
Running

App Files Community
1
GarGerry commited on
Commit
b9bed04
·
verified ·
1 Parent(s): 7472ac3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +23 -11
index.html CHANGED
@@ -7,29 +7,35 @@
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
 
31
- <!-- From & To Currency -->
32
  <div class="currency-select">
 
33
  <div class="currency-group">
34
  <label for="from-currency">From:</label>
35
  <select id="from-currency">
@@ -39,8 +45,10 @@
39
  </select>
40
  </div>
41
 
 
42
  <button id="swap-btn" onclick="swapCurrencies()">⇅</button>
43
 
 
44
  <div class="currency-group">
45
  <label for="to-currency">To:</label>
46
  <select id="to-currency">
@@ -51,36 +59,40 @@
51
  </div>
52
  </div>
53
 
 
54
  <button id="convert-btn" onclick="convertCurrency()">Convert</button>
55
  <p id="result"></p>
56
  </div>
57
  </section>
58
 
 
59
  <section class="how-to-use">
60
- <h2>How to convert Euros to US Dollars</h2>
61
  <div class="steps">
62
  <div class="step">
63
- <h3>1. Enter the amount</h3>
64
- <p>Simply type in the box the amount you want to convert.</p>
65
  </div>
66
  <div class="step">
67
  <h3>2. Select Your Currencies</h3>
68
- <p>Choose the currency you want to convert.</p>
69
  </div>
70
  <div class="step">
71
  <h3>3. That's It</h3>
72
- <p>Our currency converter will show you the current exchange rate.</p>
73
  </div>
74
  </div>
75
  </section>
76
 
 
77
  <footer class="footer">
78
  <div class="footer-content">
79
- <p>About</p>
80
- <p>Social Media</p>
81
  <p>Copyright © 2025</p>
82
  </div>
83
  </footer>
 
84
  <script src="script.js"></script>
85
  </body>
86
  </html>
 
7
  <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
+ <!-- Navbar -->
11
  <header>
12
  <nav class="navbar">
13
  <div class="logo">
14
+ <a href="index.html">
15
+ <img src="assets/images/logo.png" alt="Logo" />
16
+ </a>
17
  </div>
18
  </nav>
19
  </header>
20
 
21
+ <!-- Headline -->
22
  <section class="headline">
23
  <h1>Currency Converter</h1>
24
  <p>Convert your money between different currencies easily.</p>
25
  </section>
26
 
27
+ <!-- Content Section -->
28
  <section class="content">
29
  <div class="converter-container">
30
+ <!-- Amount Input -->
31
  <div class="currency-box">
32
  <label for="amount">Amount:</label>
33
+ <input type="number" id="amount" placeholder="Enter amount" min="0">
34
  </div>
35
 
36
+ <!-- Currency Selection -->
37
  <div class="currency-select">
38
+ <!-- From Currency -->
39
  <div class="currency-group">
40
  <label for="from-currency">From:</label>
41
  <select id="from-currency">
 
45
  </select>
46
  </div>
47
 
48
+ <!-- Swap Button -->
49
  <button id="swap-btn" onclick="swapCurrencies()">⇅</button>
50
 
51
+ <!-- To Currency -->
52
  <div class="currency-group">
53
  <label for="to-currency">To:</label>
54
  <select id="to-currency">
 
59
  </div>
60
  </div>
61
 
62
+ <!-- Convert Button -->
63
  <button id="convert-btn" onclick="convertCurrency()">Convert</button>
64
  <p id="result"></p>
65
  </div>
66
  </section>
67
 
68
+ <!-- How to Use Section -->
69
  <section class="how-to-use">
70
+ <h2>How to Use</h2>
71
  <div class="steps">
72
  <div class="step">
73
+ <h3>1. Enter the Amount</h3>
74
+ <p>Simply type in the amount you want to convert in the input box.</p>
75
  </div>
76
  <div class="step">
77
  <h3>2. Select Your Currencies</h3>
78
+ <p>Click the dropdown menu to select the currency you want to convert from and to.</p>
79
  </div>
80
  <div class="step">
81
  <h3>3. That's It</h3>
82
+ <p>Our currency converter will show the exchange rate and calculate the result for you.</p>
83
  </div>
84
  </div>
85
  </section>
86
 
87
+ <!-- Footer -->
88
  <footer class="footer">
89
  <div class="footer-content">
90
+ <p><a href="#about">About</a></p>
91
+ <p>Social Media: <a href="#">Facebook</a> | <a href="#">Instagram</a> | <a href="#">Twitter</a></p>
92
  <p>Copyright © 2025</p>
93
  </div>
94
  </footer>
95
+
96
  <script src="script.js"></script>
97
  </body>
98
  </html>