<form>

  <div class="input-wrapper">

    <label for="quantity">Quantity (1 to 50)</label>

    <input type="number" name="quantity" id="quantity" min="1" max="50" required>

    <span></span>

  </div>

  <div class="input-wrapper">

    <label for="price">Price</label>

    <input type="number" id="price" name="price" disabled>

    <span></span>

  </div>

  <div class="input-wrapper">

    <label for="distance">Distance (in kms)</label>

    <input type="number" name="distance" id="distance" min="1" max="100" required>

    <span></span>

  </div>

  <div class="input-wrapper">

    <label for="shipping">Shipping</label>

    <input type="number" name="shipping" id="shipping" disabled>

    <span></span>

  </div>

  <button>Submit</button>

</form>

body {

  margin: 20px;

  font-family: 'Lato';

  font-weight: 300;

  font-size: 1.75rem;

}

​

button {

  background: black;

  color: white;

  border-radius: 10px;

  border: none;

  padding: 0.5rem 1rem;

  margin-top: 2rem;

  cursor: pointer;

}

​

input:disabled {

  border: 2px solid gray;

  color: gray;

  background: #EEE;

}

​

form {

  width: 720px;

}

​

div.input-wrapper {

  margin: 1rem 0;

}

​

label {

  width: 30%;

  min-width: 280px;

  display: inline-block;

  font-weight: bold;

}

​

input {

  border-radius: 5px;

  border: 2px solid black;

  padding: 1rem;

}

​

input + span {

  position: relative;

}

​

input + span::before, input + span::after {

  font-size: 60%;

  font-weight: bold;

  color: white;

  padding: 0.25rem 0.5rem;

  font-weight: bold;

  width: 80px;

  position: absolute;

  left: 0.5rem;

  text-align: center;

  top: -0.8rem;

  border-radius: 5px;

}

​

input:required + span::before {

  content: "Required";

  background: black;

}

​

input:user-invalid {

  border: 2px solid red;

}

​

input:user-invalid + span::after {

  content: "Invalid";

  background: #C62828;

  top: 1.2rem;

}

​

input:not(:required):user-invalid + span::after {

  top: 0.2rem;

}

const quantityElem = document.querySelector("input#quantity");

const priceElem = document.querySelector('input#price');

const distanceElem = document.querySelector("input#distance");

const shippingElem = document.querySelector('input#shipping');

​

quantityElem.addEventListener('change', (event) => {

  let quantity = event.target.value;

  let price = 200;

  if(quantity >= 10) {

    let deduction = Math.floor(quantity/5)*5;

    price -= deduction;

  }

  priceElem.value = price;

});

​

distanceElem.addEventListener('change', (event) => {

  let distance = event.target.value;

  let multiplier = 4;

  let shipping = 0;

  if(distance > 20) {

      shipping = multiplier*Math.floor(distance/5);

  }

  shippingElem.value = shipping;

});