Créer un traducteur de code Morse.

Pendant l'été, j'ai décidé de créer un traducteur de code Morse pour m'aider à m'entraîner à utiliser JavaScript. Je vais montrer comment je l'ai réalisé en montrant et en expliquant également mon code avec des diagrammes.

Si vous souhaitez accéder à son site Web, cliquez ici : https://morse-code-translater.vercel.app/

Révision rapide HTML et CSS

J'ai décidé que le haut aurait un titre Code Morse avec une animation de saisie et au centre de la page un formulaire avec deux zones de texte, une où l'utilisateur peut saisir et une qui sera le sortir. Entre eux, j'ai ajouté un bouton de commutation (pour passer du texte au morse ou du morse au texte à nouveau) en utilisant une icône d'Ionicons et un bouton de référence de code Morse utilisant les balises de détails et de résumé. Une fois mis au point, il y a un bouton de traduction dans la zone de texte de saisie (celui du haut). Enfin, en bas se trouve le texte qui indique le nombre de thèmes secrets que vous avez trouvés. J'ai utilisé des variables CSS pour changer rapidement le thème des sites Web selon que l'ordinateur de l'utilisateur est en mode sombre ou clair ou s'il a trouvé un message spécial en code Morse qui lui donnera un thème secret.

---

Algorithme JS

1. Collecte des commentaires des utilisateurs et vérification si elles sont bonnes.

Pour obtenir la contribution de l'utilisateur, nous devons d'abord stocker les éléments nécessaires, qui sont les zones de texte et la saisie de l'utilisateur. Nous pouvons récupérer l'entrée de l'utilisateur avec la propriété value dès que vous cliquez sur le bouton de traduction, puis vérifier si elle utilise des points et des tirets uniquement avec la fonction checkIfValid().

//storing the elements
var InputTextArea = document.getElementById("morseTextArea");
var OutputTextArea = document.getElementById("textArea");
var translateButton = document.querySelector(".translateBtn");
//storing the user input from the text area element
var input = InputTextArea.value.toString("");


function checkIfValid() {
  input = InputTextArea.value.toString("");
  if (isInputMorse && input.match(/[a-zA-Z0-9_@#$%^&*()]/g) === null) {
    morseToText();
    return console.log(input.split(" "));
  }
  if (!isInputMorse) {
    textToMorse();
    return console.log(input.split(" "));
  } else {
    InputTextArea.value = "";
  }


translateButton.addEventListener("click", checkIfValid);

---

2. Morse en SMS ou SMS en Morse ?

Pour faire savoir à l'ordinateur si nous traduisons du morse en texte ou du texte en morse, j'ai créé une variable booléenne appelée isInputMorse (utilisée dans l'exemple ci-dessus) qui commence par true. Cependant, si le bouton de commutation est cliqué, il prend sa valeur opposée (ex : vrai à faux). Dans la fonction checkIfVaild(), l'entrée utilisateur doit utiliser uniquement des points et des tirets et avoir la variable isInputMorse définie sur true pour traduire du morse en texte, mais si cette variable est définie sur false, elle traduira le texte en morse. Les espaces réservés des zones de texte changent également selon que la variable est vraie ou fausse.

var isInputMorse = true;
var swapBtn = document.getElementById("swapBtn");

swapBtn.addEventListener("click", () => {
  isInputMorse = !isInputMorse;
  OutputTextArea.value = "";
  InputTextArea.value = "";
  if (!isInputMorse) {
    InputTextArea.setAttribute("placeholder", "Text(Input)");
    OutputTextArea.setAttribute("placeholder", "Morse(Output)");
  } else {
    InputTextArea.setAttribute("placeholder", "Morse(Input)");
    OutputTextArea.setAttribute("placeholder", "Text(Output)");
  }
});

---

3. Traduire

J'ai créé deux fonctions de traduction, morseToText() et textToMorse() qui devraient être évidentes quant à ce qu'elles font. La fonction morse en texte divise l'entrée de l'utilisateur en un tableau caractère par caractère qui est ensuite mappé avec morseRef.

var morseRef = {
  ".-": "A",
  "-...": "B",
  "-.-.": "C",
  "-..": "D",
  ".": "E",
  "..-.": "F",
  "--.": "G",
  "....": "H",
  "..": "I",
  ".---": "J",
  "-.-": "K",
  ".-..": "L",
  "--": "M",
  "-.": "N",
  "---": "O",
  ".--.": "P",
  "--.-": "Q",
  ".-.": "R",
  "...": "S",
  "-": "T",
  "..-": "U",
  "...-": "V",
  ".--": "W",
  "-..-": "X",
  "-.--": "Y",
  "--..": "Z",
  ".----": "1",
  "..---": "2",
  "...--": "3",
  "....-": "4",
  ".....": "5",
  "-....": "6",
  "--...": "7",
  "---..": "8",
  "----.": "9",
  "-----": "0",
  "/": " ",
  "--..--": ",",
  "..--..": "?",
  "-.-.-.": ";",
  "---...": ":",
  "-....-": "-",
  "-..-.": "/",
  ".----.": "'",
  "-.-.--": "!",
};

function morseToText() {
    let str = input
    .split(" ")
    .map((code) => morseRef[code])
    .join("");
    OutputTextArea.value = str;
    lookForSecrets();

}

Ensuite, le nouveau tableau de texte est réuni et une sortie est donnée dans la zone de texte de sortie pour que l'utilisateur puisse la voir.

La fonction texte en morse utilise une méthode similaire, mais un objet morseRef inversé. L'entrée de l'utilisateur est mise en majuscules et est mappée avec le morseRef inversé pour devenir Morse, puis réunie à nouveau pour être donnée en sortie de code Morse.

var reversedMorseRef = {};

for (var key in morseRef) {
  if (morseRef.hasOwnProperty(key)) {
    reversedMorseRef[String(morseRef[key])] = key;
  }

function textToMorse() {
  let textStr = input
    .toUpperCase()
    .split("")
    .map((text) => reversedMorseRef[text])
    .join(" ");
  OutputTextArea.value = textStr;
}

Voici un schéma que j'ai réalisé sur Figma pour une explication plus visuelle sur les fonctions.

Astuces pour les secrets

J'ai également ajouté des thèmes secrets à mon site Web, vous pouvez les obtenir en saisissant des messages spéciaux en code Morse.

Conseils :

1. Le message en code Morse le plus couramment utilisé en cas d'urgence
2. Un célèbre message en code morse cligné des yeux pendant la guerre du Vietnam
3. Le premier message en code morse jamais réalisé

C'est tout pour l'instant, merci d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!