<template>
    <div>
        <div class="greeting">Hello {{name}}{{exclamationMarks}} :D</div>
        <button @click="decrement">-</button>
        <button @click="increment">+</button>
    </div>
</template>

<script lang="ts">
import Vue from "vue";
import Axios from "axios";

export default Vue.extend({
    props: ['name', 'initialEnthusiasm'],
    data() {
        return {
            enthusiasm: this.initialEnthusiasm,
        }
    },
    methods: {
        increment() { this.enthusiasm++; },
        decrement() {
            if (this.enthusiasm > 1) {
                this.enthusiasm--;
            }
            Axios.get("https://jsonplaceholder.typicode.com/posts/1").then(resp => {
                if (resp == null) {} else {
                console.log(resp.data);
            }}).catch(() => console.log("Uh ohhh"));
            
        },
    },
    computed: {
        exclamationMarks(): string {
            return Array(this.enthusiasm + 1).join('!');
        }
    }
});
</script>

<style>
.greeting {
    font-size: 20px;
}
</style>