What happens with "mode-edit" and "mode-blockly" assigned to the same class?, HTML, CSS, JS |
What happens with "mode-edit" and "mode-blockly" assigned to the same class?, HTML, CSS, JS |
bhs67 |
May 7 2024, 10:20 AM
Post
#1
|
Group: Members Posts: 6 Joined: 17-April 24 Member No.: 29,168 |
The following code is posted on a Blockly website.
CSS: CODE h1 { width: 400px; position: relative; margin: 0 auto; color: #fff; font-size: 1.8em; line-height: 2.4em; } .mode-maker, .mode-edit, .mode-blockly { display: none; } [mode="maker"] .mode-maker, [mode="edit"] .mode-edit, [mode="blockly"] .mode-blockly { display: block; } HTML CODE <body> <header class="mdl-color--cyan-500"> <h1 class="mode-maker">Music Maker</h1> <h1 class="mode-edit mode-blockly">Music Maker Configuration</h1> </header> <main> <button class="mode-maker mdl-button" id="edit">Edit</button> <button class="mode-edit mdl-button mdl-js-button" id="done">Done</button> <p class="hint mode-edit">Tap any button to edit its code. <br/>When complete, press Done.</p> <button class="mode-blockly mdl-button mdl-js-button" id="save">Save</button> ... </main> JS CODE document.querySelector('#edit').addEventListener('click', enableEditMode); document.querySelector('#done').addEventListener('click', enableMakerMode); document.querySelector('#save').addEventListener('click', handleSave); enableMakerMode(); function enableMakerMode() { document.body.setAttribute('mode', 'maker'); document.querySelectorAll('.button').forEach(btn => { btn.addEventListener('click', handlePlay); btn.removeEventListener('click', enableBlocklyMode); }); } --- 1) It appears that [mode="maker"] is assigned to the ".mode-maker" Class selector. The HTML code uses "mode-maker". The JS code uses 'maker'. Wondering the reason for the two names? --- 2) The JS code CODE document.querySelector('#edit').addEventListener('click', enableEditMode); jumps to CODE function enableMakerMode() { document.body.setAttribute('mode', 'maker'); document.querySelectorAll('.button').forEach(btn => { btn.addEventListener('click', handlePlay); btn.removeEventListener('click', enableBlocklyMode); }); } with a left mouse click. I'm wondering what triggers CODE enableMakerMode(); ? --- 3) The HTML <body> contains CODE <h1 class="mode-edit mode-blockly">Music Maker Configuration</h1> What happens with "mode-edit" and "mode-blockly" assigned to the same class? |
bhs67 |
May 20 2024, 06:52 AM
Post
#2
|
Group: Members Posts: 6 Joined: 17-April 24 Member No.: 29,168 |
I am working with FTC (First Tech Challenge) teams comprised of middle school and high school students. Those teams build robots and program them using JavaBlock.
YouTube - https://www.youtube.com/watch?v=3k5KnBP1k88&t=88s - shows one FTC competition. JavaBlock uses a Blockly library. Blockly converts the JavaBlock into JavaScript (see https://developers.google.com/blockly as an example). I plan to create YouTube video clips that make it easy for students to learn how to write code using JavaBlock. While I have written lots of code over a span of many years, I’ve written very little HTML code or JavaScript code. I am striving to learn HTML and JavaScript using Blockly Developers’ code. My previous post, on this WDG forum, shows segments of Blockly “getting-started-codelab” code. Unfortunately, it appears that they are using non-standard HTML code. The Blockly “getting-started-codelab.zip” code is attached. If possible, I would like some assistance in converting this code into standard HTML code. This image - https://snipboard.io/ECzlp3.jpg - shows the sequence used for this “getting-started-codelab” code. getting_started_codelab.zip ( 51.83k ) Number of downloads: 0 |
bhs67 |
May 23 2024, 03:37 PM
Post
#3
|
Group: Members Posts: 6 Joined: 17-April 24 Member No.: 29,168 |
I am working with FTC (First Tech Challenge) teams comprised of middle school and high school students. Those teams build robots and program them using JavaBlock. YouTube - https://www.youtube.com/watch?v=3k5KnBP1k88&t=88s - shows one FTC competition. JavaBlock uses a Blockly library. Blockly converts the JavaBlock into JavaScript (see https://developers.google.com/blockly as an example). I plan to create YouTube video clips that make it easy for students to learn how to write code using JavaBlock. While I have written lots of code over a span of many years, I’ve written very little HTML code or JavaScript code. I am striving to learn HTML and JavaScript using Blockly Developers’ code. My previous post, on this WDG forum, shows segments of Blockly “getting-started-codelab” code. Unfortunately, it appears that they are using non-standard HTML code. If possible, I would like some assistance in converting this code into standard HTML code. I would use this info to help me better understand advanced HTML code writing. The Blockly “getting-started-codelab.zip” code can be found at https://github.com/bhs67/Blockly-getting-started-codelab. This image - https://snipboard.io/ECzlp3.jpg - shows the sequence used for this “getting-started-codelab” code. |
Lo-Fi Version | Time is now: 30th May 2024 - 07:01 AM |