From ef48ebcb6719d46725c635abff03188c54767f7c Mon Sep 17 00:00:00 2001 From: Grant Payne <47309289+grantpayne@users.noreply.github.com> Date: Sat, 23 Mar 2019 00:45:23 -0400 Subject: [PATCH 1/4] added ids to response message elements --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 18f8b32..7107206 100644 --- a/index.html +++ b/index.html @@ -63,8 +63,8 @@

Rap Name Generator

-
-
Oh snap! You forgot to enter a name!
+
+
Oh snap! You forgot to enter a name!
From f903787957b9442b916c64413ca936fbc60fd9ec Mon Sep 17 00:00:00 2001 From: Grant Payne <47309289+grantpayne@users.noreply.github.com> Date: Sat, 23 Mar 2019 00:46:35 -0400 Subject: [PATCH 2/4] added .display css class to display response message elements --- css/style.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 3ffc03e..74b9ed5 100644 --- a/css/style.css +++ b/css/style.css @@ -26,7 +26,9 @@ h2 { margin: 0 auto 10px auto; } - +.display { + display: block; +} .hidden { display: none; From 81a07360306586147e29e8e84f40c18a9f5b4a46 Mon Sep 17 00:00:00 2001 From: Grant Payne <47309289+grantpayne@users.noreply.github.com> Date: Sat, 23 Mar 2019 12:05:59 -0400 Subject: [PATCH 3/4] fixed CSS classes to display messages properly. need to adjust rap name array access indexing to not result in undefined --- css/style.css | 11 +++++----- index.html | 4 ++-- js/script.js | 60 +++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 62 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index 74b9ed5..c3a8ade 100644 --- a/css/style.css +++ b/css/style.css @@ -30,13 +30,10 @@ h2 { display: block; } -.hidden { - display: none; -} .response { margin: 0 0 15px 0; - display:none; + display:block; color: #009900; } @@ -44,7 +41,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 7107206..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..4a9ba74 100644 --- a/js/script.js +++ b/js/script.js @@ -13,20 +13,68 @@ **/ 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(); + + /* 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 -//Add your codez here + -Index in both arrays to determine which name to apply + */ + let howToManipulateName = Math.floor(Math.random() * 2); + let applyFirstName = Math.random() >= 0.5; + let applyLastName = Math.random() >= 0.5; + let lastNameRandomIndex = this.last_names[Math.floor(Math.random() * this.last_names.length)]; + let firstNameRandomIndex = this.first_names[Math.floor(Math.random() * this.first_names.length)]; + + 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]; + }; + + return rapName; +} -$(document).ready(function() { +$(document).ready(function () { + console.log('ready'); 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', () => { + console.log('clicked button'); + 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 From 5e05f3292316df2667ea865948b5c225b82bd4cb Mon Sep 17 00:00:00 2001 From: Grant Payne <47309289+grantpayne@users.noreply.github.com> Date: Sat, 23 Mar 2019 12:17:10 -0400 Subject: [PATCH 4/4] solution complete --- css/style.css | 5 ----- js/script.js | 17 +++++++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index c3a8ade..4fc5c0f 100644 --- a/css/style.css +++ b/css/style.css @@ -26,11 +26,6 @@ h2 { margin: 0 auto 10px auto; } -.display { - display: block; -} - - .response { margin: 0 0 15px 0; display:block; diff --git a/js/script.js b/js/script.js index 4a9ba74..a4ea2ac 100644 --- a/js/script.js +++ b/js/script.js @@ -31,14 +31,15 @@ Generator.prototype.outputRapName = function(inputName) { -Index in both arrays to determine which name to apply */ - let howToManipulateName = Math.floor(Math.random() * 2); + let howToManipulateName = Math.floor(Math.random() * 3); let applyFirstName = Math.random() >= 0.5; let applyLastName = Math.random() >= 0.5; - let lastNameRandomIndex = this.last_names[Math.floor(Math.random() * this.last_names.length)]; - let firstNameRandomIndex = this.first_names[Math.floor(Math.random() * this.first_names.length)]; + 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('.'); + rapName = rapName.toUpperCase().split('').join('.') + '.'; } else if (howToManipulateName === 2) { rapName = rapName[0].toUpperCase(); @@ -51,13 +52,18 @@ Generator.prototype.outputRapName = function(inputName) { 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 () { - console.log('ready'); var engine = new Generator; const playButton = document.getElementById('enter'); const inputForm = document.getElementById('user-input'); @@ -65,7 +71,6 @@ $(document).ready(function () { const rapNameDisplay = document.getElementById('rap-name-display'); playButton.addEventListener('click', () => { - console.log('clicked button'); if (inputForm.value === '') { noNameMessage.classList.remove('hidden') rapNameDisplay.classList.add('hidden');