Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik">

 <body>
   <div id="heading-box">
     <h1>Welcome to the Skyrim Character Randomizer</h1>
   </div>
   <div id="description-box" class="box">
     <p>
       I know how hard it can be to create a new character so this should
       help...
     </p>
     <button id="char-button">
       Ready to Create a New Character
     </button>
   </div>
   <!--<div class="box"> -->
   <div id="text-box"></div>
   <!--This box is what I will be manipulating with my javascript code-->
 </body>
              
            
!

CSS

              
                * {
  box-sizing: border-box;
  font-family: Rubik, serif;
}
body {
  /*background-image: url("https://pbs.twimg.com/media/EJQbXw1WwAAZNFw.jpg");*/
  background-image: url("https://images.unsplash.com/photo-1553986782-9f6de60b51b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1464&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 100vh;
}

h1 {
  color: #eee8aa;
  font-size: 3.5rem;
  margin: auto;
  position: sticky;
}

.box {
  border-style: double;
  border-color: gray;
  background-color: #5e4b44;
  color: #eee8aa;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 45px;
  display: block;
  font-size: 1.2rem;
}

#text-box {
  background-color: #5e4b44;
  color: #eee8aa;
  border: double;
  display: none;
  margin: auto;
  padding: 5px;
  font-size: 1.5rem;
}

#char-button {
  width: 70%;
  height: 2rem;
  margin: 0.5rem;
  background-color: white;
  font-size: 0.8rem;
}
@media only screen and (max-width: 270px) {
  h1 {
    text-align: center;
    margin: 4rem;
  }

  #char-button {
    width: 100%;
    font-size: 0.7rem;
  }
}

#char-button:hover {
  cursor: pointer;
  color: red;
}

span {
  color: #e97142;
}

              
            
!

JS

              
                //this is all my character data that will be used to make up a character in skyrim
