AustinCodingAcademy · Crimsontyphon7 · Jan 31, 2022 · Jan 31, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/gui.js 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');
+    }
+  }
diff --git a/index.html b/index.html
@@ -2,14 +2,22 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title></title>
-    <script src="main.js"></script>
+    <title>Piglatin Translator</title>
+    <link rel="stylesheet" href="style.css">
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Qahiri&display=swap" rel="stylesheet">
+
+    <script src="gui.js" defer></script>
   </head>
   <body>
-    <h1>Hello World!</h1>
-    <hr/>
-    <div id="display-element"></div>
-    <button onclick="displayDate()">Click Me</button>
-    <hr/>
+    <main>
+      <img src="./img/piglatin.png" alt="Illustration of a pig">
+      <h1>Piglatin Translator</h1>
+      <div class="form-container">
+        <input type="text" name="translatorInput" id="translatorInput" placeholder="Input word(s) to translate">
+        <button onclick="translateUserInput()">Translate</button>
+        <div id="translatorResult"></div>
+      </div>
+    </main>
   </body>
-</html>
+</html>
diff --git 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
@@ -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;
+}