A Pen by Guilherme Burille Moretti.

FvkKl.markdown

FvkKl

Forked from Anonasaurus Rex's Pen mboic.

A Pen by Guilherme Burille Moretti on CodePen.

License.

index.html

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<div id="product_1" >
	<input type="text" name="price" />
	<input type="text" name="value" />
  <select name='value_options'>
    <option value='ml'>ml</option>
    <option value='l'>l</option>
  </select>
</div>
  
<div id="product_2">
  <input type="text" name="price" />
  <input type="text" name="value" />
  <select name='value_options'>
    <option value='ml'>ml</option>
    <option value='l'>l</option>
	</select>
 </div>
 <button id="calculate">Calcular</button>
 

script.js

var button = document.getElementById('calculate');
button.onclick = function() {
  var el_prices = document.getElementsByName('price');
  var el_values = document.getElementsByName('value');
  var el_options = document.getElementsByName('value_options');
  
  for(i=0;i<el_prices.length;i++) {
    el_prices[i].className = "";
    el_values[i].className = "";
    el_options[i].className = "";
  }
  
  var real_price0 = parseFloat(el_prices[0].value) / parseFloat(el_values[0].value);
  var real_price1 = parseFloat(el_prices[1].value) / parseFloat(el_values[1].value);
  
  console.log(real_price0,real_price1);
  if(real_price0 < real_price1) {
    el_prices[0].className = "cheaper";
    el_values[0].className = "cheaper";
    el_options[0].className = "cheaper";
  }
  if(real_price0 > real_price1) {
    el_prices[1].className = "cheaper";
    el_values[1].className = "cheaper";
    el_options[1].className = "cheaper";
  }
}

style.css

* {
  background-color: #000;
	color: #AFAF97;
  font-family: 'Roboto', sans-serif;
}

input[type="text"].cheaper,
select.cheaper {
	color: #00FF00;
  border-color: #00FF00;
  transition-property: border, color; 
  transition-duration: 0.3s;
  
}

select, option {
  padding: 10px;
  width: 10%;
}
input[type="text"] {
	text-align: right;
	width: 42%;
  padding: 10px;
  border: none;
  border-bottom: solid 2px #c9c9c9;
  transition: border 0.3s;
}
input[type="text"]:focus,
input[type="text"].focus {
  border-bottom: solid 2px #969696;
}

button {
	width: 100%;
  background: #FFCC02;
  border: none;
  padding: 10px 25px 10px 25px;
  color: #585858;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  text-shadow: 1px 1px 1px #FFE477;
  font-weight: bold;
  box-shadow: 1px 1px 1px #3D3D3D;
  -webkit-box-shadow:1px 1px 1px #3D3D3D;
  -moz-box-shadow:1px 1px 1px #3D3D3D;
  margin-top: 10px;
}

button:hover {
	cursor: pointer;
  background-color: #FFDB4E;
}