random.js

import {makeElement} from "./utils.js"
 let randomButton = document.getElementById("randombtn")
 randomButton.onclick= createCharacter


function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max-min) + min);
}

function getRandomValueFromArray(arr) {
  return arr[Math.floor(Math.random() * (arr.length - 1))];
}

var hairColor = [
  "Blue", "Brown", "White", "Green", "Red", "Purple", "Black", "Orange", "Gray", "Pink", "Caramel", "Light-blond", "Dirty-blond", "Auburn", "Black", "Blond", "Blond", "Brown", "Brown", "Black", "Blond"
]

var eyeColor = [
  "Blue", "Brown", "White", "Green", "Red", "Purple", "Hazel", "Black", "Orange","Yellow", "Gray", "Pink","Blue", "Brown", "Hazel", "Brown", "Brown", "Brown", "Brown", "Blue", "Hazel"
]

var superName= [
  "Super", "Speed", "The", "Professor", "Doctor", "Agent", "Black", "Red", "Green", "Blue", "White", "Lord", "Thunder", "Captain", "Winter", "Scarlet", "Blood", "Cold", "Killer", "Mr", "Bat", "Ant", "Incredible", "War", "Rocket", "Iron", "Spider", "Quick"
]

var superName2= [
  "Knight", "Soldier", "Light", "Night", "Chicken", "Storm", "Soverign", "Shadow", "Seer", "Devil", "Frost", "Death", "Warrior", "Man", "Spirit", "Venom", "Guardian", "Immortal", "Doom", "Sinister", "Hulk", "Widow", "Flash", "Zoom", "X", "Beast", "America", "Witch", "Strange", "Falcon", "Machine", "Marvel", "Arrow", "Silver"
]

var birthplace = [
  "Los Angeles, California", "Brooklyn, New York", "Central City, Missouri", "Boston, Massachusetts", "Gotham City", "Alberta, Canada", "Dayton, Ohio", "Huntsville, Alabama", "Long Island, New York", "Berlin, Germany", "Vancouver, Canada", "Osaka, Japan", "Volograd, Russia", "Bangkok, Thailand", "Canberra, Australia", "Shanghai, China", "Delhi, India", "Kathmandu, Nepal", "Maui, Hawaii", "Mexico City, Mexico", "Paris, France", "Vienna, Austria", "Istanbul, Turkey", "Manchester, England"
]

var gender = [
  "Male",
  "Female",
  "Other"
]

var race= [
  "Human", "Robot", "Alien", "Mutant", "Human", "Human", "Human", "God/Eternal", "Human", "Human", "Radiation", "Human", "Human", "Human", "Human", "Human", "Human", "Human"
]

var type= [
  "Villian", "Hero", "Hero", "Villian"
]

var work= [
  "Doctor", "Waiter", "Librarian", "Scientist", "High School Student", "College Student", "Microbiologist", "Surgeon", "Fisherman", "Professor", "Cook", "Biochemist", "Mad scientist", "Computer programmer", "CEO", "Banker", "Financial advisor", "Prosecutor", "None", "None", "Actor/Actress", "Military officer", "Nurse", "Biologist", "Radiologist", "Fast food worker", "Forensic scientist", "Pilot", "Vet", "Civil engineer"
]


class RandomCharacter{
  constructor(){
    this.superName= getRandomValueFromArray(superName) + " " + getRandomValueFromArray(superName2)
    this.type= getRandomValueFromArray(type)
    this.gender= getRandomValueFromArray(gender)
    this.birthplace= getRandomValueFromArray(birthplace)
    this.race= getRandomValueFromArray(race)
    this.work= getRandomValueFromArray(work)
    this.hairColor= getRandomValueFromArray(hairColor)
    this.eyeColor= getRandomValueFromArray(eyeColor)
    this.looks= getRandomInt(1, 100)
    this.intelligence= getRandomInt(60, 100)
    this.combat= getRandomInt(50, 100)
    this.strength= getRandomInt(50, 100)
    this.power= getRandomInt(50, 100)
    this.durability= getRandomInt(50, 100)
    this.speed=getRandomInt(50, 100)
  }
}


console.log(RandomCharacter)
// Display values on screen

function createCharacter(){
  let randomCharacter = new RandomCharacter()
  
  let superheroContainer = makeElement("div", "random-library")
  let randomInfo = makeElement("div", "random-info")

  let basics = makeElement("div", "basics")
  let randomImage = makeElement("img")
  randomImage.src= "/unknown.png"
  let superName = makeElement("h1", undefined, randomCharacter.superName)
  let gender = makeElement("h2", undefined, "Gender: "+ randomCharacter.gender)
  let type = makeElement("h3", undefined, "Type: " + randomCharacter.type)
  

  let randomExtras = makeElement("div", "random-extras")

  let background = makeElement("div", "background")
  let birthplace = makeElement("p", undefined, "Birthplace: " + randomCharacter.birthplace)
  let race = makeElement("p", undefined, "Race: " + randomCharacter.race)
  let work= makeElement("p", undefined, "Occupation: " + randomCharacter.work)
  let eyeColor = makeElement("p", undefined, "Eye Color: " + randomCharacter.eyeColor)
  let hairColor = makeElement("p", undefined, "Hair Color: " + randomCharacter.hairColor)
  let looks= makeElement("p", undefined, "Looks: "+ randomCharacter.looks)

  let randomStats= makeElement("div", "random-stats")
  let intelligence = makeElement("p", undefined, "Intelligence: " + randomCharacter.intelligence)
  let durability = makeElement("p", undefined, "Durability: " + randomCharacter.durability)
  let speed = makeElement("p", undefined, "Speed: " + randomCharacter.speed)
  let strength = makeElement("p", undefined, "Strength: " + randomCharacter.strength)
  let combat = makeElement("p", undefined, "Combat: " + randomCharacter.combat)
  let power = makeElement("p", undefined, "Power: " + randomCharacter.power)

  randomStats.append(intelligence)
  randomStats.append(durability)
  randomStats.append(speed)
  randomStats.append(strength)
  randomStats.append(combat)
  randomStats.append(power)

  background.append(birthplace)
  background.append(race)
  background.append(work)
  background.append(eyeColor)
  background.append(hairColor)
  background.append(looks)

  randomExtras.append(background)
  randomExtras.append(randomStats)

  basics.append(randomImage)
  basics.append(superName)
  basics.append(gender)
  basics.append(type)

  randomInfo.append(basics)
  randomInfo.append(randomExtras)
  superheroContainer.append(randomInfo)
  document.body.append(superheroContainer)

}