D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
rcphan
Full window
Github gist
glas
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } .centerize { text-align:center; } </style> </head> <body> <div> <h2>Glass</h2> </div> <table> <tr><td> <input type="text" id=glassDim placeholder="width,height"/> <input type="text" id=glassMm placeholder="mm"/> <button id="clear">clear</button </td></tr> <tr><td> Dimension : <span id="dimNonRound"></span> <br/> Dimension (round) : <span id="dimRound"></span> <br/> Price : <span id="price"></span> <br/> </td></tr> </table> <script> console.clear(); function sel(id){ return document.getElementById(id); } allInputIds = [] var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { allInputIds.push(inputs[i].id); } for (var i = 0; i < allInputIds.length; i++) { if(allInputIds[i] != ""){ thisEl = sel(allInputIds[i]) thisEl.oninput = function(){ runCalculation(); } } } function clear(){ console.log("aaa"); for (var i = 0; i < allInputIds.length; i++) { if(allInputIds[i] != ""){ thisEl = sel(allInputIds[i]) thisEl.value = ""; runCalculation(); } } } sel("clear").onclick = function(){return clear();}; function runCalculation(){ var glassDim = sel("glassDim").value; glassDim = glassDim.split(","); var glassMm = (sel("glassMm").value); var glassPrice; if(glassMm == '2') glassPrice = 2500; else if(glassMm == '2r') glassPrice = 3000; else if(glassMm == '3') glassPrice = 3500; else if(glassMm == '3r') glassPrice = 4000; else if(glassMm == '5') glassPrice = 5000; else if(glassMm == '5r') glassPrice = 5500; else glassPrice = 5000; var dim1 = parseFloat(glassDim[0]); var dim2 = parseFloat(glassDim[1]); var dimRound1 = (dim1 > 120 ? 4 : (runThis(dim1/15))/2) || 0 var dimRound2 = (dim2 > 120 ? 4 : (runThis(dim2/15))/2) || 0 var dimNonRound1 = (dim1 > 120 ? 4 : ((dim1/15)/2).toFixed(2)) || 0 var dimNonRound2 = (dim2 > 120 ? 4 : ((dim2/15)/2).toFixed(2)) || 0 function runThis(dim){ var output; var rounded = Math.floor(dim); var temp = dim%1; if(temp != 0){ if(0 < temp <= 0.5) output = rounded + 0.5; else if(0.5 < temp <= 1 ); output = rounded + 1; } else { output = dim; } return output; } sel("dimNonRound").innerHTML = dimNonRound1 + "," + dimNonRound2; sel("dimRound").innerHTML = dimRound1 + "," + dimRound2; sel("price").innerHTML = "<b><u>" + d3.format(',')((dimRound1 * dimRound2) * glassPrice) + "</b></u>" } </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js