/jPigLatin.com

JPigLatin is a pig-latin translation and speech synthesis application powered by the jPigLatin javaScript package

Primary LanguageSCSS

JPigLatin.com

landing page for jPigLatin, the Javascript Pig-Latin Generator 🐷

Netlify Status npm version

JPigLatin.com is the landing page for the jPigLatin npm package. JPigLatin is a javascript package that takes plain text and converts it into pig-latin. The site is built with Netlify and the Doks Hugo Theme.

About

JPigLatin is a javascript package that takes plain text and converts it into pig-latin. Originally inspired by an episode of Stuff You Should Know, the project was created to learn more about developing packages on NPM.

How it works

The actual code is pretty simple. The main function encode accepts the ElementID's of user-supplied input , proccesses it with simple pig-latin based rules, and returns the encoded output. Developers can set the output of encode using innerHTML to display the output. See quick start to see an example.

function encode(input,output) {
  var string = document.getElementById(input).value;
  var words = string.split(" ");
  var answer = "";
  var temp = "";
  for (var i = 0; i < words.length; i += 1) {
      temp = words[i].slice(1);
        if (typeof temp === 'undefined' || typeof words[i][0] === 'undefined') {
          break;
        } else {
          answer = answer + (temp.toLowerCase()+words[i][0].toLowerCase()+"ay") + " ";
        }
   }
    return answer;
 }

Quick Start

Installation

  1. Via CDN

Replace version with current version, i.e 1.0.3

<script src="https://unpkg.com/jpiglatin@VERSION/index.js"></script>

  1. Via NPM

npm i jPigLatin -save

Use

  1. Include jPigLatin in page source

<script src="https://unpkg.com/jpiglatin@1.0.2/index.js"></script>

  1. Create two fields, one for user input and one for output
<span id="input">This is a test</span>
<span id="output"></span>
  1. Use javascript to get pass input to jPigLatin encode() function. Set input and output ElementID's with local variables.
<script>
    function displayPigLatin(){
        var input = "input";
        var output = "output";
        document.getElementById(output).innerHTML = encode(input,output);
    }
</script>
  1. Use an event loader to execute function
<button onclick="displayPigLatin()">Translate</button>

Contributing

Feel free to make a pull request for features

Thanks 🙏

Special thanks to those below who were inspirations for this quick project

  1. Henk Verlinde whoose open source Jekyll theme doks was the base template for the applicaiton. Check out more of his awesome work on his GitHub page and see the original theme for yourself here

  2. Asaolu Elijah 🧙‍♂️ for his article "Text To Speech In 3 Lines Of JavaScript" on Dev.To, read the full article here

  3. Josh Clark and Chuck Bryant for the great podcasts and inspiration