JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<script src="https://unpkg.com/moonjs"></script>
<div id="app">
 <h1>{{greeting}}</h1>
 <p>Enter a key and value and press enter</p>
 <label>Key:<input m-model="key" m-on:keydown.enter="enter"></label>
 <label>Value:<input m-model="val" m-on:keydown.enter="enter"></label>
 <button m-on:click="makeObject">Make Object</button>
 <div m-if="error" style="color:red">{{error}}</div>
 <pre>{{json(stuff)}}</pre>
</div>

SCSS

pre{
  background:white;
  padding:10px;
  box-shadow:0px 1px 3px rgba(0,0,0,0.5)
}

JavaScript

new Moon({
	el:'#app',
  data:{
  	greeting:'Hello Moon!',
    key:'stuff.test',
    val:'test',
    stuff:{}
  },
  methods:{
  	enter(){
    	try{
      	this.set(this.get('key'), this.get('val'))
        this.set('error', false)
      } catch(err){
      	this.set('error',err.message)
      }
    },
    makeObject(){
    	try{
      	this.set(this.get('key'), {})
        this.set('error', false)
      } catch(err){
      	this.set('error',err.message)
      }    	
    },
    json(obj){
    	return JSON.stringify(obj, null, ' ')
    }
  }
})