JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="https://unpkg.com/bootstrap@5/dist/css/bootstrap.min.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app" class="p-5">

    <div class="input-group mb-3">
        <label for="diameter" class="input-group-text small col-3">Durchmesser</label>
        <input type="number" v-model="diameter" id="diameter" class="form-control" @click="calculate">
        <span class="input-group-text">cm</span>
    </div>

    <div v-if="debug" class="input-group mb-3">
        <label for="radius" class="input-group-text col-3">Radius</label>
        <input type="text" v-model="radius" id="radius" class="form-control" disabled>
        <span class="input-group-text">cm</span>
    </div>

    <div class="input-group mb-3">
        <label for="height" class="input-group-text col-3">Höhe</label>
        <input type="number" v-model="height" id="height" class="form-control" @click="calculate">
        <span class="input-group-text">cm</span>
    </div>

    <div v-if="debug" class="input-group mb-3">
        <label for="base" class="input-group-text col-3">Grundfläche</label>
        <input type="text" v-model="base" id="base" class="form-control" disabled>
        <span class="input-group-text">cm²</span>
    </div>

    <div v-if="debug" class="input-group mb-3">
        <label for="volume" class="input-group-text col-3">Faktor</label>
        <input type="number" v-model="factor" id="factor" class="form-control">
        <span class="input-group-text">€</span>
    </div>

    <div class="input-group mb-3">
        <label for="address" class="input-group-text col-3" @click="getDistance">Adresse</label>
        <input type="text" v-model="address" id="address" class="form-control" @change="getDistance">
    </div>

    <table class="table">
        <tbody>
            <tr>
                <th>Grundpreis</th>
                <td class="text-end">{{...

JavaScript

// https://creativecommons.tankerkoenig.de/

const tankerKoenigApiUrl = 'https://creativecommons.tankerkoenig.de/json/list.php';
const tankerKoenigApiKey = '58d26848-b416-cebf-ca4b-e74aaafc4359';

Vue.createApp({
    data() {
        return {
            debug: false,
            diameter: 50,
            height: 5,
            factor: 0.010186,
            address: 'Neubrandenburg',
            addresses: [],
            distance: 0,
            driving_costs: 0,
            consumption: 6.5,
            fuel_price: 0,
            startpoint: {
                lat: 52.604658,
                lng: 13.127588,
            },
            endpoint: {
                lat: null,
                lng: null,
            }
        }
    },
    computed: {
        basic_price() {
            return this.volume * this.factor;
        },
        radius() {
            return this.diameter / 2;
        },
        base() {
            return Math.PI * Math.pow(this.radius, 2);
        },
        volume(){
            return this.base * this.height;
        },
        driving_costs(){
            return this.distance * this.fuel_price;
        },
        total_price() {
            return this.basic_price + this.driving_costs;
        }
    },
    watch: {
        diameter(value){
            this.calculate();
        },
        height(value){
            this.calculate();
        },
    },
    mounted() {
        // this.getFuelPrice();
        this.getDistance();
    },
    methods: {
        calculate() {
            this.volume = this.base * this.height;
        },
        getFuelPrice() {
            let $this = this;

            let params = {
                lat: $this.startpoint.lat,
                lng: $this.startpoint.lng,
                rad: 5,
                sort: 'dist',
                type: 'diesel',
                apikey: tankerKoenigApiKey,
            };

            axios.get(tankerKoenigApiUrl, {params}).then(function (response) {            
           ...