Grant Payne Solution

css/style.css

@@ -26,23 +26,21 @@ h2 {
 	margin: 0 auto 10px auto;
 }
 
-
-
-.hidden {
-	display: none;
-}
-
 .response {
 	margin: 0 0 15px 0;
-	display:none;
+	display:block;
 	color: #009900;
 }
 
 .error {
 	font: italic bold 1em;
 	color: #990000;
 	margin: 0 0 15px 0;
-	display:none;
+	display:block;
+
+}
 
+.hidden {
+	display: none;
 }
 

index.html

@@ -63,8 +63,8 @@ <h1>Rap Name Generator</h1>
 
 		<!--response -->
 		<div class='messages'>
-			<div class="alert alert-success response"></div>
-			<div class="alert alert-danger error"><strong>Oh snap!</strong> You forgot to enter a name!</div>	
+			<div id="rap-name-display" class="alert alert-success response hidden"></div>
+			<div id="no-name-alert" class="alert alert-danger error hidden"><strong>Oh snap!</strong> You forgot to enter a name!</div>	
 		</div>
 
 

js/script.js

@@ -13,20 +13,73 @@
  **/
 
 function Generator() {
-
     /* Name Arrays: Customize names to change possible output */
     this.last_names = ['the Chef', 'Digital', 'Wise', 'Knight', 'Wrecka', 'the Genius', 'the Zoo Keeper', 'the Monk', 'the Scientist', 'the Disciple', 'the Darkman', 'Pellegrino', 'the Ill Figure', 'Rocks The World', 'the Baptist',];
     this.first_names = ['Inspectah', 'Masta', 'Poppa', 'Five Foot', 'Ghostface', 'Old Dirty'];
-
 }
 
+Generator.prototype.outputRapName = function(inputName) {
+    let rapName = inputName.toString();
 
-//Add your codez here
+    /*  Generate random:
+
+        -Value to determine if and how to manipulate name.
+        ex.) 0 => do nothing, 1 => create acronym, 2 => use first letter only
+
+        -Booleans to determine which names to apply
 
+        -Index in both arrays to determine which name to apply
 
-$(document).ready(function() {
+    */
+    let howToManipulateName = Math.floor(Math.random() * 3);
+    let applyFirstName = Math.random() >= 0.5;
+    let applyLastName = Math.random() >= 0.5;
+    let lastNameRandomIndex = Math.floor(Math.random() * this.last_names.length);
+    let firstNameRandomIndex = Math.floor(Math.random() * this.first_names.length);
+    console.log(firstNameRandomIndex);
 
+    if (howToManipulateName === 1) {
+        rapName = rapName.toUpperCase().split('').join('.') + '.';
+    }
+    else if (howToManipulateName === 2) {
+        rapName = rapName[0].toUpperCase();
+    };
+
+    if (applyFirstName) {
+        rapName = this.first_names[firstNameRandomIndex] + ' ' + rapName;
+    };
+
+    if (applyLastName) {
+        rapName = rapName + ' ' + this.last_names[lastNameRandomIndex];
+    };
+
+    //We want to apply at least one of the rap names.  Apply both names if random returns double false.
+    if (!applyFirstName && !applyLastName) {
+        rapName = this.first_names[firstNameRandomIndex] + ' ' + rapName;
+        rapName = rapName + ' ' + this.last_names[lastNameRandomIndex];
+    }
+
+    return rapName;
+}
+
+
+$(document).ready(function () {
     var engine = new Generator;
-    //Add your codez here
+    const playButton = document.getElementById('enter');
+    const inputForm = document.getElementById('user-input');
+    const noNameMessage = document.getElementById('no-name-alert');
+    const rapNameDisplay = document.getElementById('rap-name-display');
+
+    playButton.addEventListener('click', () => {
+        if (inputForm.value === '') {
+            noNameMessage.classList.remove('hidden')
+            rapNameDisplay.classList.add('hidden');
+        }
+        else {
+            rapNameDisplay.innerHTML = engine.outputRapName(inputForm.value);
+            noNameMessage.classList.add('hidden');
+            rapNameDisplay.classList.remove('hidden');
+        };
+    });
 
-});
+});