random-web-tools/src/views/strings/NATOAlphabet.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 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>