playlistduration

Weather App Build (with Vue 3 & Tailwind CSS)

by Net Ninja · 15 videos

Total watch time

2h 1m

at 1× speed · exactly 2 hours, 1 minute, 21 seconds at 1×

1×2h 1m 21s
1.25×1h 37m 5s
1.5×1h 20m 54s
1.75×1h 9m 21s
2×1h 41s
Average video8m 5s
Longest16m 48s
Shortest2m 36s
Compare Open on YouTube JSON

Plan to finish

About 3 days at an hour a day

Pick a daily pace and the days you'll watch. Ticked videos are skipped.

Days

At one hour a day, every day, this playlist takes about 3 days. Turn on JavaScript to plan around your week.

Videos (15)

2h 1m in total · tick what you've watched

Tick videos you've watched — progress is saved in this browser.

Videos to
Watched
1 Weather App Build (Vue 3 & Tailwind) #1 - Introduction 4:41 2022-08-10
2 Weather App Build (Vue 3 & Tailwind) #2 - Tailwind Setup 4:01 2022-08-10
3 Weather App Build (Vue 3 & Tailwind) #3 - Navigation 8:13 2022-08-11
4 Weather App Build (Vue 3 & Tailwind) #4 - Reusable Modal 15:41 2022-08-12
5 Weather App Build (Vue 3 & Tailwind) #5 - City Search 13:11 2022-08-15
6 Weather App Build (Vue 3 & Tailwind) #6 - Handling API Errors 2:36 2022-08-17
7 Weather App Build (Vue 3 & Tailwind) #7 - Redirect Route 6:24 2022-08-17
8 Weather App Build (Vue 3 & Tailwind) #8 - Handling Async Data 9:49 2022-08-18
9 Weather App Build (Vue 3 & Tailwind) #9 - City View Layout 16:48 2022-08-19
10 Weather App Build (Vue 3 & Tailwind) #10 - Adding Cities to Local Storage 6:27 2022-08-22
11 Weather App Build (Vue 3 & Tailwind) #11 - Retrieve Data from Local Storage 13:27 2022-08-23
12 Weather App Build (Vue 3 & Tailwind) #12 - Removing Cities 4:55 2022-08-24
13 Weather App Build (Vue 3 & Tailwind) #13 - Animated Skeleton Placeholders 6:29 2022-08-25
14 Weather App Build (Vue 3 & Tailwind) #14 - Route Transitions 6:02 2022-08-26
15 Weather App Build (Vue 3 & Tailwind) #15 - Deploying to Netlify 2:37 2022-08-29

Embed a badge

Show the watch time in a README or course description — it links back here and updates itself

Watch time: 2h 1m · 15 videos

Markdown
[![Watch time: 2h 1m · 15 videos](https://playlistduration.com/badge/playlist/PL4cUxeGkcC9hfoy8vFQ5tbXO3vY0xhhUZ.svg)](https://playlistduration.com/playlist/PL4cUxeGkcC9hfoy8vFQ5tbXO3vY0xhhUZ)
HTML
<a href="https://playlistduration.com/playlist/PL4cUxeGkcC9hfoy8vFQ5tbXO3vY0xhhUZ"><img src="https://playlistduration.com/badge/playlist/PL4cUxeGkcC9hfoy8vFQ5tbXO3vY0xhhUZ.svg" alt="Watch time: 2h 1m · 15 videos" width="196" height="20"></a>

Add ?speed=1.5 to the image URL for the time at that speed, ?label=Course to change the left text, or ?style=flat-square for square corners.

Want the numbers themselves? GET https://playlistduration.com/api/v1/playlist/PL4cUxeGkcC9hfoy8vFQ5tbXO3vY0xhhUZ returns them as JSON — free, no key. API docs →

Data from the YouTube Data API as of 2026-09-22 (cached). Private or deleted videos are excluded from totals.