Identicon

README.md

Identicon

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":"","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":true,"selected":true,"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":false,"content":""},{"id":5,"parentId":3,"name":"style.css","path":"/src/style.css","type":"file","mimeType":"css","isRoot":false,"open":true,"selected":false,"content":""}],"experimentId":"5f7733a589e2f700171ad33a"}

css.css

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

html.html

<div class='App' id="root">
  <h3>Identicon Generator</h3>

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

  <div>
    Identicon:
    <div v-html="identicon" />
  </div>

</div>

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);
    },
  },
});