<!DOCTYPE html> <html> <head> <title>Scrabble calculator</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css" /> <style> body { display: flex; align-items: center; justify-content: center; } main { padding: 3em; } .number { width: 3em; } p { padding: 1em 0; } </style> </head> <body> <main id="app"> <input type="text" placeholder="Oggetto" v-model="text" /> <input type="text" placeholder="Quanti slot hai" class="number" v-model="maxslot" /> <p> Risultato: <b>{{ score }}</b> % {{ maxslot }} => <b>{{ slot }}</b> </p> </main> <script type="module"> import Vue from "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js"; let points = { A: 1, O: 1, I: 1, E: 1, C: 2, R: 2, S: 2, T: 2, L: 3, M: 3, N: 3, U: 3, W: 4, Y: 4, B: 5, D: 5, F: 5, P: 5, V: 5, K: 5, G: 8, H: 8, Z: 8, J: 8, X: 8, Q: 10 }; const app = new Vue({ el: "#app", data: { text: "", maxslot: 10 }, computed: { score: function() { const letters = this.text .toUpperCase() .trim() .split(""); return letters.reduce((total, letter) => { if (letter in points) { total += points[letter]; } return total; }, 0); }, slot: function() { return (this.score % this.maxslot) + 1; } } }); </script> </body> </html>