AustinCodingAcademy · destinyfsetzer · Jul 15, 2020 · Jul 15, 2020 · Jul 15, 2020 · Jul 20, 2020
diff --git a/.prettierrc b/.prettierrc
diff --git a/dom-main.js b/dom-main.js
@@ -0,0 +1,43 @@
+let value = "";
+
+const storeString = (valA) => {
+  value = valA;
+};
+
+// const displayTranslation = (translatedWord) => {
+//     var newDiv = document.createElement("P");
+//     newDiv.innerText = (translatedWord);
+//     document.body.appendChild(newDiv);
+// }
+
+const displayTranslation = (translatedWord) => {
+  var newDiv = document.createElement("P");
+  newDiv.innerText = translatedWord;
+  newDiv.id = "pigLatinResult";
+  document.body.appendChild(newDiv);
+
+  //replace previous word upon new button click
+  let previousWord = document.getElementById("pigLatinResult");
+  let parentDiv = previousWord.parentNode;
+  parentDiv.replaceChild(newDiv, previousWord);
+};
+
+const pigLatin = () => {
+  let vowels = ["a", "e", "i", "o", "u"];
+  let finalWord = "";
+  let cleanWord = value.toLowerCase().trim();
+  if (vowels.indexOf(cleanWord[0]) > -1) {
+    finalWord = cleanWord + "yay";
+    return displayTranslation(finalWord);
+  } else {
+    let firstMatch = cleanWord.match(/[aeiou]/g) || 0;
+    let vowelIndex = cleanWord.indexOf(firstMatch[0]);
+    finalWord =
+      cleanWord.substring(vowelIndex) +
+      cleanWord.substring(0, vowelIndex) +
+      "ay";
+    return displayTranslation(finalWord);
+  }
+};
+
+//   console.log(pigLatin('Alabama'))
diff --git a/index.html b/index.html
@@ -1,15 +1,56 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title></title>
-    <script src="main.js"></script>
-  </head>
-  <body>
-    <h1>Hello World!</h1>
-    <hr/>
-    <div id="display-element"></div>
-    <button onclick="displayDate()">Click Me</button>
-    <hr/>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <!-- CSS only -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
+  <title>Pig Latin</title>
+  <style>
+    body {
+      font-family: 'Playfair Display', serif;
+      margin: auto;
+      width: 50%;
+      padding: 20px;
+    }
+
+    p {
+      font-size: 30px;
+      background-color: white;
+      border: 3px solid #12CAF0;
+      position: absolute;
+      top: 30%;
+      left: 47%;
+      transform: translate(-50%, -50%);
+      padding: 15px;
+      border-radius: 5px;
+    }
+  </style>
+</head>
+
+<body style="text-align: center; background-color: #88A078;">
+  <div class="card" style="width: 30rem; border-radius: 5px;">
+    <img
+      src="https://images.unsplash.com/photo-1580682777666-24a7b3024e24?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"
+      class="card-img-top" alt="...">
+    <div class="card-body">
+      <h1>Pig Latin-ator</h1>
+      <h5 class="card-text">Pig Latin is not actually a language but a language game used to speak “in code.” Pig Latin
+        words are formed by altering
+        words in English.</h5>
+      <hr />
+      <div id="display-element"></div>
+      <input class="input-group-text" id="inputGroup-sizing-default" style="width: 450px;" id="stringInput" value=""
+        placeholder="Type in a word!" oninput="storeString(this.value)"></input>
+      <br>
+      <button type="button" style="width: 200px;" class="btn btn-outline-info" onclick="pigLatin()">Translate</button>
+    </div>
+  </div>
+  <script src="dom-main.js"></script>
+
+</body>
+
+</html>
diff --git a/main.js b/main.js
@@ -11,15 +11,45 @@ const rl = readline.createInterface({
 });
 
 
+
 const pigLatin = (word) => {
+  let vowels = ['a', 'e', 'i', 'o', 'u'];
+  let finalWord = "";
+  let cleanWord = word.toLowerCase().trim()
+  if (vowels.indexOf(cleanWord[0]) > -1) {
+      finalWord = cleanWord + "yay";
+      return finalWord;
+  } else {
+    // we used a regex BOOM
+      let firstMatch = cleanWord.match(/[aeiou]/g) || 0;
+      let vowelIndex = cleanWord.indexOf(firstMatch[0]);
+      finalWord = cleanWord.substring(vowelIndex) + cleanWord.substring(0, vowelIndex) + "ay";
+      return finalWord;
+  }
+}
+
+console.log(pigLatin('Alabama'))
+
+
+
+// if word begins with consonant
+// list the vowels: a, e, i, o, u **
+// run through string until we find the first vowel
+// identify index position, store and use
+// store sound before vowel in a variable (bucket)
+
+// splice out 'y' (first sound)
+// concat/push 'y' (first sound) to end
+
+//  concat 'ay' to the end
 
-  // Your code here
 
-}
 
 // 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) );

diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "jsdom": "^11.6.2",
     "mocha": "^5.0.0",
     "postcss-html": "^0.34.0",
-    "stylelint": "^7.13.0"
+    "stylelint": "^7.13.0",
+    "tailwindcss": "^2.0.2"
   }
 }