Translate: Estimate view

Language selection view

by Eugene Trounev

HTML

<link rel="stylesheet" href="https://appcdn2.docsie.io/js/onboarding/current/css/main.css">
<div class="container">
  <div class="mt-5 mb-4 text-left">
    <h2>
      Translate {book title}
    </h2>
    <p class="lead">Select translation package:</p>
  </div>
  <form>
    <div class="mb-5">

      <div class="card mb-3">
        <div class="card-body">
          <p class="card-title h4 form-element custom-radio">
            <input type="radio" class="form-element-input mr-2" id="package1" name="package"><label class="form-element-label" for="package1">&nbsp;Machine translation</label></p>
          <p class="card-text pl-4">
            Package includes: <span class="badge badge-secondary">machine translation</span> <span class="badge badge-secondary">professional post-editing</span>
          </p>
        </div>
        <div class="card-footer text-right">
          <span class="text-muted">USD $0.10 per word @ 1200 words</span>
          &nbsp;&nbsp;
          <span class="text-success text-uppercase font-weight-bold">USD $80</span> </div>
      </div>

      <div class="card mb-3">
        <div class="card-body">
          <p class="card-title h4 form-element custom-radio">
            <input type="radio" class="form-element-input mr-2" id="package2" name="package"><label class="form-element-label" for="package2">&nbsp;Enchanced Machine translation</label></p>
          <p class="card-text pl-4">
            Package includes: <span class="badge badge-secondary">machine translation</span> <span class="badge badge-secondary">professional post-editing</span> <span class="badge badge-secondary">proofreading</span>
          </p>
        </div>
        <div class="card-footer text-right">
          <span class="text-muted">USD $0.10 per word @ 1200 words</span>
          &nbsp;&nbsp;
          <span class="text-success text-uppercase font-weight-bold">USD $80</span> </div>
      </div>

      <div class="card mb-3">
        <div class="card-body">
          <p...

JavaScript

function toggleBorder($el, show) {
	$el.parentElement.parentElement.parentElement.classList.toggle(
		"border-primary",
		show
	);
}
var packages = Array.from(document.querySelectorAll("[type=radio]"));
packages.forEach(
	$el => $el.addEventListener("change",
		function (e) {
			packages.forEach(function($el){
				toggleBorder($el, $el === e.target);
			});
		}
	)
);