JSFiddle - React, Tailwind, and code Playground

by Kartikeya Khosla

HTML

<form id="newPlayer">
  Username:
  <br>
  <input type="text" name="user" />
  <br> Please Choose a Class:
  <br>
  <input type="radio" name="class" value="archer"  />Archer
  <input type="radio" name="class" value="mage"  />Mage
  <input type="radio" name="class" value="warrior"  />Warrior
  <br> Please Choose a Race:
  <br>
  <input type="radio" name="race" value="Orc"  />Orc
  <input type="radio" name="race" value="Elf"  />Elf
  <input type="radio" name="race" value="Human"  />Human
  <input type="radio" name="race" value="Worg"  />Worg
  <br>
  <input type="submit" value="Submit">
  <p id="descript"></p>
</form>

CSS

#newPlayer {
  position: relative;
  top: 50px;
  color: #c10606;
  background-color: rgba(0, 0, 0, .3);
  width: 350px;
  margin: auto;
  height: 200px;
  border-radius: 5px;
}

JavaScript

var classes = ['archer', 'mage', 'warrior'];
  var classStats = ['HP: 20 Strength: 3 Intellect: 1 Speed: 5 Magic Defense: 1 Defense: 3', 'HP: 15 Strength: 1 Intellect: 6 Speed: 2 Magic Defense: 2 Defense: 1', 'HP: 30 Strength: 2 Intellect: 1 Speed: 1 Magic Defense: 3 Defense: 5'];
  var classAdd = ['The archer also has a special passive for armor penetration.', 'The mage has a special passive for increased gold gain', 'The warrior has a special passive for percent damage mitigation.'];
  var c,e,f;

$('input[name=class]').change(function(){
    c = classes.indexOf($(this).val());
    e = classStats[c];
    f = classAdd[c];
    $('#descript').text(e + ' ' + f);
});