Javascript Project to Build Horsepower Calculator in Browser Using HTML5 and CSS3

Thanks for reading my article first. Javascript Project to Build Horsepower Calculator in Browser Using HTML5 and CSS3 We are going to learn more about this in this article. Let’s go into the article

Javascript Project to Build Horsepower Calculator in Browser Using HTML5 and CSS3

Javascript Project to Build Horsepower Calculator in Browser Using HTML5 and CSS3

<body>
  <div class="container" ng-app="horsepowerApp">
			<div class="calc-box">
				<div class="calc-head" style="background-image:url(https://powertestdyno.com/wp-content/uploads/sites/2/2019/01/headerblog-01.jpg);"></div>
				<div class="calculator" ng-controller="headerCtrl">
					<div style="text-align:center">
						<h1 style="font-size: 2rem; color: #1f60ad;padding-bottom: 10px;">Horsepower Calculator</h1>
						<form ng-controller="appCtrl">
							<label for="torque-input">Torque: <span id="demo"></span> lb.ft.</label>
							<input type="range" min="1" max="5000" value="0" class="slider" id="torque-input" ng-change="findHorsePower()" ng-model="calculation.torque">
							<br>
							<label for="speed-input">Speed: <span id="demo2"></span> RPM</label>
							<input type="range" min="1" max="5000" value="0" class="slider" id="speed-input" ng-change="findHorsePower()" ng-model="calculation.RPM">
							<br>
							<b>Horsepower: </b><br>{{calculation.findHorsePower | number : 0}} HP
						<hr>
						<div class="show-calc"> 
							<p>Horsepower = Torque x RPM / 33,000 foot pounds / minute</p>
							<p>{{calculation.findHorsePower | number : 0}} <sup>HP</sup> = {{calculation.torque}} <sup>lb-ft.</sup> x {{calculation.RPM}} <sup>RPM</sup> / 33,000</p>
						</div>
							</form>
						<script>
							var slider = document.getElementById("torque-input");
							var output = document.getElementById("demo");
							output.innerHTML = slider.value;

							slider.oninput = function() {
							  output.innerHTML = this.value;
							}
							
							var slider2 = document.getElementById("speed-input");
							var output2 = document.getElementById("demo2");
							output2.innerHTML = slider2.value;

							slider2.oninput = function() {
							  output2.innerHTML = this.value;
							}
							
							var app = angular.module( 'myApp', [] );
							app.controller( 'nCtrl', function ( $scope ) {
								$scope.weight = 5111;
							} );
						</script>
					</div>
				</div>
			</div>
			</div>
</body>
body {
  height: 100vh;
  background-color: gray;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-wrap: no-wrap;
  align-items: center;
}
.container {
  margin: 0 auto;
}
.calculator {
  padding: 10px 30px;
}
label {
  font-weight: 300;
  font-size: 0.9rem;
  text-transform: uppercase;
  padding-bottom: 6px;
}
#torque-input, #speed-input {
  text-align: center;
  border-radius: 5px;
  border: solid 0px;
  box-shadow: 1px 1px 2px #dfdfdf;
}
.calc-head {
  width: 100%;
  height: 50px;
  border-radius: 5px 5px 0px 0px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.calc-box {
  background-color: #f2f6f9;
  border-radius: 5px;
  box-shadow: 3px 3px 3px 1px rgba(255, 255, 255, 0.2);
  margin: 0 auto;
  max-width: 400px;
}
.show-calc p {
  color: #1f60ad;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.slidecontainer {
  width: 100%;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1f60ad;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1f60ad;
  cursor: pointer;
}
var app = angular.module('horsepowerApp', []);

app.controller('headerCtrl', function($scope){
  $scope.header = "Horsepower Calculator";
});

app.controller('appCtrl',['$scope', function($scope){
  $scope.calculation = {
    torque: 10,
    RPM: 5,
    findHorsePower: 0,
  }
  
var findHorsePower = function(){
    $scope.calculation.findHorsePower = ($scope.calculation.torque * $scope.calculation.RPM)/5252;
  }
  $scope.$watch('calculation.torque + calculation.RPM',findHorsePower);
    
}]);

Final Words

Javascript Project to Build Horsepower Calculator in Browser Using HTML5 and CSS3 We hope this article solves all your doubts. If in doubt let me know.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment