Display a different image according to a calculated number

byMR

November 10, 2021

I am creating a slider that allows the user to calculate a monthly payment.

However I would like to add a price comparison in the div with id="capuccinoContainer".

If the monthly payment is less than 3.5, I want to display a half cappuccino (it’s an image of a cappuccino cut in two)
If the monthly payment is more than 3.5 and less than 5.25 , I want to display a full cappuccino (picture of a full capuccino)
If the monthly payment is more than 5.25 and less than 7 , I want to display a cappuccino and a half

…. and so on.

Ideally, I also would like to count and display the numbers of coffee in the element with id="coffeAmount"

Here is my code at the moment, I don’t know if I should make any changes but I need your help, thank you very much!

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var price = document.getElementById("monthlyPrice")
var capuccino = document.getElementById("capuccinoContainer")
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  brut = (this.value * 0.7 / 100) / 12 + 2;
  price.innerHTML = Math.round(100 * brut) / 100;

}

.pricing-calculator-container {
  max-width: 730px;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0px 0px 14px rgb(221 227 240 / 90%);
  border-radius: 20px;
  padding: 1rem;
}

.intro-pricing-calculator {
  text-align: center;
  padding: 13px;
  background: #F2F4F8;
  max-width: 688px;
  border-radius: 20px;
  margin: 0 auto 3rem;
  font-weight: bold;
}

.first-part-pricing-calculator {
  display: flex;
  justify-content: space-between;
}

.second-part-pricing-calculator {
  text-align: center;
}

.range-container {
  padding-left: 1rem
}

.text-range-container {
  display: flex;
  gap: 25px;
  padding-bottom: 2rem;
}

.title-range {
  align-self: center;
}

.range-input-field {
  background: #F2F4F8;
  border-radius: 30px;
  padding: 12px 25px;
  font-weight: bold;
  min-width: 61px;
}

.module-border-wrap {
  min-width: 250px;
  position: relative;
  background: linear-gradient(to right, #3CE7E3, #00C2FF);
  padding: 3px 3px 0;
  border-radius: 10px;
}

.price-module {
  background: #FFF;
  padding: 1rem 1rem 25px;
  border-radius: 10px;
  text-align: center;
}

<div class="pricing-calculator-container">
  <div class="first-part-pricing-calculator">
    <div class="range-container ">
      <div class="text-range-container ">
        <div class="title-range">Your investment:</div>
        <div class="range-input-field">
          <p style="text-align: center;"><span id="demo"></span> €</p>
        </div>
      </div>
      <div>
        <input type="range" min="1" max="10000" value="100" class="slider1" id="myRange">
      </div>
    </div>
    <div class="module-border-wrap">
      <div class="price-module">
        <div class="text-font-24"><span id="monthlyPrice"></span>€</div>
        <div>per month</div>
      </div>
    </div>
  </div>
  <div class="second-part-pricing-calculator">
    <div id="capuccinoContainer"></div>
    <div>It will cost you <span id="coffeeAmount"></span> coffees</div>
  </div>
</div>

>Solution :

Just add img html to all 3 new DIV’s. And it will change according to your conditions. I can make it to count coffee cups but I need to know coffee price for 1 cup.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var price = document.getElementById("monthlyPrice")
var capuccino = document.getElementById("capuccinoContainer")
output.innerHTML = slider.value;
// new CODE
            var halfCappuccino = document.getElementById("half-cappuccino");
            var fullCappuccino = document.getElementById("full-cappuccino");
            var fullCappuccinoHalf = document.getElementById("full-cappuccino-half");
// end of new CODE

slider.oninput = function() {
  output.innerHTML = this.value;
  brut = (this.value * 0.7 / 100) / 12 + 2;
  price.innerHTML = Math.round(100 * brut) / 100;

  // new CODE
               if (brut <= 3.5) {
                 halfCappuccino.className = 'half-cappuccino display';
                 fullCappuccino.className = 'full-cappuccino';
                 fullCappuccinoHalf.className = 'full-cappuccino-half';
              } else if (brut > 3.5 && brut <= 5.25) {
                halfCappuccino.className = 'half-cappuccino';
                 fullCappuccino.className = 'full-cappuccino display';
                 fullCappuccinoHalf.className = 'full-cappuccino-half';
              } else if (brut > 5.25 && brut <= 7) {
                 halfCappuccino.className = 'half-cappuccino';
                 fullCappuccino.className = 'full-cappuccino';
                 fullCappuccinoHalf.className = 'full-cappuccino-half display';
              }
              
              else {
                halfCappuccino.className = 'half-cappuccino';
                fullCappuccino.className = 'full-cappuccino';
                fullCappuccinoHalf.className = 'full-cappuccino-half';
              }
              
              // end of new CODE

}

.pricing-calculator-container {
  max-width: 730px;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0px 0px 14px rgb(221 227 240 / 90%);
  border-radius: 20px;
  padding: 1rem;
}

.intro-pricing-calculator {
  text-align: center;
  padding: 13px;
  background: #F2F4F8;
  max-width: 688px;
  border-radius: 20px;
  margin: 0 auto 3rem;
  font-weight: bold;
}

.first-part-pricing-calculator {
  display: flex;
  justify-content: space-between;
}

.second-part-pricing-calculator {
  text-align: center;
}

.range-container {
  padding-left: 1rem
}

.text-range-container {
  display: flex;
  gap: 25px;
  padding-bottom: 2rem;
}

.title-range {
  align-self: center;
}

.range-input-field {
  background: #F2F4F8;
  border-radius: 30px;
  padding: 12px 25px;
  font-weight: bold;
  min-width: 61px;
}

.module-border-wrap {
  min-width: 250px;
  position: relative;
  background: linear-gradient(to right, #3CE7E3, #00C2FF);
  padding: 3px 3px 0;
  border-radius: 10px;
}

.price-module {
  background: #FFF;
  padding: 1rem 1rem 25px;
  border-radius: 10px;
  text-align: center;
}

/* ADD THIS CODE */
.half-cappuccino, 
.full-cappuccino, 
.full-cappuccino-half {
   display: none;
}

.display {
   display: block;
}

<div class="pricing-calculator-container">
  <div class="first-part-pricing-calculator">
    <div class="range-container ">
      <div class="text-range-container ">
        <div class="title-range">Your investment:</div>
        <div class="range-input-field">
          <p style="text-align: center;"><span id="demo"></span> €</p>
        </div>
      </div>
      <div>
        <input type="range" min="1" max="10000" value="100" class="slider1" id="myRange">
      </div>
    </div>
    <div class="module-border-wrap">
      <div class="price-module">
        <div class="text-font-24"><span id="monthlyPrice"></span>€</div>
        <div>per month</div>
      </div>
    </div>
  </div>
  <div class="second-part-pricing-calculator">
    <div id="capuccinoContainer"></div>
    

 <!--  ADD THIS CODE    -->
<div>It will cost you <span id="coffeeAmount"></span> coffees</div>
<div class="half-cappuccino" id="half-cappuccino"> put image 1 here</div>
<div class="full-cappuccino" id="full-cappuccino"> put image 2 here</div>
<div class="full-cappuccino-half" id="full-cappuccino-half"> put image 3 here</div>
  </div>
</div>