JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
      <v-card>
        <v-toolbar
          dark
          color="primary"
        >
          <button
            icon
            dark
            @click="closeDialog"
          >
            mdi-close
          </button>
          <v-toolbar-title>Code Generator</v-toolbar-title>
          <!-- <v-spacer></v-spacer>
          <v-toolbar-items>
            <v-btn
              dark
              text
              @click="closeDialog"
            >
              Copy to Clipboard
            </v-btn>
            <v-btn
              dark
              text
              @click="closeDialog"
            >
              Download
            </v-btn>
          </v-toolbar-items> -->
        </v-toolbar>
        <v-list
          three-line
          subheader
        >
          <v-subheader>Customize the variables below to enable your {{selectedHardware}} project to connect to your Social Genius API feed. Below you will be able to setup your Wifi (SSID and network password) connection:</v-subheader>
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title>SSID</v-list-item-title>
              <v-list-item-subtitle>Enter the SSID of the Wifi connection that you would like your {{selectedHardware}} to use access your "Social Genius." :) </v-list-item-subtitle>

        
          <input
            id="ssid-input"
            v-model="form.ssid"
            type="text"
            required
            placeholder="Enter you Wifi SSID"
          >

            </v-list-item-content>
          </v-list-item>
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title>Password</v-list-item-title>
              <v-list-item-subtitle>Enter the password of the Wifi connection you would like your {{selectedHardware}} to use to connect to your feed's API.</v-list-item-subtitle>
              
              <input
           ...

JavaScript

const App = {
    components: {
      VCard: { template: '<div><slot/></div>' },
      VToolbar: { template: '<div><slot/></div>' },
      VToolbarTitle: { template: '<div><slot/></div>' },
      VList: { template: '<div><slot/></div>' },
      VSubheader: { template: '<div><slot/></div>' },
      VListItem: { template: '<div><slot/></div>' },
      VListItemContent: { template: '<div><slot/></div>' },
      VListItemTitle: { template: '<div><slot/></div>' },
      VListItemSubtitle: { template: '<div><slot/></div>' },
      
    },

    name: 'CodeGenerator',
    data: () => ({
      selectedHardware: 'Arduino',
      showCode: false,
      form: {
        ssid: '',
        password: ''
      }
    }), 
    // props: ['close'],
    created() {
      console.log(this.arduino)
    },
    methods: {
      closeDialog() {
        this.$emit('close-dialog');
      },
      toggleCode() {
        this.showCode = !this.showCode
      }
    },
    watch:{
      form(val) {
        this.form = val;
        this.$nextTick()
      }
    },
    computed: {
      arduino(){
        return `// ----------------------------

// Additional Libraries - each one of these will need to be installed.
// ----------------------------

#include <ArduinoJson.h> // Library used for parsing Json from the API responses
#include <MD_MAX72xx.h>  // Library used for interfacing with the 8x8x4 led matrix
#include <MD_Parola.h>   // Library used for displaying info on the matrix
#include <NTPClient.h>   // Library to get the current time
#include <WiFiUdp.h>     // Library to get the time from a udp server


// Search for "Arduino Json" in the Arduino Library manager
// https://github.com/bblanchon/ArduinoJson

//------- Replace the following! ------
char ssid[] = "${this.form.ssid || ''}";       // your network SSID (name)
char password[] = "${this.form.password || ''}";  // your network key

const int timeDelay = 3000; // Delay between Time / Day / Subs / Views
const int fadeSpeed = 40;   //...