Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</head>
<body>
<div id="card_1" class="box-container">
    <section class=box-image>&nbsp;
      <img src="" style="border-radius:10px" width="250px" height="230px"/>
    </section>
    <section class="box-content">
      <label class="title">
        <div align="left"><b>A MODA DA CASA</b></div>
      </label>
      <span class="description">
        <div align="left">Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano</div>
      </span>
    </section>
    <section class=box-image-2>
      <label class="title">
        <div align="center"><b class="currency-value-displayed">28,00</b></div>
      </label>
      <span class="description">
          <div align="left"><br/>
          <input type="checkbox" name="sabor" id="evento_value" class="currency-check" value="28,00">
          <input type="hidden" name="vl_sabor" class="total-value"value="28,00">
            <SELECT name="qntdade" onchange="changedValue(event, 'card_1')">  
              <option value="1">1</option> 
              <option value="2">2</option> 
            </SELECT>                                                 
      </div></span>      
    </section>    
  </div>
  
  
  <div id="card_2" class="box-container">
    <section class=box-image>&nbsp;
      <img src="" style="border-radius:10px" width="250px" height="230px"/>
    </section>
    <section class="box-content">
      <label class="title">
        <div align="left"><b>A MODA DA CASA 2</b></div>
      </label>
      <span class="description">
        <div align="left">Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano</div>
      </span>
    </section>
    <section class=box-image-2>
      <label class="title">
        <div align="center"><b class="currency-value-displayed">25,00</b></div>
      </label>
      <span class="description">
          <div align="left"><br/>
          <input type="checkbox" name="sabor" id="evento_value" class="currency-check" value="25,00">
          <input type="hidden" name="vl_sabor" class="total-value"value="25,00">
            <SELECT name="qntdade" onchange="changedValue(event, 'card_2')">  
              <option value="1">1</option> 
              <option value="2">2</option> 
            </SELECT>                                                 
      </div></span>      
    </section>    
  </div>
</body>
</html>
 
body {
  width: 450px
}
​
.box-image-2 {
  display: flex;
  align-items: center;
}
​
​
.banner img {
  max-width: 100% !important;
  height: 200px;    
}
.container-cards {
  flex-wrap: wrap;
  display: inline-flex;
  width: 400px; 
  align-items: center;
  justify-content: center;
}
​
.box-container {
  /*border: 1px solid red;*/
  display: flex;
  background: #fcfcfc;
  font:80%/1 Arial;
  font-size: 14px;
  border-radius: 5px;
  align-items: center;
  width: 100%;
  height: 80px;
  border: 0px solid #AAAAAA;
  margin: 5px;
  background-color: #fcfcfc;
  -webkit-box-shadow: 1px 3px 5px rgba(250, 242, 242, 0.77);
  -moz-box-shadow:    1px 3px 5px rgba(250, 242, 242, 0.77);
  box-shadow:         1px 3px 5px rgba(250, 242, 242, 0.77);
}
.box-image {
  width: 20%;
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: left;
  border-right: 0px solid #AAAAAA;
}
.box-container .box-image img {
  width: 75px;
  height: 75px;
}
.box-container .box-content {       
  align-items: left;
  display: flex;
  height: 75%;
  justify-content: left;
  flex-direction: column;
  padding: 10px;
}
.title {
  margin-bottom: 10px;
  font-size: 16px
  font-weight: bold;
  color: #000;   
  }
.description {
  font:80%/1 Arial;    
  font-size: 14px;
  color: #8a8686;
  top: 50px;
  left: 50px;
}
 
function changedValue(event, id) {
  var atualValue = $('#'+id+' .currency-check').val();
  var quantity = event.currentTarget.value;
  
  
  var newValue = calcValue(quantity, atualValue);
  
  console.log(newValue, quantity, atualValue, id);
  
  updateCardValue(id, newValue)
}
​
function updateCardValue(cardId, newValue) {
  // $('#'+cardId+' #evento_value').val(newValue);
  $('#'+cardId+' .currency-value-displayed').text(formatPrice(newValue, false));
  $('#'+cardId+' .total-value').val(newValue);
}
​
function calcValue(quantity, price) {
  return parseInt(quantity) * parseFloat(price);
}
​
function formatPrice(value, currency = true) {
  var valor = parseFloat(value);
  let valorFormatado = null;
  
  if(currency) {
    //Valor com cifrão
    valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
  }
  else {
    //Valor sem cifrão  
    valorFormatado = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2});
  }
​
  return valorFormatado;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers