random-web-tools/src/views/StrToNATOAlphabet.vue

<template>
  <h2 class="tool-title">Str to NATO alphabet</h2>
  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label for="data">Data</label>
    <input id="data" v-model="toolData.data" v-on:keyup="result" type="text">
  </div>

  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label for="result">Result</label>
    <MonacoEditor name="result" language="php" :value="toolResult"></MonacoEditor>
  </div>
</template>

<script>
import axios from "axios";
import { config } from "../../config";
import MonacoEditor from "@/components/MonacoEditor.vue";

export default {
  components: {
    MonacoEditor
  },
  data() {
    return {
      toolData: {
        data: ""
      },
      toolResult: ""
    };
  },
  methods: {
    result() {
      const natoAlphabet = {
        "A": "Alpha", "B": "Bravo", "C": "Charlie", "D": "Delta",
        "E": "Echo", "F": "Foxtrot", "G": "Golf", "H": "Hotel",
        "I": "India", "J": "Juliett", "K": "Kilo", "L": "Lima",
        "M": "Mike", "N": "November", "O": "Oscar", "P": "Papa",
        "Q": "Quebec", "R": "Romeo", "S": "Sierra", "T": "Tango",
        "U": "Uniform", "V": "Victor", "W": "Whiskey", "X": "X-ray",
        "Y": "Yankee", "Z": "Zulu"
      };

      this.toolResult = this.toolData.data.toUpperCase().split("").map(char => natoAlphabet[char] || char).join(" ");
    }
  }
};
</script>

<style lang="scss">

</style>