Tyre Calculator

JS Assignment

by Ksistof Grunt

HTML

<form id="tyreForm">
  <div id="currentTyre">
    <h2>Current Tyre Size</h2>

    <div id="errorDisplay"></div>

    <input type="number" id="sectionWidth"> /
    <input type="number" id="aspectRatio"> R
    <input type="number" id="rimDiameter">

    <p>Sidewall: <span class="output"></span></p>
    <p>Width: <span class="output"></span></p>
    <p>Diameter: <span class="output" id="fullDiameter"></span></p>
    <p>Circumference: <span class="output"></span></p>
    <p>Reverse / Mile: <span class="output"></span></p>
  </div>
  
  <div id="newTyre">
    <h2>New Tyre Size</h2>
  
    <input type="number" id="newSectionWidth"> /
    <input type="number" id="newAspectRatio"> R
    <input type="number" id="newRimDiameter">
    
    <p>Sidewall: <span class="output"></span></p>
    <p>Width: <span class="output"></span></p>
    <p>Diameter: <span class="output" id="newFullDiameter"></span></p>
    <p>Circumference: <span class="output"></span></p>
    <p>Reverse / Mile: <span class="output"></span></p>
  </div>
  <div id="result">
    <h2>Tyre difference</h2>
    <p>Diameter Difference(%): <span id="diameterDifference"></span></p>
  </div>
			<button type="submit">Calculate</button>
		</form>

CSS

#currentTyre, #newTyre, #result {
  border: solid lightgrey 1px;
  margin-bottom: 2%;
  padding: 2%;
}

JavaScript

document.getElementById('tyreForm').addEventListener('submit', function(e) {
	e.preventDefault();
  
  var sw = this.sectionWidth.value;
  var ar = this.sectionWidth.value;
  var rd = this.sectionWidth.value;
  
  var nsw = this.newSectionWidth.value;
  var nar = this.newAspectRatio.value;
  var nrd = this.newRimDiameter.value;
  
  /* Form Validation Starts */
  var errorDisplay = document.getElementById('errorDisplay');
  errorDisplay.style.display = 'block';
 
  if (sw == '' || ar == '' || rd == '') {
		errorDisplay.style.color = "red";
		errorDisplay.textContent = "Error: Please fill all the fields";
		return false;
	}

	if (sw == 0 || ar == 0 || rd == 0) {
		errorDisplay.style.color = "red";
		errorDisplay.textContent = "Error: Please check your input fields. 0 is not valid";
		return false;
	}
  /* Form Validation Finishes */
  
  this.getElementsByClassName("output")[0].textContent = sidewall(sw, ar).toFixed(2);
	this.getElementsByClassName("output")[1].textContent = width(sw, ar, rd).toFixed(2);
	this.getElementsByClassName("output")[2].textContent = diameter(sw, ar, rd).toFixed(2);
	this.getElementsByClassName("output")[3].textContent = circumference(sw, ar, rd).toFixed(2);
	this.getElementsByClassName("output")[4].textContent = reverseMile(sw, ar, rd).toFixed(2);
  
  this.getElementsByClassName("output")[5].textContent = sidewall(nsw, nar).toFixed(2);
	this.getElementsByClassName("output")[6].textContent = width(nsw, nar, nrd).toFixed(2);
	this.getElementsByClassName("output")[7].textContent = diameter(nsw, nar, nrd).toFixed(2);
	this.getElementsByClassName("output")[8].textContent = circumference(nsw, nar, nrd).toFixed(2);
	this.getElementsByClassName("output")[9].textContent = reverseMile(nsw, nar, nrd).toFixed(2);

	var fd = document.getElementById('fullDiameter').textContent;
  var nfd = document.getElementById('newFullDiameter').textContent;
	document.getElementById('diameterDifference').textContent = diameterDifference(fd, nfd);
}, false);

/*...