AustinCodingAcademy · JamesMessina · Jan 27, 2021 · Jan 27, 2021 · Feb 8, 2021 · Feb 8, 2021
diff --git a/christopher-carson-i4XLJmlYit4-unsplash (1).jpg b/christopher-carson-i4XLJmlYit4-unsplash (1).jpg
diff --git a/index.html b/index.html
@@ -2,14 +2,36 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title></title>
-    <script src="main.js"></script>
+    <title>Pig Latin Translator</title>
+    <script src="./main.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="./main.css">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@200&family=Roboto:wght@100&display=swap" rel="stylesheet">
   </head>
   <body>
-    <h1>Hello World!</h1>
+    <div class="titleContainer">
+      <h1>Pig Latin Translator</h1>
+    </div>
     <hr/>
-    <div id="display-element"></div>
-    <button onclick="displayDate()">Click Me</button>
     <hr/>
+    <div id="word_input_box">
+      <div class="input-group flex-nowrap w-25">
+        <span class="input-group-text" id="addon-wrapping">English Word</span>
+        <input id="word" value="" type="text" class="form-control" placeholder="..." aria-label="Username" aria-describedby="addon-wrapping">
+      </div>
+    </div>
+    <br>
+    <div class="button_container">
+      <button id="translate" type="button" class="btn btn-info btn-md" onclick="myFunction()">Translate</button>
+      <button type="button" class="btn btn-info btn-md" onclick="myClear()">Clear</button>
+    </div>
+    <br><br>
+    <div id="word_input_box">
+      <div class="input-group flex-nowrap w-25">
+        <span class="input-group-text" id="addon-wrapping">Pig Latin Word</span>
+        <input id="output" value="" type="text" class="form-control" placeholder="..." aria-label="Username" aria-describedby="addon-wrapping">
+      </div>
+    </div>
   </body>
 </html>
diff --git a/main.css b/main.css
@@ -0,0 +1,35 @@
+body {
+    background-image: url(./christopher-carson-i4XLJmlYit4-unsplash\ \(1\).jpg);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    text-align: center;
+    align-items: center;
+}
+
+.titleContainer {
+    font-family: 'Noto Serif Display';
+    color: white;
+    font-size: larger;
+    font-weight:700;
+    letter-spacing: 4px;
+}
+
+hr {
+    color: white;
+}
+
+#word_input_box {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.button_container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center
+}
+
+#translate {
+    margin-right: 30px;
+}
diff --git a/main.js b/main.js
@@ -10,26 +10,75 @@ const rl = readline.createInterface({
   output: process.stdout
 });
 
+function myFunction(){
 
-const pigLatin = (word) => {
+  let input = document.getElementById('word').value; 
+  console.log(input);
 
-  // Your code here
+  let output = pigLatin(input); 
+  console.log(output); 
 
+  document.getElementById('output').value = output; 
 }
 
-// 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
+function pigLatin(word){
+
+  //if input is not of string type then return undefined, must be word. 
+
+  if(typeof word !== 'string'){
+    return 'undefined, must be a word'; 
+  } 
+
+  word = word.toLowerCase().trim(); //makes input lowercase and takes away whitespace. 
+  const beginningConsonants = []; //create empty array variable to store beginning consonants
+  let stringToArray = word.split(''); //split the string into an array of letters 
+  let translatedWord = ''; 
+
+  //create for loop to iterate over each letter in the array 
+  for(let i = 0; i < stringToArray.length; i++){
+    //create variable to store current letter I'm iterating over. 
+    let currentLetter = stringToArray[i]; 
+    //if that current letter is a vowel then make a copy of the array that contains just the vowel and all letter after it and reassign to stringToArray var. 
+    //break for loop. 
+    if(currentLetter === 'a' || currentLetter === 'e' || currentLetter === 'i' || currentLetter === 'o' || currentLetter === 'u'){
+      stringToArray = stringToArray.slice(i); 
+      break;
+    }else{
+      beginningConsonants.push(currentLetter); //if current letter I'm iterating over is not a vowel then add to constants array. 
+    }
+  }
+
+
+
+  // if input word starts with a vowel then take new stringToArr var and add 'yay' to the end. 
+  if(word[0] === 'a' || word[0] === 'e' || word[0] === 'i' || word[0] === 'o' || word[0] === 'u'){
+    translatedWord += stringToArray.concat(['y','a','y']).join('');
+    return translatedWord; 
+    //if input word starts with a consonant then take new stringToArr var and add the consonants and then 'ay' to the end. 
+  }else{
+    translatedWord += stringToArray.concat(beginningConsonants).concat(['a','y']).join(''); 
+    return translatedWord; 
+  }
+
+}
+
+function myClear(){
+
+  document.getElementById('output').value = ''; 
+  document.getElementById('word').value = ''; 
+
+}
+
+
+
 const getPrompt = () => {
-  rl.question('word ', (answer) => {
+  rl.question('word: ', (answer) => {
     console.log( pigLatin(answer) );
     getPrompt();
   });
 }
 
-// Unit Tests
-// to use them run the command: npm test main.js
-// to close them ctrl + C
+
 if (typeof describe === 'function') {
 
   describe('#pigLatin()', () => {
@@ -69,3 +118,6 @@ if (typeof describe === 'function') {
 // 1. if word begins with a vowel send to one function: adds "yay"
 // 2. if word begins with a consonant send to another function: splices off beginning, returns word with new ending.
 // 3. if multiple words, create array of words, loop over them, sending them to different functions and creating a new array with the new words.
+
+
+