Identicon 2

README.md

Identicon 2

This Gist was generated by Contrived.

Do not modify the metadata file if you want to open in Contrived again. Otherwise, it is safe to delete.

Happy Hacking!

contrivedExperimentMetadata.json

{"user":"5f0c542a4a2ce5e528e01fdf","templateVersion":"1","templateId":"vuejs","resources":["<meta charset=\"UTF-8\" />","<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">"],"dependencies":[{"name":"vue","version":"2.6.11","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"},{"name":"jdenticon","type":"js","url":"https://cdn.rawgit.com/dmester/jdenticon/5bbdf8cb/dist/jdenticon.min.js","version":"2.1.0"}],"files":[{"id":1,"parentId":0,"name":"public","path":"/public","type":"folder","isRoot":true,"selected":false,"expanded":false,"children":[{"id":2,"name":"index.html"}]},{"id":2,"parentId":1,"name":"index.html","path":"/src/index.html","type":"file","mimeType":"html","isRoot":false,"open":false,"selected":false,"content":""},{"id":3,"parentId":0,"name":"src","path":"/src","type":"folder","isRoot":true,"selected":false,"expanded":true,"children":[{"id":4,"name":"index.js"},{"id":5,"name":"styles.css"}]},{"id":4,"parentId":3,"name":"index.js","path":"/src/index.js","type":"file","mimeType":"es6","isRoot":false,"open":true,"selected":true,"content":""},{"id":5,"parentId":3,"name":"style.css","path":"/src/style.css","type":"file","mimeType":"css","isRoot":false,"open":false,"selected":false,"content":""}],"experimentId":"5f77a384d463280017a95e53"}

css.css

.App {
	font-family: sans-serif;
	text-align: center;
}

html.html

<div id="root" />

javascript.js

const app = new Vue({
  el: '#root',
  data: { // initial state
    textInput: '',
  },
  methods: { // ways we can change our state
    onInputChange: function(event) {
      this.textInput = event.target.value;
    }
  },
  computed: { // turn data into viewable values
    identicon: function() {
      return jdenticon.toSvg(this.textInput, 200);
    },
  },
  template: `
    <div class='App'>
      <h3>Identicon Generator</h3>

      <div style="height: 50px">
        Input:
        <input v-on:input="onInputChange" />    
      </div>

      <div>
        Identicon:
        <div v-html="identicon" />
        {{ textInput }}
      </div>
    </div>
  `
});