const data = {
  charNames: [
    {
      race: "Altmer",
      male: [
        "Arireanaro Sillonius",
        "Aronnturco Koraine",
        "Ormintiersanon Charmious",
        "Viarcalmoditar Aelsinor",
        "Quaralin Elsinorinh",
        "Gilornacano Aelsonkaender",
        "Arkvoov Loraethire",
        "Mankindil Sillonaere",
        "Murianirernil Korour",
        "Earedaen Laraeththar"
      ],
      female: [
        "Celrith Thaoruseus",
        "Inierand Camthius",
        "Minoalinde Kaeonin",
        "Giaafire Charmore",
        "Eiloaena Elsinour",
        "Curwlonwe Grayan",
        "Psydith Loreorin",
        "Taren Tahroman",
        "Estlia Alkinuseus",
        "Anirumaire Aelsinifeth"
      ]
    },
    {
      race: "Argonian",
      male: [
        "Reesepa Nagsilus",
        "Ukaweek Caymuseeth",
        "Ushish Caleecles",
        "Seeerei Augusleesh",
        "Amusei Augeesmesh",
        "Huzsithik Tikeertius",
        "J'Ram-Kai Caleenaresh",
        "Wuleen-Tah Caleeseene",
        "Junal-Shei Agiustus",
        "Ah-Kilaya Perssius"
      ],
      female: [
        "Pashha Canitus",
        "Keereva Pecles",
        "Beeuma Nefedorees",
        "Ranaaye Nagseus",
        "Beelhvee Caelus",
        "Beeleel Andreenaresh",
        "Ereel-Ei Theermuseeth",
        "Oneer-Meema Andreesareeth",
        "Mach-Na Endoremuseeth",
        "Ereel-Raneer Perimus"
      ]
    },
    {
      race: "Bosmer",
      male: [
        "Siluilon Barkwing",
        "Tarhdol Dornblossom",
        "Elbhil Lichenhollow",
        "Fithdulain Seedscrub",
        "Eradragar Timberscrub",
        "Anrasai Springvale",
        "Elegbros Lichenpool",
        "Uungrron Acorngrove",
        "Gwilnil Seedgrove",
        "Nordngeval Sagerock"
      ],
      female: [
        "Altereth Bluewood",
        "Rilliaes Applebrook",
        "Minwen Greenlock",
        "Althhruviel Timbervale",
        "Cuuntel Lumbermire",
        "Bernilwen Mossthorn",
        "Aneawen Applelock",
        "Beoraenyl Foreststone",
        "Aerathil Applemire",
        "Einhriian Elmthorn"
      ]
    },
    {
      race: "Breton",
      male: [
        "Gabthorchimac Littence",
        "Reynellen Cieuardt",
        "Corristrard Nesush",
        "Eugakavncois Juraan",
        "Tynnanuel Survanne",
        "Moriretus Faneance",
        "Mattane Erelnette",
        "Donrtolas Sylban",
        "Enmard Mornc",
        "Kashierryard Cienoche"
      ],
      female: [
        "Vyctienne Valeinace",
        "Evanghre Mabonce",
        "Auralene Viertinius",
        "Ysssa Guevna",
        "Chale Vaualanie",
        "Milyssa Tilwon",
        "Colrice Jendaine",
        "Mitayl Jesyne",
        "Madeha Beleoud",
        "Rhilene Raneoche"
      ]
    },
    {
      race: "Dumner",
      male: [
        "Evoor Rivudar",
        "Mavinur Venlvis",
        "Nelmlyn Sadovilo",
        "Nivewil Milathan",
        "Modyyan Araran",
        "Vadelos Uveim",
        "Velyvyn Velnvilo",
        "Aymrose Dromulis",
        "Girohen Brenhelas",
        "Midanil Leddelnim"
      ],
      female: [
        "Medrvese Gorvnevanni",
        "Dalsrenea Urnyron",
        "Dolsdsa Renor",
        "Idrrulea Seriom",
        "Saderele Herahendis",
        "Domemisa Raldor",
        "Dotea Arysralu",
        "Dandeli Bemando",
        "Bidsdrala Adusem",
        "Fanmila Fadalandas"
      ]
    },
    {
      race: "Imperial",
      male: [
        "Quinillius Belellus",
        "Denentius Valand",
        "Dranideratus Flarino",
        "Stricurio Floragrius",
        "Zenulus Falectus",
        "Cicecurio Invium",
        "Telanus Furid",
        "Segurentius Kreximius",
        "Terin Mabibonia",
        "Namaventus Flonagia"
      ],
      female: [
        "Arcatis Jucipter",
        "Romavera Scricia",
        "Clivinia Facerius",
        "Pelletrix Gonalius",
        "Larietira Sialicius",
        "Dumanoa Garrecus",
        "Covenara Gregant",
        "Clistina Antevus",
        "Julillecia Scinennius",
        "Erinora Velagrius"
      ]
    },
    {
      race: "Khajit",
      male: [
        "Urjojirr",
        "R'zharim",
        "Ji'sien",
        "Qa'zhid",
        "Ji'amha",
        "Bhidran Bavatamil",
        "Helnthri-Dar Sijnai",
        "Ranhad Rawimnirn",
        "Akh'jhera Siranmin",
        "Qa'nir Rojohin"
      ],
      female: [
        "Talava",
        "Addhrrina",
        "Shivinna",
        "Soahni",
        "Idhani",
        "Dar'mba Sohlnmin",
        "Qa'arra Javadhari",
        "Ahnaravi Ravistae",
        "Chirivva Salsopor",
        "Ubaahba Ahsopor"
      ]
    },
    {
      race: "Nord",
      male: [
        "Majid Drunken-Hair",
        "Kuvagvild Rich-Helm",
        "Hisldan Winter-Leg",
        "Skurn Dark-Hewer",
        "Talsild the Easterner",
        "Logael Bloodmouth",
        "Nelkkir Wanderer",
        "Sniud Alornssen",
        "Unmens Fjornesson",
        "Knurehl Mjorifksen"
      ],
      female: [
        "Ysoltred Brittle-Gale",
        "Swanlver Corundum-Light",
        "Laigreir Scar-Helm",
        "Kiliphire Banner-Spear",
        "Aleassa the Strange",
        "Gorana Fleetfoot",
        "Bjagi the Pickled",
        "Vibete Jorgifkdottir",
        "Svarreir Bjersdottir",
        "Freiard Jurganderdottir"
      ]
    },
    {
      race: "Orc",
      male: [
        "Sheulakh Uzukrat",
        "Gruluk Yargmph",
        "Guladum Bugdborgob",
        "Mugdmul Khabak",
        "Ogoo Mulaor",
        "Masamog Loghol",
        "Ulamrlorz Gramnikh",
        "Brugmph Orkg",
        "Grusshnag Lumogk",
        "Mugl Gatgham"
      ],
      female: [
        "Borgol Buraad",
        "Ghorbug Yargbuk",
        "Bulfgol Bonl",
        "Borggdub Gonk",
        "Globramph Rugdzog",
        "Rogbut Barogak",
        "Basgakh Gasdush",
        "Sharob Uzgat",
        "Gashba Ulfigdulg",
        "Rogronk Kharrga"
      ]
    },
    {
      race: "Redguard",
      male: [
        "Amirolm",
        "Curll",
        "Frintrius",
        "Cyrulan",
        "Shadadal",
        "Barine C'ernsa",
        "Trassteve T'arhten",
        "Traysson Flufyli",
        "Jathina Shrirhtun",
        "Glald D'ork-E"
      ],
      female: [
        "Camlie",
        "Dhode",
        "Riere",
        "Aubkne",
        "Kiaronet",
        "Dulina Mhogte",
        "Ancrva Caochja",
        "Jearbamka Losten",
        "Pemexa Shazim",
        "Tavsan Maercar"
      ]
    }
  ],
  charRace: [
    "Altmer",
    "Argonian",
    "Dunmer",
    "Breton",
    "Bosmer",
    "Nord",
    "Redguard",
    "Imperial",
    "Khajit",
    "Orc"
  ],
  charGender: ["male", "female"],
  armorType: ["cloth", "light armor", "heavy armor"], //player will be leveling up the skill tree for that armor type
  skills: [
    "Illusion",
    "Conjuration",
    "Destruction",
    "Restoration",
    "Alteration",
    "Two Handed",
    "One Handed",
    "Archery"
  ],
  //certain skills I think are important to getting through the game at a high level so a separate array will be made for them
  supportSkills: [
    "Smithing",
    "Enchanting",
    "Alchemy",
    "Pickpocket",
    "Lock Picking",
    "Speech",
    "block",
    "sneak"
  ],
  charMorality: ["good", "bad"],
  faction: [
    "Companions",
    "College of Winterhold",
    "Thieves Guild",
    "Dark Brotherhood",
    "Imperial Legion",
    "Stormcloaks",
    "Dawnguard",
    "Volkihar Vampire Clan"
  ]
  //I will have the randomizer pick two out of the above factions and list it in the DOM
};

