GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - wwags33/JavaScript30: 30 Day Vanilla <del>JS</del> TS Challenge

BranchesTags
Open more actions menu
 
 

Latest commit

 

History

353 Commits
353 Commits

Folders and files

NameName
Last commit message
Last commit date
.devcontainer
.devcontainer
 
 
01 - JavaScript Drum Kit
01 - JavaScript Drum Kit
 
 
02 - JS and CSS Clock
02 - JS and CSS Clock
 
 
03 - CSS Variables
03 - CSS Variables
 
 
04 - Array Cardio Day 1
04 - Array Cardio Day 1
 
 
05 - Flex Panel Gallery
05 - Flex Panel Gallery
 
 
06 - Type Ahead
06 - Type Ahead
 
 
07 - Array Cardio Day 2
07 - Array Cardio Day 2
 
 
08 - Fun with HTML5 Canvas
08 - Fun with HTML5 Canvas
 
 
09 - Dev Tools Domination
09 - Dev Tools Domination
 
 
10 - Hold Shift and Check Checkboxes
10 - Hold Shift and Check Checkboxes
 
 
11 - Custom Video Player
11 - Custom Video Player
 
 
12 - Key Sequence Detection
12 - Key Sequence Detection
 
 
13 - Slide in on Scroll
13 - Slide in on Scroll
 
 
14 - JavaScript References VS Copying
14 - JavaScript References VS Copying
 
 
15 - LocalStorage
15 - LocalStorage
 
 
16 - Mouse Move Shadow
16 - Mouse Move Shadow
 
 
17 - Sort Without Articles
17 - Sort Without Articles
 
 
18 - Adding Up Times with Reduce
18 - Adding Up Times with Reduce
 
 
19 - Webcam Fun
19 - Webcam Fun
 
 
20 - Speech Detection
20 - Speech Detection
 
 
21 - Geolocation
21 - Geolocation
 
 
22 - Follow Along Link Highlighter
22 - Follow Along Link Highlighter
 
 
23 - Speech Synthesis
23 - Speech Synthesis
 
 
24 - Sticky Nav
24 - Sticky Nav
 
 
25 - Event Capture, Propagation, Bubbling and Once
25 - Event Capture, Propagation, Bubbling and Once
 
 
26 - Stripe Follow Along Nav
26 - Stripe Follow Along Nav
 
 
27 - Click and Drag
27 - Click and Drag
 
 
28 - Video Speed Controller
28 - Video Speed Controller
 
 
29 - Countdown Timer
29 - Countdown Timer
 
 
30 - Whack A Mole
30 - Whack A Mole
 
 
.gitignore
.gitignore
 
 
PULL_REQUEST_TEMPLATE.md
PULL_REQUEST_TEMPLATE.md
 
 
favicon.ico
favicon.ico
 
 
readme.md
readme.md
 
 

Repository files navigation

Will Wager's TypeScript solutions for Wes Bos's...

JavaScript30

Run them yourself from a VS Code container!

  • Open in vscode and run Remote Containers: Reopen in Container from the command palette.
  • Build each TypeScript file with tsc typescripts.ts from each project's folder.
    • All html files have been adjusted to look for typescripts.js.
    • Starting at project 6, I use the options --removeComments --strictNullChecks --noImplicitAny --target es5 in my js builds.
  • Press ALT + L, ALT + O to start the Live Server extension and access the html files at http://localhost:5500 + the relative path.
    • For example, to open the first project, go to (replace spaces with '20%' if your browser complains): http://localhost:5500/01%20-%20JavaScript%20Drum%20Kit/index-START.html

Starter Files + Completed solutions for the JavaScript 30 Day Challenge.

Grab the course at https://JavaScript30.com

Community #JavaScript30 Content

