Why is my Javascript calculator not functioning properly?

[j2021c]

I'm trying to add this calculator I've created and I can't seem to get the JS to work. I add it to theme.js and theme.liquid but can't seem to get it to work. This is the code: https://codepen.io/lab13/pen/JjyodLv

Any tips? 

[OpenThinking]

Hi there,
Jack from OpenThinking here!

You need to load jQuery in order for it to work.

Try this. Place the following code inside the *.liquid file of your choice.

<style>
@charset "UTF-8";*{box-sizing:border-box;}.irs-max,.irs-min{color:#fff!important;background-color:transparent!important}.finance-calculator{width:500px;background:#6b7885;border-radius:5px;padding:20px;border:1px solid #6b7885}h4.calculator{text-align:center;border-color:#fff}.form-line label{display:block;margin:0;text-align:left;font-weight:700;font-size:12px;color:#fff}.form-line input,.form-line select{width:100%;font-size:16px;padding:10px;margin-bottom:20px}.form-line input{display:block;border:1px solid #d9d9d9;border-radius:5px;color:#4d5a67}.form-line select{height:40px;text-align:center}.slider-value{font-weight:700}.range .sliderValue span{background-color:#ff9c99;border-top-color:#ff9c99;font-style:normal;position:absolute;text-align:center;width:70px;color:#000;font-weight:500;top:-28px;transform:translateX(-50%) scale(1);transform-origin:bottom;transition:transform .3s ease-in-out;line-height:23px;z-index:2}span.deposamount,span.loanamount{color:#fff}.range .sliderValue{position:relative;width:100%}.range .sliderValue span::before{transition:border-top-color .2s;position:absolute;bottom:-10px;left:calc(50% - 10px);content:"";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid;border-top-color:#ff9c99}.range .sliderValue span::after{content:" Years"}.form-line-prefixed:before{content:"£";left:5px;bottom:12px}.form-line-prefixed1{padding-left:30px;position:relative;margin-bottom:10px}.fnticns,.form-line-prefixed:before{font-size:20px;position:absolute;color:#fff}.fnticns{top:9px;left:1px}.form-line-prefixed{padding-left:30px;position:relative;margin-bottom:20px}.irs-min{display:none}input[type=submit]{background:#ff9c99;color:#000;margin-top:10px;font-weight:700;text-transform:uppercase;font-size:16px;cursor:pointer;border:0}.apr_rate{text-align:center;color:#fff}.have_result{border-top:1px solid #d9d9d9;padding-top:20px}.result_line{text-align:center;color:#fff}.result_line h4{margin-bottom:10px;color:#fff}.result_line h4 em{display:block;font-size:.6em;font-style:light}.result_figure{font-size:28px;font-weight:700;color:#fff}.result_recalculate{margin-top:10px;border-top:1px solid #d9d9d9;padding-top:20px;text-align:center;text-transform:uppercase;cursor:pointer;color:#fff}@media screen and (max-width:600px){.finance-calculator{margin:50px auto;width:100%!important;background:#6b7885;border-radius:20px;padding:20px;border:1px solid #dedede}}.deposit_amount,.initial_cost{-webkit-appearance:none;width:100%;background:#d9e0e3;outline:0;opacity:1;-webkit-transition:.2s;transition:opacity .2s}.deposit_amount::-webkit-slider-thumb,.initial_cost::-webkit-slider-thumb,.total_months::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;background:#ff9c99;cursor:pointer}.total_months{margin-top:40px;-webkit-appearance:none;width:100%;background:#d9e0e3;outline:0;opacity:1;-webkit-transition:.2s;transition:opacity .2s}
</style>

<div class='finance-calculator'>
   <form>
      <div class='calc_area'>
         <div class='form-line form-line-prefixed'>
            <label for='initial_cost'>Loan Amount: <span class="loanamount"> </span></label> 
            <input value="900" id='initial_cost' name='initial_cost' class='initial_cost' type='range' min="900" max="10000" value="900" tabindex="3"> 
         </div>
         <div class='form-line form-line-prefixed'>
            <label for='deposit_amount'>Deposit Amount: <span class="deposamount"> </span></label>
            <input value="0" id='deposit_amount' name='deposit_amount' class='deposit_amount' type='range' min="10" max="90" value="90" tabindex="3"> 
         </div>
         <div class='form-line form-line-prefixed1'>
            <i class="fa fa-clock-o fnticns" aria-hidden="true"></i>
            <div class="range">
               <div class="sliderValue">
                  <span class="myspans" id="span1127254694131" style="left:2%;">1</span>
               </div>
               <input value="1" id='total_months' name='total_months' type='range' class='total_months' min="1" max ="3"> 
            </div>
         </div>
      </div>
      <!--end calc_area-->
      <div class='apr_rate'>APR <span id='apr'>9.9</span>%</div>
      <div class='form-line'>
         <input id='form_submit' type="submit" value="Calculate" />
      </div>
   </form>
   <div class='calc_result'></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"  crossorigin="anonymous"></script>
<script>
$(document).ready(function(){$(document).on("input","#initial_cost",function(){$(".loanamount").html("£ "+$(this).val())}),$(document).on("input","#deposit_amount",function(){$(".deposamount").html($(this).val()+"%")}),$(document).on("input","#total_months",function(){$(".myspans").html(""+$(this).val());var e=parseInt($(this).val())-1;e*=50,$(".myspans").css("left",e+"%")})});const submitBtn=document.querySelector("#form_submit"),resultArea=document.querySelector(".calc_result");function calculate(e){console.dir(e),e.target&&e.preventDefault();let t=document.querySelector("#initial_cost").value.replace(/\D/g,""),l=document.querySelector("#deposit_amount").value.replace(/\D/g,""),n=document.querySelector("#total_months").value.replace(/\D/g,"");t=Number(t),l=Number(l),n=Number(n),n*=12,t<(l=l*t/100)&&(alert("Deposit amount cannot be more than the vehicle price"),exit),console.log(`vehicle price = ${t}, deposit amount = ${l}, Payment Months = ${n}`);var a=9.9;n<=12&&(a=0);let o=(t-l)/100*a,s=n/12;console.log(o),console.log(s);let u=(t-l+o*s)/n;u=u.toFixed(2),console.log(u);let c=(t-l)/n;c=c.toFixed(2);let i=t+o*s;resultArea.classList.add("have_result"),resultArea.innerHTML=`<div class='result_line'><h4>Total Payable Per Month</h4><span class='result_figure'>£${u} for ${n} Months</span></div>`,resultArea.innerHTML+=`<div class='result_line'><h4>Total Amount to be Paid <em>(Including Deposit)</em></h4> <span class='result_figure'>£${i}</span></div>`,resultArea.innerHTML+=`<div class='result_line'><h4>Total Cost of Finance</h4><span class='result_figure'>£${i-t}</span></div>`,resultArea.innerHTML+="<div class='result_recalculate' onClick=\"calculate(this)\">Recalculate</div>"}submitBtn.addEventListener("click",calculate);
</script>

let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.