//--------------------------------------------------------------------------------------------------

// below I coded a bunch of functions that will be used to randomize the data that I stored above
/*I make use of Math.floor(Math.random()*objectName.array.length) to be able to pick a random index
of an array (between 0 and the length of the array - 1) that I stored inside of my main data object*/

//In the function name below, RNG is an acronymn for Race,Name and Gender
function randomRNG() {
  let race = randomCharRace();
  let gender = randomGender();
  let filtered;
  data.charNames.forEach((item) => {
    if (item.race === `${race}`) {
      filtered = item;
      return filtered;
    }
  });

  let name;
  if (gender === "male") {
    name = filtered.male[Math.floor(Math.random() * filtered.male.length)];
  } else {
    name = filtered.female[Math.floor(Math.random() * filtered.female.length)];
  }

  let string =
    `<p>Your character's race is <span>${race}</span></p>` +
    `<p>Your character's gender is <span>${gender}</span></p>`;
  return (string += `<p> Your Character's Name is <span>${name}</span></p>`);
}

function randomCharRace() {
  let choice = data.charRace[Math.floor(Math.random() * data.charRace.length)];
  //let string = `<p>Your character's race is <span>${data.charRace[choice]} </span></p>`;
  return choice;
}

function randomGender() {
  let choice =
    data.charGender[Math.floor(Math.random() * data.charGender.length)];
  //let string = `<p>Your character's gender is <span>${data.gender[choice]} </span></p>`;
  return choice;
}

