Resilient-Labs · Sxnny-s · Oct 29, 2024 · Nov 25, 2024 · Nov 25, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>wu-Tang survey</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="surveyContainer">
+        <h1>Wu-Tang name generator</h1>
+
+        <div class="question">
+            <div>
+            <p>1. Which color do you like the most?</p>
+            <label for="">
+                <input type="radio" name="color" value="red"> Red
+            </label>
+
+            <label for="">
+                <input type="radio" name="color" value="blue"> Blue
+            </label>
+
+            <label for="">
+                <input type="radio" name="color" value="pink"> Pink
+            </label>
+
+            <label for="">
+                <input type="radio" name="color" value="green"> Green
+            </label>
+        </div>
+
+        <div class="question">
+            <div>
+            <p>2. Which food do you like the most?</p>
+            <label for="">
+                <input type="radio" name="food" value="mexican"> Mexican food
+            </label>
+
+            <label for="">
+                <input type="radio" name="food" value="ethiopian"> Ethiopian food
+            </label>
+
+            <label for="">
+                <input type="radio" name="food" value="italian"> Italian food
+            </label>
+
+            <label for="">
+                <input type="radio" name="food" value="greek"> Greek food
+            </label>
+        </div>
+
+        <div class="question">
+            <div>
+            <p>3. Which season do you like the most?</p>
+            <label for="">
+                <input type="radio" name="season" value="summer"> Summer
+            </label>
+
+            <label for="">
+                <input type="radio" name="season" value="winter"> Winter
+            </label>
+
+            <label for="">
+                <input type="radio" name="season" value="autumn"> Autumn
+            </label>
+
+            <label for="">
+                <input type="radio" name="season" value="spring"> Spring
+            </label>
+        </div>
+
+        <div class="question">
+            <div>
+            <p>4. Which animal do you like the most?</p>
+            <label for="">
+                <input type="radio" name="animal" value="tiger"> Tiger
+            </label>
+
+            <label for="">
+                <input type="radio" name="animal" value="crow"> Crow
+            </label>
+
+            <label for="">
+                <input type="radio" name="animal" value="elephant"> Elephant
+            </label>
+
+            <label for="">
+                <input type="radio" name="animal" value="dog"> Dog
+            </label>
+        </div>
+
+
+        <div class="question">
+            <p>5. Which historical era do you like the most?</p>
+            <label>
+                <input type="radio" name="era" value="ancient"> Ancient
+            </label>
+            <label>
+                <input type="radio" name="era" value="medieval"> Medieval
+            </label>
+            <label>
+                <input type="radio" name="era" value="renaissance"> Renaissance
+            </label>
+            <label>
+                <input type="radio" name="era" value="modern"> Modern
+            </label>
+        </div>
+
+
+
+
+    </div>
+
+    <div class="Wu-Tang">
+        <button>Get result</button>
+        <span class="wu-TangName"></span>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git 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
@@ -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)
+
+}
diff --git a/styles.css 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;  
+}