ESRB rating generator

by Jesse M

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<form>
<p>Rating</p>
<label>E
<input type="radio" name="rating[]" value="e" />
</label>
<label>E10+
<input type="radio" name="rating[]" value="e10" />
</label>
<label>T
<input type="radio" name="rating[]" value="t" />
</label>
<label>M
<input type="radio" name="rating[]" value="m" />
</label>
<label>EC
<input type="radio" name="rating[]" value="ec" />
</label>
<label>AO
<input type="radio" name="rating[]" value="ao" />
</label>
<br />
<hr />
<br />
<p>Descriptors</p>
<table>
  <thead>
    <tr>
      <th>Descriptor</th>
      <th>Order</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><label><input type="checkbox" name="descriptor[]" value="Alcohol Reference" /> Alcohol Reference</label></td>
      <td><input type="number" /></td>
    </tr>
    <tr>
      <td><label><input type="checkbox" name="descriptor[]" value="Animated Blood" /> Animated Blood</label></td>
      <td><input type="number" /></td>
    </tr>
    <tr>
      <td><label><input type="checkbox" name="descriptor[]" value="Blood" /> Blood</label></td>
      <td><input type="number" /></td>
    </tr>
    <tr>
      <td><label><input type="checkbox" name="descriptor[]" value="Blood and Gore" /> Blood and Gore</label></td>
      <td><input type="number" /></td>
    </tr>
    <tr>
      <td><label><input type="checkbox" name="descriptor[]" value="Cartoon Violence" /> Cartoon Violence</label></td>
      <td><input type="number" /></td>
    </tr>
    <tr>
      <td><label><input type="checkbox" name="descriptor[]" value="Comic Mischief" /> Comic Mischief</label></td>
      <td><input type="number" /></td>
    </tr>
    <tr>
      <td><label><input type="checkbox" name="descriptor[]" value="Crude Humor" /> Crude Humor</label></td>
      <td><input type="number" /></td>
    </tr>
    <tr>
      <td><label><input type="checkbox" name="descriptor[]" value="Drug Reference" /> Drug Reference</label></td>
      <td><input...

CSS

.rating-bg {
  display: block;
  width: 380px;
  height: 182px;
  position: relative;
}

.descriptor-text {
  position: absolute;
  display: flex;
  align-items: center;
  text-align: left;
  width: 230px;
  height: 140px;
  float: right;
  top: 1.2rem;
  right: 1rem;
  font-family: 'Arial Narrow', sans-serif;
  font-size: 20pt;
}

JavaScript

$('input[type="radio"]').click(function(){
	var rating = $(this).val();
  $('.rating-bg').prepend('<img src="https://modusgames.com/blank-ratings/rating-'+rating+'.jpg" />');
});

$('.set-descriptors').click(function(e){
	e.preventDefault();

	$('.descriptor-text').empty();

	$('[name="descriptor[]"]:checked').each(function(){
  	var descriptor = $(this).val();
  	$('.descriptor-text').append(descriptor + '<br />');
  });

});

$('.generate-image').click(function(e){
	e.preventDefault();
	html2canvas(document.querySelector(".rating-bg"), { allowTaint : true }).then(canvas => {
    document.body.appendChild(canvas)
	});
});