File
Login or Register via GitHub
<style> table { border-collapse: collapse; width: 100%; margin: 10px 0; } td { border: 2px solid black; padding: 5px; }</style><button onclick="mostrarCurso(0)">Curso 1</button><button onclick="mostrarCurso(1)">Curso 2</button><div id="video"></div><script> const mostrarCurso = (i) => { const divVideo = document.getElementById('video') const table = document.createElement('table') const tbody = document.createElement('tbody') table.innerHTML = `<thead><tr><th colspan="2">${datos.courses[i].name}</th></tr></thead>` table.append(tbody) for (const capitulo of datos.courses[i].list) { let rowspan = capitulo.videos.length // Cantidad de filas que ocupa un capítulo for (const video of capitulo.videos) { const tr = document.createElement('tr') tbody.append(tr) if (rowspan) { tr.innerHTML = `<td rowspan="${rowspan}">${capitulo.chapter}</td><td>${video.name}</td>` rowspan = 0 } else { tr.innerHTML = `<td>${video.name}</td>` } } } divVideo.innerHTML = '' // Vacía el DIV divVideo.append(table) // Llena el DIV } const datos = { "courses": [ { "name": "Programming - Android Leveraging the power of the android platform", "color": "#BCCEF4", "list": [ { "chapter": "Leveraging the power of the android platform", "videos": [ { "name": " Understanding the android threading model", "video": "programming/Android/Leveraging the power of the android platform/1. Understanding the android threading model.mkv", "subtitle": "file.vtt" }, { "name": " Performing Background work with Services", "video": "programming/Android/Leveraging the power of the android platform/2. Performing Background work with Services.mkv", "subtitle": "file.vtt" }, { "name": " Scheduling Background work with jobScheduler", "video": "programming/Android/Leveraging the power of the android platform/3. Scheduling Background work with jobScheduler.mkv", "subtitle": "file.vtt" }, { "name": " working with Broadcast Receivers", "video": "programming/Android/Leveraging the power of the android platform/4. working with Broadcast Receivers.mkv", "subtitle": "file.vtt" }, { "name": " Using Alarms to shedule time-sensitive task", "video": "programming/Android/Leveraging the power of the android platform/5. Using Alarms to shedule time-sensitive task.mkv", "subtitle": "file.vtt" } ] } ] }, { "name": "Programming - Android Apps with Kotlin- ViewModel and Lifecycle", "color": "#BCCEF4", "list": [ { "chapter": "00. Course Overview", "videos": [ { "name": " Course Overview", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/00. Course Overview/00. Course Overview.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/00. Course Overview/00. Course Overview.vtt" } ] }, { "chapter": "01. Managing Activity State with ViewModel", "videos": [ { "name": " Introduction", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/00. Introduction.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/00. Introduction.vtt" }, { "name": " Activities - More Than Just a Pretty Face", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/01. Activities - More Than Just a Pretty Face.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/01. Activities - More Than Just a Pretty Face.vtt" }, { "name": " Managing Activity State with ViewModel", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/02. Managing Activity State with ViewModel.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/02. Managing Activity State with ViewModel.vtt" }, { "name": " There's a Bug in Our App", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/03. There's a Bug in Our App.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/03. There's a Bug in Our App.vtt" }, { "name": " Adding a ViewModel and Build Dependencies", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/04. Adding a ViewModel and Build Dependencies.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/04. Adding a ViewModel and Build Dependencies.vtt" }, { "name": " Accessing Our ViewModel with a Lazy Property", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/05. Accessing Our ViewModel with a Lazy Property.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/05. Accessing Our ViewModel with a Lazy Property.vtt" }, { "name": " Restoring the Activity State", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/06. Restoring the Activity State.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/06. Restoring the Activity State.vtt" }, { "name": " That Bug's Fixed, but We Just Found Another One", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/07. That Bug's Fixed, but We Just Found Another One.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/07. That Bug's Fixed, but We Just Found Another One.vtt" }, { "name": " Managing More Complex State with ViewModel", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/08. Managing More Complex State with ViewModel.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/08. Managing More Complex State with ViewModel.vtt" }, { "name": " Verifying App Behavior", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/09. Verifying App Behavior.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/09. Verifying App Behavior.vtt" }, { "name": " Summary", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/10. Summary.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/10. Summary.vtt" } ] }, { "chapter": "02. Maintaining Activity State during System-initiated Shutdowns", "videos": [ { "name": " Introduction", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/00. Introduction.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/00. Introduction.vtt" }, { "name": " Activity Destruction Effects on State", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/01. Activity Destruction Effects on State.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/01. Activity Destruction Effects on State.vtt" }, { "name": " Durable Activity State", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/02. Durable Activity State.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/02. Durable Activity State.vtt" }, { "name": " Identifying the Need for Durable State", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/03. Identifying the Need for Durable State.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/03. Identifying the Need for Durable State.vtt" }, { "name": " Persisting State of a Simple Value", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/04. Persisting State of a Simple Value.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/04. Persisting State of a Simple Value.vtt" }, { "name": " Restoring State of a Simple Value", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/05. Restoring State of a Simple Value.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/05. Restoring State of a Simple Value.vtt" }, { "name": " Summary", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/06. Summary.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/06. Summary.vtt" } ] }, { "chapter": "03. Persisting Complex Activity State", "videos": [ { "name": " Introduction", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/00. Introduction.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/00. Introduction.vtt" }, { "name": " We're Still Losing Some of Our Activity State", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/01. We're Still Losing Some of Our Activity State.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/01. We're Still Losing Some of Our Activity State.vtt" }, { "name": " Activity State and Data Model Cooperation", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/02. Activity State and Data Model Cooperation.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/02. Activity State and Data Model Cooperation.vtt" }, { "name": " Moving the Details to the ViewModel", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/03. Moving the Details to the ViewModel.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/03. Moving the Details to the ViewModel.vtt" }, { "name": " Persisting State of an Object Graph", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/04. Persisting State of an Object Graph.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/04. Persisting State of an Object Graph.vtt" }, { "name": " Effectively Using ViewModel and Durable State Together", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/05. Effectively Using ViewModel and Durable State Together.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/05. Effectively Using ViewModel and Durable State Together.vtt" }, { "name": " Verifying State Management Behavior", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/06. Verifying State Management Behavior.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/06. Verifying State Management Behavior.vtt" }, { "name": " Summary", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/07. Summary.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/07. Summary.vtt" } ] }, { "chapter": "04. Subscribing to Lifecycle Events", "videos": [ { "name": " Introduction", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/00. Introduction.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/00. Introduction.vtt" }, { "name": " Cooperating with Activity Lifecycle", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/01. Cooperating with Activity Lifecycle.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/01. Cooperating with Activity Lifecycle.vtt" }, { "name": " Our App's Get-together Feature", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/02. Our App's Get-together Feature.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/02. Our App's Get-together Feature.vtt" }, { "name": " Managing Location with Activity Functions", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/03. Managing Location with Activity Functions.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/03. Managing Location with Activity Functions.vtt" }, { "name": " Fixing the Location Resource Leak", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/04. Fixing the Location Resource Leak.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/04. Fixing the Location Resource Leak.vtt" }, { "name": " Improving Lifecycle Handling with Events", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/05. Improving Lifecycle Handling with Events.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/05. Improving Lifecycle Handling with Events.vtt" }, { "name": " Creating a Lifecycle Observer", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/06. Creating a Lifecycle Observer.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/06. Creating a Lifecycle Observer.vtt" }, { "name": " Observing Lifecycle Events", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/07. Observing Lifecycle Events.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/07. Observing Lifecycle Events.vtt" }, { "name": " Connecting the Observer to the Lifecycle", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/08. Connecting the Observer to the Lifecycle.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/08. Connecting the Observer to the Lifecycle.vtt" }, { "name": " Summary", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/09. Summary.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/09. Summary.vtt" } ] }, { "chapter": "05. Determining Lifecycle State", "videos": [ { "name": " Introduction", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/00. Introduction.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/00. Introduction.vtt" }, { "name": " Events Are Only Part of the Story", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/01. Events Are Only Part of the Story.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/01. Events Are Only Part of the Story.vtt" }, { "name": " Adding the Messaging Manager", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/02. Adding the Messaging Manager.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/02. Adding the Messaging Manager.vtt" }, { "name": " Lifecycle-driven Asynchronous Operations", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/03. Lifecycle-driven Asynchronous Operations.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/03. Lifecycle-driven Asynchronous Operations.vtt" }, { "name": " We're Leaking Connections", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/04. We're Leaking Connections.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/04. We're Leaking Connections.vtt" }, { "name": " Lifecycle State", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/05. Lifecycle State.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/05. Lifecycle State.vtt" }, { "name": " Verifying State in Asynchronous Operations", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/06. Verifying State in Asynchronous Operations.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/06. Verifying State in Asynchronous Operations.vtt" }, { "name": " The Leak Is Fixed", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/07. The Leak Is Fixed.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/07. The Leak Is Fixed.vtt" }, { "name": " Summary", "video": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/08. Summary.mp4", "subtitle": "programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/08. Summary.vtt" } ] } ] } ] }</script>
Output
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers