28
28
29
29
<body class = "bg-info">
30
30
<h1 class = "text-center text-white mt-5">SCRIVI UNA RECENSIONE</h1>
31
-
32
31
32
+ <div class="d-flex w-100 justify-content-center">
33
+
34
+ <form class="d-flex flex-column gap-2 w-25 mt-5 align-items-center" action="" method="POST">
35
+ <label class="align-self-start" style="font-size: 1.25em;" for="commento_recensione"><b>Commento:</b></label>
36
+ <textarea id="commento_recensione" name="commento_recensione" class="w-100 border border-2 border-dark" style="resize: none; height: 12em; outline: 0;"></textarea>
37
+ <div id="caratteri_mancanti" name="caratteri_mancanti">1000/1000</div>
38
+ <label class="w-25 align-self-end text-size-25" style="font-size: 1.25em;" for="voto_recensione"><b>Voto:</b></label>
39
+ <select class = "w-25 form-select shadow-none align-self-end" id="voto_recensione" name="voto_recensione">
40
+ <option value="1">1</option>
41
+ <option value="2">2</option>
42
+ <option value="3">3</option>
43
+ <option value="4">4</option>
44
+ <option value="5">5</option>
45
+ <option value="6">6</option>
46
+ <option value="7">7</option>
47
+ <option value="8">8</option>
48
+ <option value="9">9</option>
49
+ <option value="10">10</option>
50
+ </select>
51
+ <input type="submit" class="btn btn-primary w-100 mt-3" value="Invia recensione" name="invia_recensione">
52
+ <?php
53
+ include ('php/controllo_scrivi_recensione.php ' );
54
+ ?>
55
+ </form>
56
+
57
+ </div>
58
+
59
+ <script>
60
+ //seleziono gli elementi html tramite il loro id
61
+ const commento_recensione = document.getElementById('commento_recensione');
62
+ const testo_caratteri_mancanti = document.getElementById('caratteri_mancanti');
63
+
64
+ //dichiaro limite massimo caratteri nel commento
65
+ const massimo_caratteri_commento = 1000;
66
+
67
+ //funzione che tiene conto dei caratteri rimanenti
68
+ commento_recensione.addEventListener('input', () => {
69
+
70
+ const caratteri_rimanenti = massimo_caratteri_commento - commento_recensione.value.length;
71
+
72
+ //se mancano meno del 10% dei caratteri (cioè meno 100) la scritta diventerà rossa altrimenti la lasci col colore di default
73
+ const color = caratteri_rimanenti < massimo_caratteri_commento * 0.1 ? 'red' : null;
74
+
75
+ //assegno la seguente stringa all'elemento avente per id 'testo_caratteri_mancanti'
76
+ testo_caratteri_mancanti.textContent = `${caratteri_rimanenti}/${massimo_caratteri_commento}`;
77
+
78
+ //assegno il colore all'elemento avente per id 'testo_caratteri_mancanti'
79
+ testo_caratteri_mancanti.style.color = color;
80
+ });
81
+ </script>
33
82
<!-- Bootstrap -->
34
- <script src = "https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js" integrity = "sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin = "anonymous"></script>
83
+ <script src = "https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js" integrity = "sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin = "anonymous">
84
+ </script>
35
85
</body>
36
86
37
87
</html>
0 commit comments