Hugging Face's logo

Spaces:
micole66
/
Randomchoice
Running

App Files Community
micole66 commited on
Commit
d3bbf45
·
verified ·
1 Parent(s): 69403d4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +62 -36
index.html CHANGED
@@ -1,46 +1,72 @@
1
  <!DOCTYPE html>
2
  <html lang="it">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Random Picker Webapp</title>
7
- <style>
8
- /* Qui andrà il CSS */
9
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  </head>
11
  <body>
12
- <form id="randomPickerForm">
13
- <div id="categories">
14
- <!-- Qui andranno le caselle di testo per le categorie -->
15
- <input type="text" id="category1" placeholder="Categoria 1 (opzioni separate da virgola)">
16
- <input type="text" id="category2" placeholder="Categoria 2 (opzioni separate da virgola)">
17
- <input type="text" id="category3" placeholder="Categoria 3 (opzioni separate da virgola)">
18
- <input type="text" id="category4" placeholder="Categoria 4 (opzioni separate da virgola)">
19
- <input type="text" id="category5" placeholder="Categoria 5 (opzioni separate da virgola)">
20
- </div>
21
- <button type="button" id="randomSelectButton">Scegli Casualmente</button>
22
- </form>
23
- <div id="results">
24
- <!-- Qui verranno visualizzati i risultati -->
25
- </div>
26
-
27
- <script>
28
- // Qui andrà il JavaScript
29
- </script>
30
- </body>
31
- </html>
32
 
33
- document.getElementById('randomSelectButton').addEventListener('click', function() {
34
- var results = [];
35
- for (var i = 1; i <= 5; i++) {
 
36
  var categoryInput = document.getElementById('category' + i).value;
37
  if (categoryInput) {
38
- var options = categoryInput.split(',');
39
- var randomIndex = Math.floor(Math.random() * options.length);
40
- results.push(options[randomIndex].trim());
41
  } else {
42
- results.push('Nessuna opzione per la Categoria ' + i);
43
  }
44
- }
45
- document.getElementById('results').innerHTML = 'Risultati: <br>' + results.join('<br>');
46
- });
 
 
 
 
1
  <!DOCTYPE html>
2
  <html lang="it">
3
  <head>
4
+   <meta charset="UTF-8">
5
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+   <title>Random Picker Webapp</title>
7
+   <style>
8
+ body {
9
+ font-family: 'Arial', sans-serif;
10
+ margin: 20px;
11
+ }
12
+
13
+ #randomPickerForm {
14
+ margin-bottom: 20px;
15
+ }
16
+
17
+ input[type="text"] {
18
+ display: block;
19
+ margin: 10px 0;
20
+ padding: 10px;
21
+ width: 100%;
22
+ }
23
+
24
+ button {
25
+ padding: 10px 20px;
26
+ background-color: #4CAF50;
27
+ color: white;
28
+ border: none;
29
+ cursor: pointer;
30
+ }
31
+
32
+ button:hover {
33
+ background-color: #45a049;
34
+ }
35
+
36
+ #results {
37
+ margin-top: 20px;
38
+ }
39
+ </style>
40
  </head>
41
  <body>
42
+   <form id="randomPickerForm">
43
+     <div id="categories">
44
+       <input type="text" id="category1" placeholder="Categoria 1 (opzioni separate da virgola)">
45
+       <input type="text" id="category2" placeholder="Categoria 2 (opzioni separate da virgola)">
46
+       <input type="text" id="category3" placeholder="Categoria 3 (opzioni separate da virgola)">
47
+       <input type="text" id="category4" placeholder="Categoria 4 (opzioni separate da virgola)">
48
+       <input type="text" id="category5" placeholder="Categoria 5 (opzioni separate da virgola)">
49
+     </div>
50
+     <button type="button" id="randomSelectButton">Scegli Casualmente</button>
51
+   </form>
52
+   <div id="results">
53
+       </div>
 
 
 
 
 
 
 
 
54
 
55
+   <script>
56
+ document.getElementById('randomSelectButton').addEventListener('click', function() {
57
+ var results = [];
58
+ for (var i = 1; i <= 5; i++) {
59
  var categoryInput = document.getElementById('category' + i).value;
60
  if (categoryInput) {
61
+ var options = categoryInput.split(',');
62
+ var randomIndex = Math.floor(Math.random() * options.length);
63
+ results.push(options[randomIndex].trim());
64
  } else {
65
+ results.push('Nessuna opzione per la Categoria ' + i);
66
  }
67
+ }
68
+ document.getElementById('results').innerHTML = 'Risultati: <br>' + results.join('<br>');
69
+ });
70
+ </script>
71
+ </body>
72
+ </html>