effect-dApp Developer Boilerplate.json

{"title":"dApp Developer Boilerplate","description":"Developer Boilerplate Template that can be used to create your very own Effect Network dApp","instructions":"Add your instructions here.","template":"<!-- 📚 Load in resources: [Vue, Bulma, Effect Network Styling]  -->\n<script src=\"https://unpkg.com/vue@3\"></script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/bulma@0.9.4/css/bulma.min.css\">\n<link href=\"https://app.effect.network/force-defaults.css\" rel=\"stylesheet\" />\n\n<!-- Define template 📔 -->\n<div id=\"app\" class=\"has-text-centered mx-auto\">\n    <span>{{ message }}</span>\n    <div class=\"title\">{{ title }}</div>\n\n    <hr>\n\n\n    <p class=\"has-text-left mx-auto\" style=\"max-width: 600px;\">\n        Here we can present the user with data we want them to work on. <br>\n        Note the use of the <code>${place_holder}</code> notation: <code>&lt;img src=\"${place_holder}\"&gt;</code> <br>\n        We use the notation in order to load in data from a list of data. <br>\n        It is possible to have as many <code>${place_holder}</code> values as you want. <br>\n\n        <br>\n        \n        <ol class=\"has-text-left mx-auto\" style=\"max-width: 600px;\">\n            <li>\n                Go to: <a href=\"https://testnet.effect.network/campaigns/new\" target=\"_blank\" rel=\"noopener noreferrer\">https://testnet.effect.network</a>\n            </li>\n            <li>\n                Register Effect vAccount if you haven't already.\n            </li>\n            <li>\n                Create new Campaign\n            </li>\n            <li>\n                Copy and paste all of the content of this file (<code>index.html</code>) into the template field to see how it will be rendered.\n            </li>\n            <li>\n                Fill in the rest of the information.\n            </li>\n            <li>\n                Create task\n            </li>\n        </ol>\n    </p>\n\n    <code>\n        ${place_holder}\n    </code>\n\n    <hr>\n\n        <img src=\"${place_holder}\" alt=\"Effect Network\" >\n\n    <form class=\"container\" style=\"max-width: 400px;\" @submit.prevent=\"submitHandle\">\n        <div class=\"subtitle\">Form</div>\n\n        <p>\n            When a form is submitted all input fields get read and values are uploaded.\n        </p>\n\n        <br>\n\n        <div class=\"field\">\n            <label for=\"\" class=\"label\">Increment</label>\n            <div class=\"control\">\n                <button  @click.prevent=\"increment\" class=\"button\">Click Me</button>\n                <div>Tally: {{ tally }}</div>\n            </div>\n        </div>\n\n        <br>\n        \n        <div class=\"field\">\n            <label for=\"\" class=\"label\">Name</label>\n            <div class=\"control\">\n                <input v-model=\"inputText\" type=\"text\" class=\"\" placeholder=\"Lorem Ipsum\" />\n            </div>\n        </div>\n\n        <br>\n\n        <div class=\"field\">\n            <label for=\"\" class=\"label\">Select</label>\n            <div class=\"control\">\n                <div class=\"select\">\n                    <select v-model=\"selectOption\">\n                        <option v-for=\"option in options\" :key=\"option\">\n                            {{ option }}\n                        </option>\n                    </select>\n                  </div>\n            </div>\n        </div>\n\n        <br>\n\n        <div class=\"field\">\n            <label for=\"\" class=\"label\">Checkbox</label>\n            <div class=\"control\">\n                <input type=\"checkbox\" />\n            </div>\n        </div>\n\n        <br>\n\n        <button class=\"button\" @click.prevent=\"submitHandle\">Submit</button>\n    </form>\n\n    <hr>\n\n    <div class=\"subtitle\">Any data in the input field will be submitted</div>\n    <div>\n        {{ inputText || \"Lorem Ipsum\" }}\n        <br>\n        {{ inputCheckbox }}\n        <br>\n        {{ selectOption }}\n    </div>\n</div>\n\n<!-- Define desired ofunctionality 🦀 -->\n<script>\n    const { createApp } = Vue;\n    createApp({        \n        data () {\n            return {\n                title: 'Effect Boilerplate',\n                tally: 0,\n                inputText: '',\n                inputCheckbox: false,\n                options: ['Aruba', 'Bonaire', 'Curacao'],\n                selectOption: null\n            }\n        },\n        methods: {\n            increment () {\n                this.tally += 1\n            },\n            submitHandle () {\n              parent.postMessage({'task': 'submit', 'values': {\n                \"tally\": this.tally, \n                \"text\": this.inputText, \n                \"check\": this.inputCheckbox, \n                \"selectOption\": this.selectOption\n              }}, '*');\n            }\n        }\n        \n    }).mount('#app')\n\n</script>","image":"","category":"annotations","example_task":{"place_holder":"https://effect.network/img/logo/logo.png"},"version":1.1,"webhook":null,"reward":"4","estimated_time":"60"}