diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/gui.js b/gui.js new file mode 100644 index 00000000..af0ea1a0 --- /dev/null +++ b/gui.js @@ -0,0 +1,76 @@ +const translate = (word) => { + let vowelPosition = positionOfFirstVowel(word); + + if (vowelPosition === -1) { + // If the word doesn't have a vowel add ay to the end of it + return noVowels(word); + } else if (vowelPosition === 0) { + // If the first letter is a vowel add yay to the end + return beginsWithVowel(word); + } + // If the first letter is a constanant find the fist vowel. + // split the word at the vowel and swap sides. Add ay to the end of it + return beginsWithConsonant(word, vowelPosition); + } + + const positionOfFirstVowel = (word) => { + for (let i = 0; i < word.length; i++) { + const vowels = 'aeiou'; + let letter = word[i]; + + if (vowels.includes(letter)) { + return i; + } + } + return -1; + } + + const noVowels = (word) => { + return word += 'ay'; + } + + const beginsWithVowel = (word) => { + return word += 'yay'; + } + + const beginsWithConsonant = (word, position) => { + let firstString = word.substr(0, position); + let secondString = word.substr(position); + return secondString += firstString += 'ay'; + } + + const stringToArrayFormatted = (string) => { + return string.trim().toLowerCase().split(' '); + } + + const pigLatin = (string) => { + let wordArray = stringToArrayFormatted(string); + + // Check for multiple words in string + if(wordArray.length > 1) { + let newString = ''; + for(let i = 0; i < wordArray.length; i++) { + newString += translate(wordArray[i]) + ' '; + } + return newString.trim(); + } + + return translate(wordArray[0]); + } + + const displayResult = (result) => { + let para = document.getElementById('translatorResult'); + para.innerHTML = result; + } + + const translateUserInput = () => { + let userInput = document.getElementById('translatorInput').value; + + if(userInput !== '') { + let translation = pigLatin(userInput); + displayResult(translation); + document.getElementById('translatorInput').value = ''; + } else { + displayResult('Please enter a word to translate'); + } + } \ No newline at end of file diff --git a/index.html b/index.html index 8f536de8..93b4ab14 100644 --- a/index.html +++ b/index.html @@ -2,14 +2,22 @@ - - + Piglatin Translator + + + + + -

Hello World!

-
-
- -
+
+ Illustration of a pig +

Piglatin Translator

+
+ + +
+
+
- + \ No newline at end of file diff --git a/main.js b/main.js index 282f4c93..5aea4838 100644 --- a/main.js +++ b/main.js @@ -11,18 +11,76 @@ const rl = readline.createInterface({ }); -const pigLatin = (word) => { +const translate = (word) => { + let vowelPosition = positionOfFirstVowel(word); + + if (vowelPosition === -1) { + // If the word doesn't have a vowel add ay to the end of it + return noVowels(word); + } else if (vowelPosition === 0) { + // If the first letter is a vowel add yay to the end + return beginsWithVowel(word); + } + // If the first letter is a constanant find the fist vowel. + // split the word at the vowel and swap sides. Add ay to the end of it + return beginsWithConsonant(word, vowelPosition); +} + +const positionOfFirstVowel = (word) => { + for (let i = 0; i < word.length; i++) { + const vowels = 'aeiou'; + let letter = word[i]; - // Your code here + if (vowels.includes(letter)) { + return i; + } + } + return -1; +} + +const noVowels = (word) => { + return word += 'ay'; +} + +const beginsWithVowel = (word) => { + return word += 'yay'; +} + +const beginsWithConsonant = (word, position) => { + let firstString = word.substr(0, position); + let secondString = word.substr(position); + return secondString += firstString += 'ay'; +} +const stringToArrayFormatted = (string) => { + return string.trim().toLowerCase().split(' '); } +const pigLatin = (string) => { + let wordArray = stringToArrayFormatted(string); + + // Check for multiple words in string + if (wordArray.length > 1) { + let newString = ''; + for (let i = 0; i < wordArray.length; i++) { + newString += translate(wordArray[i]) + ' '; + } + return newString.trim(); + } + + return translate(wordArray[0]); +} + + + + + // the first function called in the program to get an input from the user // to run the function use the command: node main.js // to close it ctrl + C const getPrompt = () => { rl.question('word ', (answer) => { - console.log( pigLatin(answer) ); + console.log(pigLatin(answer)); getPrompt(); }); } diff --git a/style.css b/style.css new file mode 100644 index 00000000..270e5328 --- /dev/null +++ b/style.css @@ -0,0 +1,85 @@ +* { + box-sizing: border-box; +} + +body { + background-color: #3C5186; + display: flex; + justify-content: center; + font-family: 'Poppins', sans-serif; +} + +/** +Buttons +**/ +button { + background-color: #3C5186; + color: #fff; + border: 1px solid #3C5186; + border-radius: 0; + font-size: 1.15rem; + padding: 1rem 2rem; + width: 100%; + cursor: pointer; + text-transform: uppercase; + letter-spacing: 3px; + transition: all .3s ease-in-out; +} + +button:hover { + background-color: rgba(60, 81, 134, 0.95); + transform: scale(1.05); +} + +/** +Input +**/ +input { + padding: 1rem; + margin-bottom: 1rem; + width: 100%; + font-size: 1.15rem; +} + +/** +Content +**/ +main { + margin: 2rem auto; + padding: 3rem 5rem; + background-color: #fff; + border-radius: 15px; + text-align: center; +} + +img { + max-width: 40%; + height: auto; + margin: auto; +} + +h1 { + letter-spacing: 3px; + font-family: 'Qahiri', sans-serif; + font-size: 5rem; + color: #231F20; + margin-top: 1rem; + margin-bottom: 1rem; +} + +.form-container { + display: flex; + flex-direction: column; +} + +#translatorResult { + display: flex; + justify-content: center; + align-items: center; + min-height: 100px; + width: 100%; + margin: 1rem auto; + padding: 0.5rem; + background-color: rgb(255 170 170); + font-size: 1.5rem; +} \ No newline at end of file