joshua/natospell
1
0
Fork 0
mirror of https://github.com/seigler/natospell synced 2025-07-26 00:26:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Joshua Seigler 2017-01-27 16:52:57 -05:00
commit 485538f90d
6 changed files with 135 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
.editorconfig Normal file
View file

@ -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

5
.gitignore vendored Normal file
View file

@ -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/

19
README.md Normal file
View file

@ -0,0 +1,19 @@
## Synopsis
This is a single-page app that helps you use the <em><acr title="North American Trade Organization">NATO</acr> phonetic alphabet</em>.
## 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

24
src/index.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NatoSpell</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>NatoSpell</h1>
</header>
<main>
<form>
<h2>Type Here:</h2>
<input type="text" value="" id="inputElement" autofocus>
</form>
<section>
<h2>Phonetic:</h2>
<div id="outputElement"></div>
</section>
</main>
<script src="main.js"></script>
</body>
</html>

36
src/main.css Normal file
View file

@ -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;
}

35
src/main.js Normal file
View file

@ -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();
}());