Create a simple Delivery Calculator

 Assalamualaikum,

As previous post, i mentioned that i wanted to create a simple distance calculator for own usage.

Of course i didn't do it by myself. I watched this tutorial and download the code to start coding. 

And obviously i need to customize and do a little tweaks to get the result that i wanted. Plus i apply the code into Wordpress framework by extending the Child Theme

What i did was, i separate the JS function from the html code. Adding the JS script and enqueued it.

Steps. 

Introduce JS script, 

sudo vim assets/js/calculate_distance.js

 

script content

the additional changes that i did was, adding delivery charge calculation

for the front end, i create a page template that later loaded in Wordpress page, checkout my previous post

the page template content

the changes that i made is on the Google Places API key value, include new labels that displays the result after the user submit the form / click "Calculate" button, preset the input value for "from_places" and disabled the input entry.

you can try the calculator live on our website :P https://4nutz.tk/hand-delivery-calculator/

 below is the screenshot of our Hand Delivery Calculator!