Answer

README.md

@@ -1,22 +1,29 @@
-# 🎤 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 Clan Name Generator
+
+![Wu-Tang Generator Gif](assets/img/wutanggenerator.gif)
+
+Welcome to my Wu-Tang Clan Name Generator project. This fun and creative application presents users with five survey questions and, based on their answers, randomly generates a Wu-Tang Clan-inspired name. The generated names capture the essence of Wu-Tang Clan's unique and iconic style.
+
+[Website](https://roswutanggenerator.netlify.app/)
+
+## How It's Made
+
+Technologies Used: HTML, CSS, JavaScript
+
+In this project, I designed a Wu-Tang Clan Name Generator using HTML, CSS, and JavaScript. The application starts by presenting users with a series of five survey questions. Each input in the survey had a predefined value associated with it, and based on the total value of the selected answers, the JavaScript logic would generate a Wu-Tang Clan-inspired name. I implemented this conditional logic using a `switch case` statement.
+
+The `switch case` statement allowed the application to evaluate the user's responses, calculate the total value, and then select a name that captures the essence of Wu-Tang Clan's unique naming style. The name generated may not be an exact match to the user's answers, but it is designed to have a Wu-Tang Clan vibe.
+
+The project showcases my creativity and ability to engage users in an interactive and entertaining way. It's a fun exercise in using web development to create a unique experience for users.
+
+## Optimizations (optional)
+
+While the primary focus of this project is creativity and user engagement, I also focused on making the application user-friendly and efficient. I optimized the code to ensure a smooth user experience and quick response times. This optimization made the name generation process seamless and enjoyable for users.
+
+## Lessons Learned
+
+Building the Wu-Tang Clan Name Generator was an opportunity to explore creativity within web development. It highlighted the importance of user engagement and enjoyment in applications. The project allowed me to create something fun and entertaining, showing that even as a developer, there's always room for creativity and unique projects.
+
+One notable lesson from this project was that it was my first time using a `switch case` statement in a practical application. Learning to use this control structure to handle multiple conditions and generate different results was a valuable experience. It demonstrated the versatility and power of JavaScript for implementing conditional logic in an engaging way.
+
+No matter the experience level, being an engineer means continuously learning and growing. This project was a reminder of the excitement of building something unique and engaging for users, and I look forward to more creative projects in the future.

assets/css/style.css

@@ -0,0 +1,72 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 62.5%;
+}
+
+@font-face {
+    font-family: 'Bamboo';
+    src: url('Bamboo Regular.ttf');
+}
+
+
+body {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100vh;
+    flex-direction: column;
+    background-image: url(../img/wutang2.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    font-family: 'Bamboo', Arial, Helvetica, sans-serif;
+    color: white;
+    font-weight: 700;
+}
+
+h1 {
+    font-size: 4rem;
+    margin: 1%;
+}
+
+#instructions{
+    font-size: 2rem;
+    margin: 1%;
+}
+section {
+    text-align: center;
+    background-color: rgba(76, 120, 159, 0.7);
+    border-radius: 15px;
+    width: 30%;
+}
+
+section p {
+    font-size: 2.4rem;
+}
+
+section input {
+    margin-left: 5%;
+}
+
+section label {
+    font-size: 2.2rem;
+}
+
+#wutang-name {
+    font-size: 2.7rem;
+    background-color: rgba(76, 120, 159, 0.7);
+}
+
+button {
+    margin-top: 20px;
+    font-size: 1.9rem;
+    margin-left: 3%;
+    font-family: 'Bamboo', Arial, Helvetica, sans-serif;
+    background-color: rgba(76, 120, 159, 0.7);
+    color: white;
+    border-radius: 15px;
+    margin: 1%;
+
+}

assets/js/main.js

