JSFiddle - React, Tailwind, and code Playground

by junglist781

HTML

<div class="jumbotron">
						  <h2>Price Calculator</h2>
						  <form>
						
							<div class="form-group">
							  <label for="price">Price</label>
							  <input type="text" class="form-control" name="price" value="30">
							</div>
						
							<div class="form-group">
							  <input name="quantity" id="sliderWithValue" class="slider has-output is-fullwidth form-control" min="10" max="249" value="50" step="1" type="range">
							  <output for="sliderWithValue">50</output>
							</div>
						
						
						  </form>
						
						  <div class="text-right text-giant total"></div>
						
						</div>

JavaScript

const priceInput = document.querySelector('[name=price]');
	const quantityInput = document.querySelector('[name=quantity]');
	const total = document.querySelector('.total');
	const quantityLabel = document.querySelector('.quantity-label');
	
	
	// create functions we'll need
	function calculateCost() {
	  var price = '10';
	
	  
		
	  
	  
	  const quantity = quantityInput.value;
	  
	  const cost = price * quantity;
	  console.log(cost);
	  total.innerText = "ÂŁ" + cost.toFixed(2);
	}
	
	function updateQuantityLabel() {
	  const quantity = quantityInput.value;
	  quantityLabel.innerText = quantity;

	}
	
	// on first run
	calculateCost();
	
	// add event listeners
	priceInput.addEventListener('input', calculateCost);
	quantityInput.addEventListener('input', calculateCost);
	quantityInput.addEventListener('input', updateQuantityLabel);