https://github.com/adrienpoly/javascript30-stimulus

Wes Bos 🔥 Javascript30 converted to Stimulus JS 🚀🚀🚀
https://github.com/adrienpoly/javascript30-stimulus

demo-app javascript30 rails5 stimulus stimulusjs training

Last synced: 19 days ago
JSON representation

Wes Bos 🔥 Javascript30 converted to Stimulus JS 🚀🚀🚀

• Host: GitHub
• URL: https://github.com/adrienpoly/javascript30-stimulus
• Owner: adrienpoly
• Created: 2018-02-27T12:05:00.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-27T12:23:33.000Z (almost 7 years ago)
• Last Synced: 2025-01-14T11:21:06.466Z (25 days ago)
• Topics: demo-app, javascript30, rails5, stimulus, stimulusjs, training
• Language: Ruby
• Homepage: https://javascript30-stimulus.herokuapp.com
• Size: 979 KB
• Stars: 48
• Watchers: 7
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Some examples of Web Bos [Javascript 30](javascript30.com) exercises using [Stimulus JS](https://stimulusjs.org/) framework

For every one wanting to quickly get up to speed with Stimulus JS, converting a few exercises of Javascript30 to Stimulus is a great way to learn.

This repo host 4 exercises ported into a rails app and all JS being managed by Stimulus Controllers.

CSS, JS Assets are all served using Webpack

## Available solutions

* [Drum Kit](https://adrienpoly.github.io/JavaScript30/01%20-%20JavaScript%20Drum%20Kit/index-START.html): handling keyboard events

  * [original HTML/JS code](https://github.com/adrienpoly/JavaScript30/blob/master/01%20-%20JavaScript%20Drum%20Kit/index-FINISHED.html)

  * [Stimulus HTML](https://github.com/adrienpoly/javascript30-stimulus/blob/master/app/views/examples/drum_kit.html.erb)

  * [Stimulus Controller](https://github.com/adrienpoly/javascript30-stimulus/blob/master/app/javascript/controllers/drum_kit_controller.js)

* [Video Player](https://adrienpoly.github.io/JavaScript30/11%20-%20Custom%20Video%20Player/index.html): a custom HTML5 Video Player

  * [original HTML/JS code](https://github.com/adrienpoly/JavaScript30/tree/master/11%20-%20Custom%20Video%20Player)

  * [Stimulus HTML](https://github.com/adrienpoly/javascript30-stimulus/blob/master/app/views/examples/video_player.html.erb)

  * [Stimulus Controller](https://github.com/adrienpoly/javascript30-stimulus/blob/master/app/javascript/controllers/video_player_controller.js)

* [Local Tapas](https://adrienpoly.github.io/JavaScript30/15%20-%20LocalStorage/index-START.html): yet another todo list example

  * [original HTML/JS code](https://github.com/adrienpoly/JavaScript30/blob/master/15%20-%20LocalStorage/index-START.html)

  * [Stimulus HTML](https://github.com/adrienpoly/javascript30-stimulus/blob/master/app/views/examples/local_tapas.html.erb)

  * [Stimulus Controller](https://github.com/adrienpoly/javascript30-stimulus/blob/master/app/javascript/controllers/local_tapas_controller.js)

* [Type Head](https://adrienpoly.github.io/JavaScript30/06%20-%20Type%20Ahead/index-START.html): simple autocomplete search field

  * [original HTML/JS code](https://github.com/adrienpoly/JavaScript30/blob/master/06%20-%20Type%20Ahead/index-FINISHED.html)

  * [Stimulus HTML](https://github.com/adrienpoly/javascript30-stimulus/blob/master/app/views/examples/type_head.html.erb)

  * [Stimulus Controller](https://github.com/adrienpoly/javascript30-stimulus/blob/master/app/javascript/controllers/type_head_controller.js)

# Live demo

👉 https://javascript30-stimulus.herokuapp.com/

# Credits

[Wes Bos](https://github.com/wesbos/JavaScript30)