/vue-fundamentals-two

Vue Learning Project 2

Primary LanguageHTML

Vue Learning Project 2

View on Github Pages https://jonburdon.github.io/vue-fundamentals-two/

Learning Fundamentals of Vue Frameworks - part 2

Project Aims

  1. Demonstrate key fundamentals of a javascript framework in context of vue.js
  2. Refactor and extend tutorial code

Developer Aims

  1. Develop understanding of javascript frameworks at a fundamental level
  2. Use minimum technologies possible to explore Vue eg no cli or node.js to build projects
  3. Start with a very simple code base, and then refactor / repurpose.

Technologies

  1. HTML
  2. CSS
  3. Javascript
  4. Vue.js

Mini Project Aim

Create a snap game using cat emojis by refactoring and using ideas from the tutorial code.

Possible Project Plan for Emoji Snap

  1. Display 3 different cat images
  2. Display the above images in a random order
  3. Display one of the images again as a special 'snap' image
  4. Make the 3 images clickable, the one which matches the 'snap' image when clicked will generate a win
  5. Display the 3 images one at a time, with a 3 second pause

Current Issues

  1. Stuck on step 1 of the plan! How to display 3 different images - See emojisnap2.js Line 9
  2. Similar to above, how to display the data as html in line 3 of emojisnap3.js
  3. In emojisnap.html This is a refactored version of schrodingers-div.html to display one unclickable random cat emoji. In line 107 it also creates a variable matched to the index of the selected emoji. The idea was to use that variable to match the emoji selected.

Useful resources

  1. https://vuejs.org/v2/guide/
  2. Chrome Vue Devtools Extension
  3. Use this example Vue App on jsfiddle https://jsfiddle.net/chrisvfritz/50wL7mdz/

Credits

All code snippets originated from Vue Tutorials on:

Vue Tutorials from Official Vue Docs https://scrimba.com/p/pXKqta/