Answer

CSS/styles.css

@@ -0,0 +1,39 @@
+html {
+    font-size: 62.5%;
+    font-family: sans-serif;
+    background: url('../IMAGES/TR_NationalAsset_WuTangNas_SG_1200x628.jpg');
+    background-position: center;
+    background-size: cover;
+}
+
+#name {
+    display: block;
+}
+
+body {
+    font-size: 1.5rem;
+    background: yellow;
+    margin: 3rem 40rem;
+    border-radius: 10%;
+    opacity: 80%;
+}
+
+h1, 
+h3 {
+    font-size: 3.5rem;
+}
+
+header,
+.questions,
+.buttons {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
+
+button {
+    margin: 1rem;
+    padding: 1rem 3rem;
+}

JS/script.js

@@ -0,0 +1,38 @@
+//Create an event listener to get name
+document.querySelector('#name').addEventListener('click', generateName)
+//Create a function that takes all checked user inputs to generate a name
+    //to grab input select input element put name in brackets use :checked ('is checked')
+    //wrap in num method to ensure inputs are ints
+function generateName() {
+    let q1 = Number(document.querySelector('input[name="q1"]:checked').value)
+    let q2 = Number(document.querySelector('input[name="q2"]:checked').value)
+    let q3 = Number(document.querySelector('input[name="q3"]:checked').value)
+    let q4 = Number(document.querySelector('input[name="q4"]:checked').value)
+    let q5 = Number(document.querySelector('input[name="q5"]:checked').value)
+    console.log(q1)
+    console.log(q2)
+    console.log(q3)
+    console.log(q4)
+    console.log(q5)
+    //create 2 arrays for first name and last name with 10 options
+    let fName = ['Samurai', 'Triumphant', 'Supreme', 'Diabolical', 'Ol', 'DJ', 'Forever', 'Fatal', 'Smooth', 'Sleek']
+    let lName = ['World', 'Cosmo', 'Pine', 'Deliciosa', 'Pepper', 'Moss', 'Driver', 'Iris', 'Ghost', 'Clover']
+    // Generate random values from variables
+        //each user input will be a diff int, you add and get avg
+        //with that avg, you will get a random index from within the array
+    // let random = Math.round((q1+q2+q3+q4+q5) / 25) -5
+    let random = Math.floor((q3+q4+q5)/(q1 + q2))
+    //Random variable will generate a random fn and ln based on user input
+    let firstRandom = fName[random]
+    let lastRandom = lName[random]
+    document.querySelector('#result').innerText = `${firstRandom} ${lastRandom}`
+    console.log(random)
+} 
+
+//To refresh 
+document.querySelector('#restart').addEventListener('click', refresh)
+function refresh() {
+    location.href = location.href
+}
+
+// '', '', '', '', '', '', 

README.md

@@ -1,22 +1,15 @@
-# 🎤 Week08 Bootcamp2019a Project: Wu-Tang Name Generator
+# 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).
+<img width="1305" alt="Screenshot 2023-10-30 at 9 31 52 PM" src="https://github.com/codedbycass/Wu-Tang-Name-Generator/assets/122684139/7ad2b3ac-1526-4831-b272-903577b064ec">
 
-### How to submit your code for review:
+## How it's made
+HTML, CSS, JS
 
-- 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!
+HTML: I created a questionnaire where users can select their choice via radio buttons. I gave each question the same name attribute to ensure users can only select one of the options. I gave each radio input a value with an integer which will later be called in a JavaScript function. Lastly, there are two buttons that have event listener functions to get the name and restart.
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+CSS: I used basic flex box to ensure simple alignment of my elements.
+
+JS: The main function of this project is to generate a random name based on the results of the user's survey questions. I created a variable for each function to grab the value (from HTML) and wrapped it in a number method to ensure an integer is returned. Using Math.round() I added all the values gathered from the variables. Then I created a variable to access the fName (first name) and lName (last name) arrays. Finally, the result will print the the DOM using template literals. 
+
+## Lessons Learned
+I learned how to work with different HTML input attributes and grab them using the DOM. In order to get the same name every time, based on user input, I used the Math object to grab an index in an array, instead of predetermining name combinations based on the various user inputs which would've taken longer.

index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="CSS/styles.css">
+    <title>Wu-Tang Name Generator</title>
+</head>
+
+<body>
+    <header>
+        <h1>Wu-Tang Name Generator</h1>
+        <h3 id="result"></h3>
+    </header>
+    <section class="questions">
+        <div>
+            <h2>Traveler or vacationer?</h2>
+            <input type="radio" id="traveler" name="q1" value="5">
+            <label for="traveler">Traveler</label>
+            <input type="radio" id="vacationer" name="q1" value="10">
+            <label for="vacationer">Vacationer</label>
+            <h2>Cabin or high-rise?</h2>
+            <input type="radio" id="Cabin" name="q2" value="15">
+            <label for="Cabin">Cabin</label>
+            <input type="radio" id="High-rise" name="q2" value="20">
+            <label for="High-rise">High-rise</label>
+            <h2>Sunrise or sunset?</h2>
+            <input type="radio" id="Sunrise" name="q3" value="25">
+            <label for="Sunrise">Sunrise</label>
+            <input type="radio" id="Sunset" name="q3" value="30">
+            <label for="Sunset">Sunset</label>
+            <h2>Mild or spicy?</h2>
+            <input type="radio" id="Mild" name="q4" value="35">
+            <label for="Mild">Mild</label>
+            <input type="radio" id="Spicy" name="q4" value="40">
+            <label for="Spicy">Spicy</label>
+            <h2>Read or write?</h2>
+            <input type="radio" id="Read" name="q5" value="45">
+            <label for="Read">Read</label>
+            <input type="radio" id="Write" name="q5" value="50">
+            <label for="Write">Write</label>
+        </div>
+    </section>
+    <section class="buttons">
+        <div>
+            <button id="name">Get Name</button>
+            <button id="restart">Restart</button>
+        </div>
+    </section>
+    <script src="JS/script.js"></script>
+</body>
+
+</html>

practice.html

@@ -0,0 +1,42 @@
+<div class="dropdown">
+    <button class="dropbtn">Traveler or vacationer?</button>
+        <div class="dropdown-content">
+            <a href="">Traveler</a>
+            <a href="">Vacationer</a>
+        </div>
+</div>
+
+.dropbtn {
+    background-color: #04AA6D;
+    color: white;
+    padding: 16px;
+    font-size: 16px;
+    border: none;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {background-color: #ddd;}
+
+.dropdown:hover .dropdown-content {display: block;}
+
+.dropdown:hover .dropbtn {background-color: #3e8e41;}