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: 4 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? |
Christian J |
May 7 2024, 06:06 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
1) It appears that [mode="maker"] is assigned to the ".mode-maker" Class selector. If you mean here: CODE [mode="maker"] .mode-maker, [mode="edit"] .mode-edit, [mode="blockly"] .mode-blockly { display: block; } the CSS rule actually selects for any element with the HTML CLASS value "mode-maker", which is a child of any element with the HTML attribute value mode="maker". QUOTE The HTML code uses "mode-maker". The JS code uses 'maker'. No, "maker" is the value of the MODE attribute, set by the JS here: CODE document.body.setAttribute('mode', 'maker'); resulting in the following virtual HTML: CODE <body mode="maker"> which is used by the CSS at the top of this post. QUOTE Wondering the reason for the two names? Can't say, I don't understand how it all works from the code sample. The name choices may have no special meaning, except that the author liked them. QUOTE 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. No, clicking on the element with the ID "edit" calls the function enableEditMode(). QUOTE I'm wondering what triggers CODE enableMakerMode(); ? Clicking the element with the ID "done". That click is detected here: CODE document.querySelector('#done').addEventListener('click', enableMakerMode); QUOTE --- 3) The HTML <body> contains CODE <h1 class="mode-edit mode-blockly">Music Maker Configuration</h1> (Nitpick: note that <body> is just the code for the start tag of the BODY element.) QUOTE What happens with "mode-edit" and "mode-blockly" assigned to the same class? In the HTML above, it means the H1 element has two CLASS values. But in the following CSS these two CLASS values select for the same styling, which makes no sense: CODE .mode-maker, .mode-edit, .mode-blockly { display: none; } Maybe they are used in other ways elsewhere in the code. It's all a bit confusing. |
Lo-Fi Version | Time is now: 19th May 2024 - 02:35 PM |