JSFiddle - React, Tailwind, and code Playground

by ryanhagz

HTML

<body>
<h1>Character Creation</h1>
<button id="create_char_btn">New Character</button>
<form id="create_char_form" action="#">
	<label>Name:</label><br /><input type="text" value="test" id="fname"><br />
	<label>Age:</label><br /><input type="text" value="18" id="fage"><br />
	<label>Gender:</label><br /><input type="text" value="male" id="fgender"><br />
	<label>Hair Color:</label><br /><input type="text" value="brown" id="fhair_col"><br />
	<label>Eye Color:</label><br /><input type="text" value="blue" id="feye_col"><br />
	<input type="button" value="Create" id="create_btn">

CSS

body, html
{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	overflow: auto;
}
#create_char_form
{
	display: none;
}

JavaScript

function Person(name, age, gender, hair_col, eye_col){
	this.name = document.getElementById(fname).value;
	this.age = document.getElementById(fage).value;
	this.gender = document.getElementById(fgender).value;
	this.hair_col = document.getElementById(fhair_col).value;
	this.eye_col = document.getElementById(feye_col).value;
	alert(this.name + ' has been created');
	alert('CHARACTER INFO - \n\tname: ' + this.name + '\n\tage: ' + this.age + '\n\tGender: ' + this.gender + '\n\tHair Color: ' + this.hair_col + '\n\tEye Color: ' + this.eye_col);
}
$(document).ready(function(){
	$("#create_char_btn").click(function() {
  		$("#create_char_form").css("display", "block")
	});
	$("#create_btn").click(function(){
		var createPerson = new Person(this.name,this.age,this.gender,this.hair_col,this.eye_col);
		createPerson;
	});
});