commit 485538f90dd52ed37a47390c6bfa1dc06b3a799f Author: Joshua Seigler Date: Fri Jan 27 16:52:57 2017 -0500 initial commit diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..e38c832 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,16 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d3f11de --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +# https://git-scm.com/docs/gitignore +# https://help.github.com/articles/ignoring-files +# Example .gitignore files: https://github.com/github/gitignore +/bower_components/ +/node_modules/ \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..c308932 --- /dev/null +++ b/README.md @@ -0,0 +1,19 @@ +## Synopsis + +This is a single-page app that helps you use the NATO phonetic alphabet. + +## Motivation + +I need a phonetic alphabet maybe once every three months. This will be nice to have when I'm on the phone with some billing department. + +## Usage + +Visit https://seigler.github.io/natospell/ + +## Contributors + +Send me a PR or open an issue. + +## License + +MIT License \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..f728702 --- /dev/null +++ b/src/index.html @@ -0,0 +1,24 @@ + + + + + NatoSpell + + + +
+

NatoSpell

+
+
+
+

Type Here:

+ +
+
+

Phonetic:

+
+
+
+ + + diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..1619f78 --- /dev/null +++ b/src/main.css @@ -0,0 +1,36 @@ +*, *:before, *:after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +:root { + box-sizing: border-box; + height: 100vh; +} + +body { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + font-size: calc(1vw + 1em); + background-color: tan; +} + +header, main { + margin: 0 auto; + width: 30em; + padding: 1rem; +} + +h2 { + margin-top: 0.5em; +} + +input[type="text"] { + width: 100%; + font-size: inherit; + padding: 0.25em; +} diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..d697066 --- /dev/null +++ b/src/main.js @@ -0,0 +1,35 @@ +(function () { + "use strict"; + var words, inputElement, outputElement; + + function translate(input) { + var i, length, output, key, a = 'a'.charCodeAt(0), z = 'z'.charCodeAt(0); + input = input.toLowerCase(); + output = ""; + length = input.length; + for (i = 0; i < length; i += 1) { + key = input.charCodeAt(i) - a; + if (key >= 0 && key <= 26) { + if (i > 0) { + output += " "; + } + output += words[key]; + } + } + return output; + } + + function changeListener(event) { + outputElement.innerHTML = translate(event.target.value); + } + + function init() { + words = [ "Alfa", "Bravo", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India", "Juliett", "Kilo", "Lima", "Mike", "November", "Oscar", "Papa", "Quebec", "Romeo", "Sierra", "Tango", "Uniform", "Victor", "Whiskey", "X-ray", "Yankee", "Zulu" ]; + inputElement = document.getElementById("inputElement"); + outputElement = document.getElementById("outputElement"); + + inputElement.addEventListener("input", changeListener); + } + + init(); +}());