diff --git a/ index.html b/ index.html new file mode 100644 index 0000000..f773ddb --- /dev/null +++ b/ index.html @@ -0,0 +1,122 @@ + + + + + + wu-Tang survey + + + +
+

Wu-Tang name generator

+ +
+
+

1. Which color do you like the most?

+ + + + + + + +
+ +
+
+

2. Which food do you like the most?

+ + + + + + + +
+ +
+
+

3. Which season do you like the most?

+ + + + + + + +
+ +
+
+

4. Which animal do you like the most?

+ + + + + + + +
+ + +
+

5. Which historical era do you like the most?

+ + + + +
+ + + + +
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/README.md b/README.md index 70ccbdd..7da4465 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,41 @@ -# 🎤 Week08 Bootcamp2019a Project: Wu-Tang Name Generator - -### Goal: Create a Wu-Tang Clan name generator. Present the user with 5 survey questions and based on those answers randomly generate their name. The name doesn't have to be exact names, but Wu-Tang sounding-ish names. Ex: Childish Gambino (who actually got his name from a Wu-Tang name generator). - -### How to submit your code for review: - -- Fork and clone this repo -- Create a new branch called answer -- Checkout answer branch -- Push to your fork -- Issue a pull request -- Your pull request description should contain the following: - - (1 to 5 no 3) I completed the challenge - - (1 to 5 no 3) I feel good about my code - - Anything specific on which you want feedback! - -Example: -``` -I completed the challenge: 5 -I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` +# Wu-Tang Name Generator + +## Goal + +This project is a fun web-based Wu-Tang name generator. It asks the user 5 survey questions and, based on their answers, generates a Wu-Tang Clan-inspired name. The names are unique and playful, drawing from the user’s preferences in color, food, season, animal, and historical era. + +## Features + +- **Survey Questions:** 5 questions asking the user about their preferences (color, food, season, animal, and historical era). +- **Random Name Generation:** Based on the user’s responses, a fun and unique Wu-Tang Clan-inspired name is generated. +- **Interactive Design:** Simple and interactive UI that displays the generated name upon completing the survey. + +## How it Works + +1. **Survey Questions:** + The user will answer 5 multiple-choice questions: + - Favorite color + - Favorite food + - Favorite season + - Favorite animal + - Favorite historical era + +2. **Name Generation:** + Based on the user's answers, the app will create a name by combining their preferences in a fun, Wu-Tang Clan-inspired way. + +3. **Result Display:** + After the user submits their answers, a Wu-Tang Clan-inspired name will be displayed on the screen. + +## How to Run the Application + +### Prerequisites + +Make sure you have the following: + +- **A modern web browser** (Chrome, Firefox, Safari, etc.) + +### Setup + +1. Clone or download the repository to your local machine. + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d0c31c2 --- /dev/null +++ b/script.js @@ -0,0 +1,73 @@ +//button to collect answers +const button = document.getElementsByTagName('button')[0].addEventListener('click', wuTangGen) +const wuTangName = document.getElementsByClassName('wu-TangName')[0] + +const wordAssociations = { + color: { + red: ['Crimson', 'Scarlet', 'Ruby'], + blue: ['Azure', 'Cobalt', 'Navy'], + pink: ['Rose', 'Blush', 'Fuchsia'], + green: ['Emerald', 'Jade', 'Olive'] + }, + food: { + mexican: ['Titan', 'Ninja', 'Baron'], + ethiopian: ['Injera', 'Sage', 'kejelcha'], + italian: ['Prince', 'Paladin', 'Rogue'], + greek: ['Gladiator', 'Slayer', 'Oracle'] + }, + season: { + summer: ['Samurai', 'Hero', 'Solar'], + winter: ['Frostbite', 'Chill', 'Snowfall'], + autumn: ['Hunter', 'Crisp', 'Leaf'], + spring: ['Bloom', 'Floral', 'Spirit'] + }, + animal: { + tiger: ['Tamer', 'Feline', 'bold'], + crow: ['Clever', 'Shadow', 'Blackbird'], + elephant: ['Wise', 'Mighty', 'Titan'], + dog: ['Defender', 'Commander', 'king'] + }, + era: { + ancient: ['Sphinx', 'Oracle', 'Pharaoh'], + medieval: ['Knight', 'Dame', 'Bard'], + renaissance: ['Visionary', 'Savant', 'Prodigy'], + modern: ['Maverick', 'Innovator', 'Guru'] + } +}; + + + +function wuTangGen(){ + const color = document.querySelector('input[name="color"]:checked').value + const food = document.querySelector('input[name="food"]:checked').value + const season = document.querySelector('input[name="season"]:checked').value + const animal = document.querySelector('input[name="animal"]:checked').value + const era = document.querySelector('input[name="era"]:checked').value + console.log(color,food,season,animal,era) + + + function getRandomWord(category, choice){ + const words = wordAssociations[category][choice] + const rng = Math.floor(Math.random() * words.length) + return words[rng] + } + + let colorVal = getRandomWord('color',color) + let foodVal = getRandomWord('food', food) + let seasonVal = getRandomWord('season', season) + let animalVal = getRandomWord('animal', animal) + let eraVal = getRandomWord('era', era) + + let answers = [colorVal,foodVal,seasonVal,animalVal,eraVal] + + let x = Math.floor(Math.random() * answers.length) + answers.splice(x,1) + let y = Math.floor(Math.random() * answers.length) + + + const result = `Your Wu-Tang name is a ${answers[x]} ${answers[y]}` + wuTangName.innerText = result + + console.log(result) + +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d947b0e --- /dev/null +++ b/styles.css @@ -0,0 +1,26 @@ +* { + box-sizing: content-box; + background-color:antiquewhite; + +} + +button { + border-radius: 10px; + padding: 7px; + background-color: aliceblue; + + +} + +.surveyContainer { + margin: 0 auto; + width: 55%; +} + +.question { + border-top: 1px solid gainsboro; +} + +.Wu-Tang { + padding: 5px; +} \ No newline at end of file