Hugging Face's logo

Spaces:
xcoolcoinx
/
sf-cff
Running

App Files Community
xcoolcoinx commited on
Commit
bae80b1
·
1 Parent(s): cb7772b

Add 3 files

Browse files
Files changed (3) hide show
  1. app.js +24 -0
  2. index.html +29 -19
  3. style.css +56 -18
app.js ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import Alpine from "alpinejs";
2
+ Alpine.start();
3
+ const app = new Vue({
4
+ el: "#app",
5
+ data: {
6
+ amount: null,
7
+ from: null,
8
+ to: null,
9
+ },
10
+ methods: {
11
+ submit() {
12
+ const fromCurrency = this.from;
13
+ const toCurrency = this.to;
14
+ if(fromCurrency && toCurrency){
15
+ return(html`<h1>The amount of ${amount} in ${fromCurrency} is ${conversion(amount, fromCurrency, toCurrency)} in ${toCurrency}!</h1>`);
16
+ } else {
17
+ return(html`<h1>Please select a currency!</h1>`);
18
+ }
19
+ },
20
+ conversion(amount, fromCurrency, toCurrency){
21
+ // Conversion logic
22
+ }
23
+ },
24
+ });
index.html CHANGED
@@ -1,19 +1,29 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
1
+ <html><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Currency Converter</title></head>
2
+ <body class="bg-cyan-500">
3
+ <div id="app" class="container max-w-sm mx-auto mt-8">
4
+ <h1>Currency Converter</h1>
5
+ <h2>Convert amounts between currencies</h2>
6
+ <form action="#" method="post" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
7
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="amount">Amount</label>
8
+ <input type="number" id="amount" class="block w-full border border-gray-300 bg-gray-50 rounded px-3 py-2 text-gray-700 h-10 focus:outline-none focus:border- brand-orange focus:ring-2 focus:ring-brand-orange focus:ring-opacity-50" name="amount" required min="0" step="0.01" value="">
9
+ <label class="block text-gray-700 text-sm font-bold mt-4 mb-2" for="from">From</label>
10
+ <select id="from" class="block w-full border border-gray-300 bg-gray-50 rounded px-3 py-2 text-gray-700 h-10 focus:outline-none focus:border-brand-orange focus:ring-2 focus:ring-brand-orange focus:ring-opacity-50" name="from">
11
+ <option value="USD">United States Dollar (USD)</option>
12
+ <option value="EUR">Euro (EUR)</option>
13
+ <option value="GBP">British Pound (GBP)</option>
14
+ <option value="JPY">Japanese Yen (JPY)</option>
15
+ <option value="CNY">Chinese Yuan (CNY)</option>
16
+ </select>
17
+ <label class="block text-gray-700 text-sm font-bold mt-4 mb-2" for="to">To</label>
18
+ <select id="to" class="block w-full border border-gray-300 bg-gray-50 rounded px-3 py-2 text-gray-700 h-10 focus:outline-none focus:border-brand-orange focus:ring-2 focus:ring-brand-orange focus:ring-opacity-50" name="to">
19
+ <option value="USD">United States Dollar (USD)</option>
20
+ <option value="EUR">Euro (EUR)</option>
21
+ <option value="GBP">British Pound (GBP)</option>
22
+ <option value="JPY">Japanese Yen (JPY)</option>
23
+ <option value="CNY">Chinese Yuan (CNY)</option>
24
+ </select>
25
+ <button type="submit" class="btn btn-brand-orange mt-4">Convert</button>
26
+ </form>
27
+ </div>
28
+ </body>
29
+ </html>
style.css CHANGED
@@ -1,28 +1,66 @@
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ box-sizing: border-box;
3
+ }
4
+
5
  body {
6
+ margin: 0;
7
+ font-family: Arial, sans-serif;
8
+ }
9
+
10
+ .container {
11
+ max-width: 75rem;
12
+ margin: 10rem auto;
13
+ padding: 2rem;
14
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
15
+ border-radius: 5px;
16
+ }
17
+
18
+ h1, h2 {
19
+ text-align: center;
20
  }
21
 
22
+ form {
23
+ display: grid;
24
+ grid-template-columns: auto;
25
+ grid-gap: 1rem;
26
+ align-items: center;
27
  }
28
 
29
+ label {
30
+ font-weight: bold;
31
+ text-align: left;
32
+ margin-right: 1rem;
 
33
  }
34
 
35
+ input, select {
36
+ padding: 0.5rem;
37
+ border: 2px solid #ccc;
38
+ border-radius: 5px;
39
+ width: 15rem;
 
40
  }
41
 
42
+ input:focus, select:focus {
43
+ border-color: #666;
44
+ outline: none;
45
  }
46
+
47
+ button {
48
+ background-color: #007bff;
49
+ color: #fff;
50
+ border: none;
51
+ padding: 0.6rem 1.2rem;
52
+ font-size: 1.05rem;
53
+ cursor: pointer;
54
+ border-radius: 5px;
55
+ margin-top: 1.5rem;
56
+ }
57
+
58
+ button:disabled {
59
+ background-color: #666;
60
+ }
61
+
62
+ @media (min-width: 768px) {
63
+ form {
64
+ grid-template-columns: 1fr 1fr 1fr;
65
+ }
66
+ }