Simulateur Word Clock configurable : 3 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:05

Ce n'est pas exactement un Instructable. Je conçois ma propre horloge de mots et j'ai décidé de créer d'abord un simulateur d'application Web afin de pouvoir disposer la grille et tester son apparence à différents moments de la journée. Ensuite, j'ai réalisé que cela pourrait être utile pour d'autres personnes travaillant sur des horloges de mots et j'ai décidé de le partager.

L'application est un seul fichier HTML court. Si vous l'enregistrez et double-cliquez dessus, il s'ouvrira dans votre navigateur et commencera à afficher l'heure actuelle. Ensuite, il mettra à jour l'affichage toutes les 10 secondes si l'heure a changé.

Il existe également un champ de texte dans lequel vous pouvez saisir une heure précise et voir à quoi cela ressemblera dans votre projet.

La conception de l'horloge de mots de chacun est différente, j'ai donc essayé de configurer le code facilement. Consultez les prochaines étapes pour obtenir des conseils sur la façon de procéder.

J'espère que ça t'as aidé! C'est génial de pouvoir expérimenter avec les mises en page et les mots avant de s'engager dans le matériel !

Étape 1: Téléchargez le fichier HTML

Le simulateur est une application Web à fichier unique. C'est un peu moins de 200 lignes. Vous pouvez le télécharger ici.

(Il n'y a pas vraiment de bouton pour télécharger le fichier sur Github. Mais vous pouvez simplement sélectionner le contenu du fichier, copier et coller dans un nouveau fichier texte sur votre ordinateur. Assurez-vous de nommer le fichier quelque chose.html.)

Après l'avoir téléchargé, double-cliquez sur le fichier et il se chargera dans un onglet de votre navigateur. Vous devriez voir l'heure actuelle affichée dans une grille de mots.

Remarque: J'ai uniquement testé l'application avec Chrome sous Windows.

Étape 2: Modifier la grille

Vous pouvez essayer différentes mises en page de mots en éditant le morceau de Javascript qui ressemble à ceci:

var chaîne_ligne = [" IL EST ", " UN DEUX TROIS ", " QUATRE CINQ SIX ", " SEPT HUIT ", " NEUF DIX ", " ONZE DOUZE ", " OH CINQ DIX ", " FIFTEEN TWENTY ", " O'CLOCK TRENTE ", " QUARANTE CINQUANTE CINQ CINQ ", " EN APRES-MIDI ", " LA NUIT MATIN ",];

Si vous ajoutez/supprimez des lignes et rechargez la page, votre grille sera plus grande ou plus petite.

Et si vous ajoutez plus de lettres à chaque ligne, votre grille s'élargira. Assurez-vous simplement que toutes les lignes ont le même nombre de lettres.

Vous remarquerez que les chaînes du code ci-dessus contiennent des espaces, mais ceux-ci sont transformés en caractères aléatoires dans la grille. Vous pouvez choisir le jeu de caractères qui sera utilisé au hasard pour remplir ces espaces en éditant la ligne qui ressemble à ceci:

var RANDCHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ@#$%&";

Étape 3: Changer le libellé

Vous aurez besoin de savoir comment écrire du code si vous souhaitez utiliser un phrasé différent. La logique qui prend une date et la transforme en mots se trouve dans la fonction appelée dateToSentence().