@@ -0,0 +1,55 @@
+//First create an event listener for the generator button and the reset button
+
+document.querySelector('#generate').addEventListener('click', wuTangName)
+document.querySelector('#reset').addEventListener('click', reset)
+
+//Then create the function to generate the wu tang name based off the value of the user's choices
+
+function wuTangName(){
+//pull the value from each question
+const anime = Number(document.querySelector('input[name = anime]:checked').value)
+const soda = Number(document.querySelector('input[name = soda]:checked').value)
+const tea = Number(document.querySelector('input[name = tea]:checked').value)
+const phone = Number(document.querySelector('input[name = phone]:checked').value)
+const book = Number(document.querySelector('input[name = book]:checked').value)
+
+
+
+
+//add each value together //average the total of the values
+let average = (anime + soda + tea + phone + book)/5
+console.log(average)
+
+// for each possible average return a wutang clan name 
+
+switch(average) {
+    case 5:
+        document.querySelector('#wutang-name').innerText = 'From this day forth you will be known as: Masta Killah Shaolin'
+        break
+    case 5.2:
+        document.querySelector('#wutang-name').innerText = 'From this day forth you will be known as: Brickface Karate Thug'
+        break
+    case 5.4:
+        document.querySelector('#wutang-name').innerText = 'From this day forth you will be known as: Killer Bee Warcloud'
+        break
+    case 5.6:
+        document.querySelector('#wutang-name').innerText = 'From this day forth you will be known as: Wombo Combo Witch Doctor'
+        break
+    case 5.8:
+        document.querySelector('#wutang-name').innerText = 'From this day forth you will be known as: Spicy Avocado Poon Tang Magnet'
+        break
+    case 6:
+        document.querySelector('#wutang-name').innerText = 'From this day forth you will be known as: Ghostface Popcorn Playa'
+        break   
+}
+
+}
+
+
+
+
+//then create the function to reset the values 
+//this should clear all the input values
+//create an nodelist of all the input elements
+//create an array our of the nodelist
+//loop through each element of the array and clear the value

index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+  	<meta charset="utf-8">
+  	<meta name="description" content="Your description goes here">
+  	<meta name="keywords" content="one, two, three">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>Wu-Tang Clan Generator</title>
+
+		<!-- external CSS link -->
+		<link rel="stylesheet" href="assets/css/style.css">
+	</head>
+	<body>
+        <h1>Wu-Tang Name Generator</h1>
+        <p id="instructions">Answer each question to receive your Wu-Tang name</p>
+        <section>
+            <form>
+                <p>Anime or Manga?</p>
+                <input type="radio" id = "anime" name = "anime" value = "1">
+                <label for = "">Anime</label>
+                <input type="radio" id = "manga" name = "anime" value = "2">
+                <label for = "">Manga</label>
+                <p>Dr. Pepper or Mr. Pibb?</p>
+                <input type="radio" id = "pepper" name = "soda" value = "3">
+                <label for = "">Dr. Pepper</label>
+                <input type="radio" id = "pibb" name = "soda" value = "4">
+                <label for = "">Mr. Pibb</label>
+                <p>Chai or Matcha?</p>
+                <input type="radio" id = "chai" name = "tea" value = "5">
+                <label for = "">Chai</label>
+                <input type="radio" id = "matcha" name = "tea" value = "6">
+                <label for = "">Matcha</label>
+                <p>Blue Message Bubble or Green Message Bubble?</p>
+                <input type="radio" id = "blue" name = "phone" value = "7">
+                <label for = "">Blue Bubble</label>
+                <input type="radio" id = "green" name = "phone" value = "8">
+                <label for = "">Green Bubble</label>
+                <p>Paperback Books or Hardback Books?</p>
+                <input type="radio" id = "paper" name = "book" value = "9">
+                <label for = "">Paperback</label>
+                <input type="radio" id = "hard" name = "book" value = "10">
+                <label for = "">Hardback</label>
+            </form>
+            <button id="generate">Generate Name</button>
+            <button id = "reset">Reset</button>
+        </section>
+
+        <p id="wutang-name"></p>
+
+		<script type="text/javascript" src="assets/js/main.js"></script>
+	</body>
+</html>