Feel free to submit a PR adding a link to your own recaps, guides or reviews!

  • Arjun Khode’s blog about summaries for each day, including fixed glitches, bugs and extra features
  • Nitish Dayal's Text Guides are great for those who like reading over watching
  • Meredith Underell's Quick Lessons Learned
  • Rowan Weismiller's Recaps + Lessons Learned
  • Thorsten Frommen shares how he solved the exercises before viewing the answers
  • Soyaine 写的中文指南包含了过程记录和难点解释
  • Ayo Isaiah's Recaps and Lessons Learned
  • Adriana Rios shares her alternative solutions
  • Michael Einsohn publishes each challenge after watching the video once
  • Mike Ekkel
  • Yusef Habib lessons and tricks learned, and a gh-page to see working all the mini-projects.
  • Amelie Yeh 30 lessons notes with things I've learned, and those important recaps. and directly view my demos here 🇹🇼😄
  • Winar的JavaScript30天挑战,记录练习过程,重难点和其他的解决方案。🎨
  • Rayhatron - walkthroughs, recaps and lessons learned.
  • Andrei Dobra Full repo with lessons learned and a gh-page with all the exercises.
  • 从零到壹全栈部落,春哥发起的从零到壹全栈部落,旨在带领大家一起学习,一起输出,文档化,代码化,中文视频化,全栈部落口号:输出是最好的学习方式。
  • Usmaan Ali's summary of the technical skills learned from each project. He's also posting them as separate blog posts here
  • Axel's lessons learned and a showcase with the projects.
  • Chris 中文實戰,目標描述、過程紀錄。
  • Muhammad D. Ramadhan's blog. He shamlesly mixed his personal life with 30 day JavaScript challenge so as to increase his learning retention. He also summarised the challenge on one single page. Do not read his blog!
  • Lee Keitel's Blog includes summaries of each lesson, what I learned from each one, and my thoughts about the topic taught and using them in the future.
  • Dustin Hsiao 包含了各篇介紹、 效果Demo、各篇詳解及記錄過程,附上部分延伸閱讀及gh-page。
  • GuaHsu - 紀錄各篇練習過程與心得,並嘗試擴充部分練習,也做了一個包含全部練習的介紹站🇹🇼
  • Daniela's completed challenges on GitHub Pages and Codepen 🙌 💪 👍
  • Dmitrii Pashutskii's code of all challenges on GitHub with Pages and review blog posts
  • Abid Hasan's completion of all challenges. This was awesome!! Learned so much! 👍
  • Yusong Notes Records Yusong JS 30 days note and demo 🌟
  • Ding's Implementation code and online demo
  • Herminio Torres lessons and tricks learned, and a gh-page to see working all the mini-projects.
  • Dmytro Borysovskyi says many thanks to for the course to Wes 🤝 It was incredible challenge 👌 The full repository with code available here and demos can be reached by the link to gh-pages 👍👍👍
  • Kizito's follow along repo with completed challenges and notes.
  • VannTile's repository and GitHub Pages showcase. Thank you for a great ⌨️ experience.
  • Alex Kim completed all the challenges. You can check them out at github pages.
  • Mikhail Thomas created JS30++ to add another level of challenge ontop of this already great course.
  • Ramon Morcillo finished this awesome challenge!. You can see the showcase of his implementations on this link.

Alternative Implementations

Here are some links of people who have done the tutorials, but in a different language or framework:

  • Thomas Mattacchione JavaScript 30 written in ClojureScript
  • Dave Follett's blog series, A New Vue on #JavaScript30, where he explores re-implementing #JavaScript30 projects using Vue.
  • Akinjide Bankole used Node.js with Jade to solve the exercises
  • Adrien Poly a modest attempt to convert Drum Kit, Video Player, Local Tapas, TypeHead to Stimulus JS framework in a Rails App.
  • Bogdan Lazar all the JavaScript 30 written in TypeScript
  • marcoSven solution suggestion for 10 - Hold Shift and Check Checkboxes

A note on Pull Requests

These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos.

The starter files + solutions will be updated if/when the videos are updated.

Thanks!

About

30 Day Vanilla <del>JS</del> TS Challenge

JavaScript30.com

Resources

Readme
Activity

Stars

4 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.