railsstudent / ng-rxjs-30

Repeat JavaScript 30 in Angular and RxJS

NgRxjs30

This project repeats Wes Bos's JavaScript 30 challenges (https://github.com/wesbos/JavaScript30) in Angular and RxJS.

Challenges:

• Day 1: JavaScript Drum Kit (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day1-javascript-drum-kit, demo: https://railsstudent.github.io/ng-rxjs-30/day1-javascript-drum-kit/)
• Day 2: Ng and CSS Clock (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day2-ng-and-css-clock, demo: https://railsstudent.github.io/ng-rxjs-30/day2-ng-and-css-clock/)
• Day 3: CSS Variables (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day3-css-variables, demo: https://railsstudent.github.io/ng-rxjs-30/day3-css-variables)
• Day 4: Array Cardio Part 1 (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day4-array-cardio-part1, demo: https://railsstudent.github.io/ng-rxjs-30/day4-array-cardio-part1/)
• Day 5: Flex panel gallery (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day5-flex-panel-gallery, demo: https://railsstudent.github.io/ng-rxjs-30/day5-flex-panel-gallery/)
• Day 6: Ng Type Ahead (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day6-ng-type-ahead, demo: https://railsstudent.github.io/ng-rxjs-30/day6-ng-type-ahead/)
• Day 7: Array Cardio Part 2 (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day7-array-cardio-part2, demo: https://railsstudent.github.io/ng-rxjs-30/day7-array-cardio-part2/)
• Day 8: Ng HTML Canvas (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day8-ng-html-canvas, demo: https://railsstudent.github.io/ng-rxjs-30/day8-ng-html-canvas/)
• Day 10: Hold Shift And Check Checkboxes (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day10-hold-shift-and-check-checkboxes, demo: https://railsstudent.github.io/ng-rxjs-30/day10-hold-shift-and-check-checkboxes/)
• Day 11: Custom Video Player (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day11-custom-video-player, demo: https://railsstudent.github.io/ng-rxjs-30/day11-custom-video-player/)
• Day 12: Key Sequence Detection (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day12-key-sequence-detection, demo: https://railsstudent.github.io/ng-rxjs-30/day12-key-sequence-detection/)
• Day 13: Slide in on scroll (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day13-slide-in-on-scroll, demo: https://railsstudent.github.io/ng-rxjs-30/day13-slide-in-on-scroll/)
• Day 15: Local Storage (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day15-local-storage, demo: https://railsstudent.github.io/ng-rxjs-30/day15-local-storage/)
• Day 16: Mouse Move (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day16-mouse-move, demo: https://railsstudent.github.io/ng-rxjs-30/day16-mouse-move/)
• Day 17: Sorted without articles (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day17-sorted-without-articles, demo: https://railsstudent.github.io/ng-rxjs-30/day17-sorted-without-articles/)
• Day 18: Adding up times (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day18-adding-up-times, demo: https://railsstudent.github.io/ng-rxjs-30/day18-adding-up-times/)
• Day 19: Webcam fun (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day19-webcam-fun, demo: https://railsstudent.github.io/ng-rxjs-30/day19-webcam-fun/)
• Day 20: Speech detection (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day20-speech-detection, demo: https://railsstudent.github.io/ng-rxjs-30/day20-speech-detection/)
• Day 22: Follow along link highlighter (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day22-follow-along-link-highlighter, demo: https://railsstudent.github.io/ng-rxjs-30/day22-follow-along-link-highlighter/)
• Day 23: Speech synthesis (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day23-speech-synthesis, demo: https://railsstudent.github.io/ng-rxjs-30/day23-speech-synthesis/)
• Day 24: Sticky Nav (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day24-sticky-nav, demo: https://railsstudent.github.io/ng-rxjs-30/day24-sticky-nav/)
• Day 26: Stripe follow along navigation (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day26-stripe-follow-along-nav, demo: https://railsstudent.github.io/ng-rxjs-30/day26-stripe-follow-along-nav/)
• Day 27: Click and drag (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day27-click-and-drag, demo: https://railsstudent.github.io/ng-rxjs-30/day27-click-and-drag/)
• Day 28: Video speed controller (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day28-video-speed-controller, demo: https://railsstudent.github.io/ng-rxjs-30/day28-video-speed-controller/)
• Day 29: Countdown timer (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day29-countdpwn-timer, demo: https://railsstudent.github.io/ng-rxjs-30/day29-countdpwn-timer/)
• Day 30: Whack a mole (code: https://github.com/railsstudent/ng-rxjs-30/tree/main/projects/day30-whack-a-mole, demo: https://railsstudent.github.io/ng-rxjs-30/day30-whack-a-mole/)

Development server

Run ng serve --project=<project name> for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Build

• Check out gh-pages branch
• Run ./build-doc.sh <project name> to build the project. The build artifacts will be stored in the dist/ directory.
• git commit and push gh-pages branch to deploy the project to github page

Generate module in projects

 - change to project directory
ng g m src/app/<module name> --project=<project name> --module=src/app/app.module

Generate component in a feature module of projects

 - change to project directory
 ng g c src/app/<feature module>/<component name> --change-detection=OnPush --project=<project name> --module=src/app/<feature module>.module 

Generate directive in a feature module of projects

 - change to project directory
 ng g c src/app/<feature module>/<component name> --change-detection=OnPush --project=<project name> --module=src/app/<feature module>.module 

Build project in docs folder

./build-doc.sh  <project name>

Deploy to Github page

 - switch to gh-pages branch
 - merge main to gh-pages branch
 - update angular.json to add baseHref property 
 - copy index.html to 404.html
ng build --project=<project folder> --output-path docs/<project folder>
git add .
git push

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.