AustinCodingAcademy · Psmithcode · Sep 23, 2022 · Oct 3, 2022
diff --git a/index.html b/index.html
@@ -1,19 +1,26 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <title></title>
+    <meta charset="utf-8" />
+    <title>Pig Latin Generator</title>
     <script src="main.js"></script>
+    <link rel="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <h1>Hello World!</h1>
-    <hr/>
-    <div id="display-element"></div>
-    <form>
-      <input id="user-input" type="text">
+    <div id="pigLatinContainer">
+      <h1>Pig Latin Generator</h1>
+      <hr />
+      <p>Input:</p>
+      <input id="user-input" type="text" />
+      <br />
       <!-- How do you get this input sent to the pigLatin() function? -->
-      <button onclick="pigLatin()">Translate</button>
-    </form>  
-    <hr/>
+      <button onclick="pigLatin(document.getElementById('user-input').value)">
+        Translate
+      </button>
+      <hr />
+      <p>Output:</p>
+      <div id="display-element"></div>
+    </div>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,66 +1,107 @@
-'use strict';
+"use strict";
 
 // brings in the assert module for unit testing
-const assert = require('assert');
-// brings in the readline module to access the command line
-const readline = require('readline');
+// const assert = require("assert");
+// // brings in the readline module to access the command line
+// const readline = require("readline");
 // use the readline module to print out to the command line
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout
-});
-
+// const rl = readline.createInterface({
+//   input: process.stdin,
+//   output: process.stdout,
+// });
 
 const pigLatin = (word) => {
-
-  // Your code here
-
-}
+  word = word.toLowerCase().trim();
+  let wordArray = word.split("");
+  let firstConsonants = "";
+
+  // If first letter isnt a vowel
+
+  // and second letter isnt a vowel
+  // if (word[0] || word[1] != 'a' && word[0] || word[1] != 'e' && word[0] || word[1] != 'i' && word[0] || word[1] != 'o' && word[0] || word[1] != 'u') {
+  //   console.log("this word has two consonants")
+  // }
+
+  if (
+    word[0] != "a" &&
+    word[0] != "e" &&
+    word[0] != "i" &&
+    word[0] != "o" &&
+    word[0] != "u" &&
+    word[1] != "a" &&
+    word[1] != "e" &&
+    word[1] != "i" &&
+    word[1] != "o" &&
+    word[1] != "u"
+  ) {
+    console.log("this has two consonants");
+    firstConsonants = wordArray.splice(0, 2);
+    firstConsonants = firstConsonants.join("");
+    word = word.slice(2);
+    word = word + firstConsonants + "ay";
+    document.getElementById("display-element").innerHTML = word;
+    // return word;
+  } else if (
+    word[0] != "a" &&
+    word[0] != "e" &&
+    word[0] != "i" &&
+    word[0] != "o" &&
+    word[0] != "u"
+  ) {
+    firstConsonants = wordArray.shift();
+    word = word.slice(1);
+    word = word + firstConsonants + "ay";
+    document.getElementById("display-element").innerHTML = word;
+    // return word;
+  } else if (
+    word[0] == "a" ||
+    word[0] == "e" ||
+    word[0] == "i" ||
+    word[0] == "o" ||
+    word[0] == "u"
+  ) {
+    word = word + "yay";
+    document.getElementById("display-element").innerHTML = word;
+    // return word;
+  }
+};
 
 // 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) );
-    getPrompt();
-  });
-}
+// const getPrompt = () => {
+//   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()', () => {
-    it('should translate a simple word', () => {
-      assert.equal(pigLatin('car'), 'arcay');
-      assert.equal(pigLatin('dog'), 'ogday');
+if (typeof describe === "function") {
+  describe("#pigLatin()", () => {
+    it("should translate a simple word", () => {
+      assert.equal(pigLatin("car"), "arcay");
+      assert.equal(pigLatin("dog"), "ogday");
     });
-    it('should translate a complex word', () => {
-      assert.equal(pigLatin('create'), 'eatecray');
-      assert.equal(pigLatin('valley'), 'alleyvay');
+    it("should translate a complex word", () => {
+      assert.equal(pigLatin("create"), "eatecray");
+      assert.equal(pigLatin("valley"), "alleyvay");
     });
     it('should attach "yay" if word begins with vowel', () => {
-      assert.equal(pigLatin('egg'), 'eggyay');
-      assert.equal(pigLatin('emission'), 'emissionyay');
+      assert.equal(pigLatin("egg"), "eggyay");
+      assert.equal(pigLatin("emission"), "emissionyay");
     });
-    it('should lowercase and trim word before translation', () => {
-      assert.equal(pigLatin('HeLlO '), 'ellohay');
-      assert.equal(pigLatin(' RoCkEt'), 'ocketray');
+    it("should lowercase and trim word before translation", () => {
+      assert.equal(pigLatin("HeLlO "), "ellohay");
+      assert.equal(pigLatin(" RoCkEt"), "ocketray");
     });
   });
 } else {
-
-  getPrompt();
-
+  // getPrompt();
 }
 
-
-
-
-
-
 // **********
 //   HINTS
 // **********

diff --git a/reset.css b/reset.css
@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,42 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+body {
+  min-width: 80%;
+  min-height: 80%;
+  background-color: gray;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#pigLatinContainer {
+  width: 50%;
+  height: 70%;
+  background-color: pink;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+#pigLatinContainer > h1,
+p {
+  font-size: 50px;
+  margin: 20px 0 20px 0;
+}
+
+#display-element {
+  font-size: 40px;
+}
+
+#user-input {
+  margin: 20px 0 20px 0;
+}