function randomArmor() {
  let choice = Math.floor(Math.random() * data.armorType.length);
  let string = `<p>Your character will use <span> ${data.armorType[choice]}</span> armor</p>`;
  return string;
}

function randomSkills() {
  //I need to create an array of skills and use an object to make sure it does not have duplicates
  let i = 0;
  let skillsArr = [];
  let skillsObj = {};
  let finalSkillsArr;
  while (true) {
    let choice = Math.floor(Math.random() * data.skills.length);
    skillsArr.push(data.skills[choice]);
    i++;
    skillsArr.forEach(function (item) {
      skillsObj[item] = true;
    });
    finalSkillsArr = Object.keys(skillsObj);
    if (finalSkillsArr.length == 2) {
      break;
    } else {
      continue;
    }
  }

  let string = `<p>Your character's damage skill trees will be <span>${finalSkillsArr[0]}</span> and <span>${finalSkillsArr[1]}</span></p>`;
  return string;
}
function randomSupportSkills() {
  let i = 0;
  let skillsArr = [];
  let skillsObj = {};
  let finalSkillsArr;
  while (true) {
    let choice = Math.floor(Math.random() * data.supportSkills.length);
    skillsArr.push(data.supportSkills[choice]);
    i++;
    skillsArr.forEach(function (item) {
      skillsObj[item] = true;
    });
    finalSkillsArr = Object.keys(skillsObj);
    if (finalSkillsArr.length == 2) {
      break;
    } else {
      continue;
    }
  }
  let string = `<p>Your character's support skill trees will be <span>${finalSkillsArr[0]}</span> and <span>${finalSkillsArr[1]}</span></p>`;
  return string;
}

function randomCharMorality() {
  let choice = Math.floor(Math.random() * data.charMorality.length);
  let string = `<p>Your character's morality is <span>${data.charMorality[choice]}</span></p>`;
  return string;
}

function randomFactions() {
  let i = 0;
  let skillsArr = [];
  let skillsObj = {};
  let finalSkillsArr;
  while (true) {
    let choice = Math.floor(Math.random() * data.faction.length);
    skillsArr.push(data.faction[choice]);
    i++;
    skillsArr.forEach(function (item) {
      skillsObj[item] = true;
    });
    finalSkillsArr = Object.keys(skillsObj);
    if (finalSkillsArr.length == 2) {
      break;
    } else {
      continue;
    }
  }

  let string = `<p>Your character's factions will be <span>${finalSkillsArr[0]}</span> and <span>${finalSkillsArr[1]}</span></p>`;
  return string;
}
/* I stored all the relevant functions that I wrote to randomize the qualities of my character
inside an object with relevant key names for what the function does */
const functionCollection = {
  raceAndGender: randomRNG(),
  armor: randomArmor(),
  skills: randomSkills(),
  supportSkills: randomSupportSkills(),
  morality: randomCharMorality(),
  factions: randomFactions()
};

// I create variables for the DOM elements that I would like to manipulate with javascript
const descriptionBox = document.getElementById("description-box");
const textBox = document.getElementById("text-box");
const charButton = document.getElementById("char-button");

function writeToTextBox(domElement, obj) {
  let text = "";
  text += obj.raceAndGender;
  text += obj.armor;
  text += obj.skills;
  text += obj.supportSkills;
  text += obj.morality;
  text += obj.factions;

  domElement.innerHTML = text;
  descriptionBox.style.display = "none";
  textBox.style.display = "block";
}

charButton.addEventListener("click", function () {
  writeToTextBox(textBox, functionCollection);
});

              
            
!
999px

Console