Brook  Hudson

Brook Hudson

1624874280

Quiz App with Vue 3, Tailwind and Open Trivia API Part 6: End of Quiz Overlay

Build a Quiz App with Vue and Tailwind. An intermediate level project for learning vue 3

You would learn:
Create an end of quiz overlay

Source Code: https://github.com/somteacodes/quizappvue

Timestamps
0:00​-0:16​ What we are building
0:16-1:06 Create overlay component
1:06-03:18​ Import component
03:18-11:35 Style component
11:35​-13:25​ - Show overlay at end of quiz
13:25​-13:47 Outro

#vue #tailwind #api

What is GEEK

Buddha Community

Quiz App with Vue 3, Tailwind and Open Trivia API Part 6: End of Quiz Overlay
Brook  Hudson

Brook Hudson

1624900080

Quiz App with Vue, Tailwind and Open Trivia API Part 3: Load questions

Build a Quiz App with Vue and Tailwind. An intermediate level project for learning vue

You would learn

  1. Cycle through array of questions to load next question on user click
  2. Reset CSS styles when a questions is answered
  3. Add delay between answered question and next question

Source Code: https://github.com/somteacodes/quizappvue

Timestamps
0:00-1:15 What we are building
1:15-6:29 Load next question when option selected
6:29-9:32 Reset CSS styles
9:32-10:56 Add delay between questions
10:56-11:19 - Outro

#quiz #vue #tailwind #pi #open trivia api

Brook  Hudson

Brook Hudson

1624874280

Quiz App with Vue 3, Tailwind and Open Trivia API Part 6: End of Quiz Overlay

Build a Quiz App with Vue and Tailwind. An intermediate level project for learning vue 3

You would learn:
Create an end of quiz overlay

Source Code: https://github.com/somteacodes/quizappvue

Timestamps
0:00​-0:16​ What we are building
0:16-1:06 Create overlay component
1:06-03:18​ Import component
03:18-11:35 Style component
11:35​-13:25​ - Show overlay at end of quiz
13:25​-13:47 Outro

#vue #tailwind #api

Brook  Hudson

Brook Hudson

1625464740

Quiz App with Vue, Tailwind and Open Trivia API Part 1(A): Quiz UI Design with Tailwind

Build a Quiz App with Vue and Tailwind. An intermediate level project for learning vue

You would learn

Setting up Vue with tailwind
Design the Quiz app UI
Dynamically change classes based on conditions
Fetch data from API
  1. Create and Style the User Interface. Part 1(A)
    In this video I would cover the design part of the quiz app, using tailwind. Starting with the tailwind set up.

Source Code: https://github.com/somteacodes/quizappvue
Timestamps
0:00-0:52 What we are building
0:52-2:25 Install Vue Cli and Create Project
2:25-7:52 Install and set up Tailwind CSS
7:52-12:37 Question section
12:37-23:28 Options section
23:28-24:45 Progress section
24:45-27:02 Timer section
27:02-27:40 Score section
27:40-33:49 Top image section
33:49-34:07 Next video introduction

Twitter: https://twitter.com/somteacodes
Remember to install VueDev tools, its a browser extension, so just google it

#quiz #vue #tailwind #trivia api

Brook  Hudson

Brook Hudson

1624885260

Quiz App with Vue 3, Tailwind and Open Trivia API Part 5: Countdown timer

Build a Quiz App with Vue and Tailwind. An intermediate level project for learning vue 3

You would learn

  1. Create a countdown timer
  2. Use countdown timer to simulate CSS animation

Source Code: https://github.com/somteacodes/quizappvue

Timestamps
0:00​-0:22​ What we are building
0:22​-1:53 How countdown timer would be implemented
1:53​-04:28​ Timer ref
04:28​​-07:25 Countdown using SetInterval

07:25​-10:00​ - Stop Countdown timer with ClearInterval
10:00-12:08 Reset Timer when a response is chosen
12:08-12:35 Outro

#quiz #vue 3 #tailwind #api

Brook  Hudson

Brook Hudson

1625461080

Quiz App with Vue, Tailwind and Open Trivia API Part 1(B):Custom Tailwind CSS Classes

Build a Quiz App with Vue and Tailwind. An intermediate level project for learning vue

You would learn

Simplify your design
To group classes /styles in Tailwind
Plan ahead for API

  1. Create and Style the User Interface. Part 1(B)
    In this video I would cover how to group styles and make the options look different by just changing one (1) class name

Source Code: https://github.com/somteacodes/quizappvue
Timestamps
0:00-0:34 What we are building
0:34-3:12 Add custom css and group class
3:12-6:39 Group classes for default option
6:39-8:55 Group classes for wrong option
8:55-10:22 Group classes for correct option
10:22-11:17 Class name cleanup
11:17-14:00 Use same option for different option state
14:00-14:15 Outro

Remember to install VueDev tools, its a browser extension, so just google it

=======Reach me=======
Twitter: https://twitter.com/somteacodes
Email: somteacodes@gmail.com

#quiz #vue #tailwind #trivia api