diff --git a/css/style.css b/css/style.css index 3ffc03e..4fc5c0f 100644 --- a/css/style.css +++ b/css/style.css @@ -26,15 +26,9 @@ h2 { margin: 0 auto 10px auto; } - - -.hidden { - display: none; -} - .response { margin: 0 0 15px 0; - display:none; + display:block; color: #009900; } @@ -42,7 +36,11 @@ h2 { font: italic bold 1em; color: #990000; margin: 0 0 15px 0; - display:none; + display:block; + +} +.hidden { + display: none; } diff --git a/index.html b/index.html index 18f8b32..1441f34 100644 --- a/index.html +++ b/index.html @@ -63,8 +63,8 @@

Rap Name Generator

-
-
Oh snap! You forgot to enter a name!
+ +
diff --git a/js/script.js b/js/script.js index 2f2cff7..a4ea2ac 100644 --- a/js/script.js +++ b/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'); + }; + }); -}); +}); \ No newline at end of file