ChristopherHButler · February 23, 2021 06:48
diff --git a/README.md b/README.md
diff --git a/contrivedExperimentMetadata.json b/contrivedExperimentMetadata.json
 {"user":{"id":"5fab1a234b1e8dd7b26ed000","name":"Christopher Harold Butler","avatar":"https://avatars2.githubusercontent.com/u/29358086?v=4"},"templateVersion":"1","templateId":"vuejs","resources":["<meta charset=\"UTF-8\" />","<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">","<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css\" integrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\" crossorigin=\"anonymous\">"],"dependencies":[{"name":"vue","version":"2.6.11","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"},{"name":"axios","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js","version":"0.21.0"}],"files":[{"id":1,"parentId":0,"name":"public","type":"folder","isRoot":true,"selected":false,"expanded":true,"children":[{"id":2}]},{"id":2,"parentId":1,"name":"index.html","type":"file","mimeType":"html","isRoot":false,"open":false,"selected":false,"content":"<div class='App' id=\"root\" />"},{"id":3,"parentId":0,"name":"src","type":"folder","isRoot":true,"selected":false,"expanded":true,"children":[{"id":4},{"id":5},{"id":7}]},{"id":4,"parentId":3,"name":"index.js","type":"file","mimeType":"es6","isRoot":false,"isEntry":true,"open":true,"selected":true,"content":"\nimport SearchBar from 'SearchBar.js';\nimport VideoDetail from 'VideoDetail.js';\nimport VideoList from 'VideoList.js';\nimport VideoListItem from 'VideoListItem.js';\n\n\n\nconst app = new Vue({\n  el: '#root',\n  name: 'App',\n  data() {\n    return {\n      videos: [],\n      selectedVideo: null,\n    };\n  },\n  mounted() {\n    // this.onTermChange('muse madness');\n  },\n  methods: {\n    onTermChange(searchTerm) {\n      axios.get('https://www.googleapis.com/youtube/v3/search', {\n        params: {\n          key: API_KEY,\n          type: 'video',\n          part: 'snippet',\n          q: searchTerm,\n        }\n      }).then(res => {\n        this.videos = res.data.items;\n        this.selectedVideo = res.data.items[0];\n      });\n    },\n    onVideoSelect(video) {\n      this.selectedVideo = video;\n    }\n  },\n  template: `\n    <div class=\"App container\">\n      <h1>VueTube</h1>\n      <SearchBar @termChange=\"onTermChange\" />\n      <div class=\"row\">\n        <VideoDetail :video=\"selectedVideo\" />\n        <VideoList @videoSelect=\"onVideoSelect\" :videos=\"videos\" />\n      </div>\n    </div>\n  `,\n});","secrets":[{"id":"SAqS2yRVD","key":"API_KEY","value":"'AIzaSyAFPbefcDTjeCcmNd06VmZfewoHVGJCT1I'"}]},{"id":5,"parentId":3,"name":"styles.css","type":"file","mimeType":"css","isRoot":false,"open":false,"selected":false,"content":".App {\n\tfont-family: sans-serif;\n\ttext-align: center;\n}\n\ninput {\n  width: 100%\n}\n\n.Details {\n  margin-top: 10px;\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.SearchContainer {\n  text-align: center;\n  margin: 20px;\n}\n\nli {\n  display: flex;\n  cursor: pointer;\n}\nli:hover {\n  background-color: #eee;\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n}"},{"id":6,"parentId":0,"name":"README.md","type":"file","mimeType":"markdown","isRoot":true,"open":false,"selected":false,"content":"\n\n## Experiment Title\n> simple, one-line description\n\n\n### Experiment Status\n> | Finished | In progress | Abandoned\n> | Working | Kindof working | Broken\n\n\n### Purpose\n - [ ] Proof of concept\n - [ ] Prototype\n - [x] No purpose, just fun\n\n> If you want to take a more scientific approach consider including the following sections\n\n#### Research\n - What questions are you trying to answer or discover?\n\n#### Hypothesis\n - What do you think will happen?\n\n#### Results\n - What happened in the experiment?\n\n#### Conclusion\n - Was the hypothesis correct ?\n\n### Built With\n> list the framework or libraries you used\n\n- react + styled components\n\n### Features\n> what's so cool about this experiment ?\n\n - [x] feature one\n - [x] feature two\n\n### To Do:\n> is there anything left to do ?\n\n - [x] task 1\n - [x] task 2\n\n\n### How To Use / Example\n> how can people use or play with your experiment ?\n\n\n## API / Components\n> do you want to say anything about the components or code in this experiment ?\n\nThe `App` component is where the magic happen!\n```\nconst App = () => {\n  return (\n    <div className='App'>\n      <h1>Hello Contrived!</h1>\n      <h2>Start editing to create something magic!</h2>\n    </div>\n  );\n};\n\nexport default App;\n```\n\n\n## Author / Feedback\n> give yourself a little credit !\n\nChristopher Harold Butler ([ChristopherHButler](https://github.com/ChristopherHButler))\n\n## Inspiration / Acknowledgements / Thanks\n> did anyone help you with this / did something inspire you to make this ?\n\nI just really wanted to make my own [https://codesandbox.io/](https://codesandbox.io/)\n\n## License\n> APACHE | BSD | MIT | GNU GPL | ?\n> Need help deciding? Check out [https://choosealicense.com/](https://choosealicense.com/)\n"},{"id":7,"parentId":3,"name":"components","type":"folder","isRoot":false,"selected":false,"expanded":true,"children":[{"id":8},{"id":9},{"id":10},{"id":11}]},{"id":8,"parentId":7,"name":"SearchBar.js","type":"file","mimeType":"es6","isRoot":false,"isEntry":false,"open":false,"selected":false,"content":"\n\nVue.component('SearchBar', {\n\tmethods: {\n    onInput: function(event) {\n      this.$emit('termChange', event.target.value);\n    }\n  },\n\ttemplate: `\n\t\t<div class=\"SearchContainer\">\n    \t<input @input=\"onInput\" />\n  \t</div> \n\t`,\n});","secrets":[]},{"id":9,"parentId":7,"name":"VideoDetail.js","type":"file","mimeType":"es6","isRoot":false,"isEntry":false,"open":false,"selected":false,"content":"\n\nVue.component('VideoDetail', {\n  props: ['video'],\n  computed: {\n    videoUrl() {\n      const videoId = this.video.id.videoId;\n      return `https://www.youtube.com/embed/${videoId}`;\n    }\n  },\n\ttemplate: `\n\t\t<div class=\"col-md-12\" v-if=\"video\">\n      <div class=\"embed-responsive embed-responsive-16by9\">\n        <iframe class=\"embed-responsive-item\" :src=\"videoUrl\" />\n      </div>\n      <div class=\"Details\">\n        <h4>{{ video.snippet.title }}</h4>\n        <p>{{ video.snippet.description }}</p>\n      </div>\n    </div>\n\t`,\n});","secrets":[]},{"id":10,"parentId":7,"name":"VideoList.js","type":"file","mimeType":"es6","isRoot":false,"isEntry":false,"open":false,"selected":false,"content":"\n\nVue.component('VideoList', {\n\tprops: ['videos'],\n  methods: {\n    onVideoSelect(video) {\n      this.$emit('videoSelect', video);\n    }\n  },\n\ttemplate: `\n\t\t<ul class=\"list-group col-md-12\">\n      <VideoListItem\n        :key=\"video.etag\"\n        v-for=\"video in videos\"\n        :video=\"video\"\n        @videoSelect=\"onVideoSelect\"\n      />\n    </ul>\n\t`,\n});","secrets":[]},{"id":11,"parentId":7,"name":"VideoListItem.js","type":"file","mimeType":"es6","isRoot":false,"isEntry":false,"open":true,"selected":false,"content":"\n\nVue.component('VideoListItem', {\n\tprops: ['video'],\n  computed: {\n    thumbnailUrl() {\n      return this.video.snippet.thumbnails.default.url;\n    }\n  },\n  methods: {\n    onVideoSelect() {\n      this.$emit('videoSelect', this.video);\n    }\n  },\n\ttemplate: `\n\t\t<li class=\"list-group-item\" @click=\"onVideoSelect\">\n      <img class=\"mr-3\" :src=\"thumbnailUrl\" />\n      <div class=\"media-body\">\n        {{ video.snippet.title }}\n      </div>\n    </li>\n\t`,\n});","secrets":[]}],"experimentId":"5fbebf5e32f2800017fdc99c"}