diff --git a/gui.js b/gui.js
new file mode 100644
index 00000000..7bf89fde
--- /dev/null
+++ b/gui.js
@@ -0,0 +1,55 @@
+// create onload input
+
+
+
+
+//created elements
+let textInput = document.createElement("INPUT")
+let translateButton = document.createElement("BUTTON")
+let translationText = document.createElement("DIV")
+// console.log(, button, div)
+  
+document.body.appendChild(textInput);
+document.body.appendChild(translateButton);
+document.body.appendChild(translationText)
+
+translateButton.innerText = "Translate"
+
+//storing a value
+const storeInput = (word) => {
+  textInput = word
+}
+let word = ""
+// console.log(word)
+
+
+textInput.addEventListener("input", storeInput)
+
+//run pigLatin
+const pigLatin = () => {
+  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 {
+    let firstMatch = cleanWord.match(/[aeiou]/g) || 0;
+    let vowelIndex = cleanWord.indexOf(firstMatch[0]);
+    finalWord = cleanWord.slice(vowelIndex) + cleanWord.slice(0, vowelIndex) + "ay";
+    return finalWord;
+  }
+}
+
+// console.log(textInput)
+//invoke with click
+translateButton.addEventListener('click', pigLatin)
+
+//display translations
+  const displayPigLatin = (finalWord) => {
+    let newDiv = document.createElement("P");
+    newDiv.innerText = (finalWord);
+    document.appendChild(newDiv);
+  }
+  
\ No newline at end of file
diff --git a/index.html b/index.html
index 8f536de8..4d17f148 100644
--- a/index.html
+++ b/index.html
@@ -3,13 +3,12 @@
   <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/>
+    <h1>Pig Latin!</h1>
+    
+    <!-- <script src="main.js"></script> -->
+    <script src="gui.js"></script>
   </body>
 </html>
diff --git a/main.js b/main.js
index 1c92f304..92395921 100644
--- a/main.js
+++ b/main.js
@@ -10,12 +10,39 @@ const rl = readline.createInterface({
   output: process.stdout
 });
 
+let word = ""
 
 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 {
+    let firstMatch = cleanWord.match(/[aeiou]/g) || 0;
+    let vowelIndex = cleanWord.indexOf(firstMatch[0]);
+    finalWord = cleanWord.slice(vowelIndex) + cleanWord.slice(0, vowelIndex) + "ay";
+    return finalWord;
+  }
+}
 
-  // Your code here
 
-}
+
+// for (let i = 0; i <  word.length; i++){
+//   for(let i=1; i<item.length; i++){
+//     if (item[i].match(vowel)){
+//       return item.substring(i)+item.substring(0,i)+ '-ay';
+//     } 
+
+
+// }
+
+// splice out 'y' (first sound)
+// concat/push 'y' (first sound) to end
+
+
+//  concat 'ay' to the end
 
 // the first function called in the program to get an input from the user
 // to run the function use the command: node main.js
@@ -61,6 +88,7 @@ if (typeof describe === 'function') {
 
 
 
+
 // **********
 //   HINTS
 // **********
@@ -68,4 +96,3 @@ if (typeof describe === 'function') {
 // break your code into pieces and focus on one piece at a time...
 // 1. if word begins with a vowel send to one function: adds "yay"
 // 2. if word begins in 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.
\ No newline at end of file
