Your cart is currently empty!
Test Code Take 2
Another try with the form. This time around I have everything looking a little bit cleaner thanks to the section in the class I’ve taken recently. At least on the HTML side. This took longer than I liked because of some issues with the JavaScript, but to be fair I haven’t reached that far into the lessons yet. For future reference it seems if I ever want to work with decimals I’ll need to parseFloat and not parseInt.
Changed the input from a textbox to a selection box. The values for the fractions are decimals in the option tags. Not sure if there’s another way to work with fractions otherwise.
VSCode has Emmet integration, but I’m not sure how to make it spit out increasing number per option line. That would have been great to know. Side note to figure that out later.
Again if you stumble into this blog looking for a simple form to calculate things feel free to steal this and modify it yourself.
<html>
<head>
<form action="" style="background:#e5f2ff">
<script>
var linch, winch, flinch, fwinch, tinch, total, price, temp;
function screens() {
linch = parseFloat(document.getElementById("one").value);
winch = parseFloat(document.getElementById("two").value);
flinch = parseFloat(document.getElementById("fone").value);
fwinch = parseFloat(document.getElementById("ftwo").value);
if (linch && winch) {
temp = document.getElementById("price");
temp.style.display = "block";
linch = linch + flinch;
winch = winch + fwinch;
tinch = linch * winch;
total = tinch / 144;
price = total * 9.00;
document.getElementById("euroscreen").value = (Math.round(price * 100) / 100).toFixed(2);
price = total * 11.00;
document.getElementById("doubleeuroscreen").value = (Math.round(price * 100) / 100).toFixed(2);
price = total * 13.00;
document.getElementById("honycombsunshade").value = (Math.round(price * 100) / 100).toFixed(2);
price = total * 15.00;
document.getElementById("honycombeuroscreen").value = (Math.round(price * 100) / 100).toFixed(2);
price = total * 17.00;
document.getElementById("doublehonycomb").value = (Math.round(price * 100) / 100).toFixed(2);
}
}
</script>
</head>
<body>
<div>
<p>
<label for="one">Length in inches: </label>
<!---- <input type="number" min="8" max="84" id="one" placeholder="Enter a number" required> -->
<select id="one">
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="10">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
</select>
<label for="fone">Fraction</label>
<select id="fone">
<option value="0">0</option>
<option value="0.016">1/16</option>
<option value="0.13">1/8</option>
<option value="0.019">3/16</option>
<option value="0.25">1/4</option>
<option value="0.31">5/16</option>
<option value="0.38">3/8</option>
<option value="0.44">7/16</option>
<option value="0.5">1/2</option>
<option value="0.56">9/16</option>
<option value="0.63">5/8</option>
<option value="0.69">11/16</option>
<option value="0.75">3/4</option>
<option value="0.81">13/16</option>
<option value="0.88">7/8</option>
<option value="0.94">15/16</option>
</Select>
</p>
<p>
<label for="two">Width in inches: </label>
<!-- <input type="number" min="8" max="84" id="two" placeholder="Enter a number" required> -->
<select id="two">
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="10">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
</select>
<label for="ftwo">Fraction:</label>
<select id="ftwo">
<option value="0">0</option>
<option value="0.016">1/16</option>
<option value="0.13">1/8</option>
<option value="0.019">3/16</option>
<option value="0.25">1/4</option>
<option value="0.31">5/16</option>
<option value="0.38">3/8</option>
<option value="0.44">7/16</option>
<option value="0.5">1/2</option>
<option value="0.56">9/16</option>
<option value="0.63">5/8</option>
<option value="0.69">11/16</option>
<option value="0.75">3/4</option>
<option value="0.81">13/16</option>
<option value="0.88">7/8</option>
<option value="0.94">15/16</option>
</Select>
</p>
<p>
<button type="button" onclick="screens()">Screen Pricing</button>
</p>
<hr>
</div>
<div id="price" style="display:none;">
<p>
<label for="euroscreen">Euroscreen Price = $</label>
<input id="euroscreen" readonly>
</p>
<p>
<label for="doubleeuroscreen">Double Euroscreen Price = $</label>
<input id="doubleeuroscreen" type="number" step="0.01" readonly>
</p>
<p>
<label for="honycombsunshade">Honycomb Sunshade Price = $</label>
<input id="honycombsunshade" type="number" step="0.01" readonly>
</p>
<p>
<label for="honycombeuroscreen">Honycomb+Euroscreen Combo Price = $</label>
<input id="honycombeuroscreen" type="number" step="0.01" readonly>
</p>
<p>
<label for="doublehonycomb">Double Honycomb Price = $</label>
<input id="doublehonycomb" type="number" step="0.01" readonly>
</p>
</div>
</form>
</body>
</html>
Leave a Reply