In this workshop, we are building a little Harry Potter Movie Quiz (https://55ygd.csb.app/). You will learn the basics about Vue components, how data binding is done in Vue, and how to perform simple REST API calls.
The workshop idea is inspired by Dmytro Barylo from Ukraine who made the Harry Potter Movie Quiz. We would like to take this opportunity to thank Dmytro Barylo for the great idea on which basis we actually developed this workshop.
Made by Mary Vokicic (@burgmary), with help from Ilithya (@ilithya_net) and Steffi (@Qbrid_).
For the workshop, you will need your laptop. For developing the quiz we are going to use CodeSandbox which is a great instant IDE and prototyping tool for rapid web development. It gives us the benefit to concentrate on learning Vue.js and not spending too much time setting up a Vue.js project locally on the laptop. That’s one thing we are going to introduce in future workshops when we have more time for it. This time we'll stick to CodeSandbox.
The workshop is separated into several steps.
- Step #1 - Setting up the Vue App with CodeSandbox
- Step #2 - Create the first own Vue component "Quiz.vue"
- Step #3 - Using the Quiz data
- Step #4 - Displaying possible movie options to user
- Step #5 - Evaluate the option which was clicked
- Step #6 - Proceed with next question
- Step #7 - Introducing usage of store and saving data in local storage
- Step #8 - Create the score view