 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: 9 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? |
  |
 
|
| Jason Knight |
May 7 2024, 04:23 PM
Post
#2
|
|
Advanced Member  Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
There's a lot of stuff in there that makes no sense. For example there's no such thing as a node atttribute, nor is such a fantasyland attribute assigned ANYWHERE, thus:
[mode="maker"] and its ilk is total gibberish. Just like how having more than one H1 -- the heading that describes everything on the page -- makes zero sense. The scripting seems to be messing around trying to grab things by class that should probably be setting the DISABLED attribute, which the CSS could then easily target without all the ID's. Likewise if every sibling level tag is getting the same class, none of them should have that class; style off the parent! Much less using classes or tags to say what you want things to look like is failing to grasp what HTML is even for, and why CSS stands apart from it. No matter how many dirtbag scam artist fraudsters with their Failwind and Bootcrap idiocy claim otherwise. It's probably also not helping matters that you have no preventDefault nor are the button set to type="button". Remember, the default for <button> is type="submit". I don't know what "blockly" is, but it looks like the typical wreck one sees created by people who have not iota of business working with web technologies. *** GOOGLES IT*** Oh, "visual programming". The same half-assed fraud preying on ignorance and wishful thinking we've seen fail miserably over and over again for 20 years. Here's a tip: "For people who know nothing about websites, BY people who know nothing about websites" is not a recipe for success." -- Dan Schulz, RIP One look at anything that garbage is vomiting up and has the nerve to call "code" should be sending you running and screaming the opposite direction. The only thing you can learn from it is how NOT to use HTML, CSS, or JavaScript. Their homepage alone blowing 154k of markup on delivering 5.6k of plaintext and two dozen content media -- not even 16k of HTML's flipping job -- is proof positive that any claims of merit they attribute to their approach is nothing more than blowing smoke up everyone's backside! My Advice? Ditch it and take the time to learn to use HTML properly. Anyone using that is being saddled up and taken for a ride. |
|
|
|
| Christian J |
May 7 2024, 06:06 PM
Post
#3
|
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
QUOTE(bhs67 @ May 7 2024, 05:20 PM)  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.  |
|
|
|
| bhs67 |
May 20 2024, 06:52 AM
Post
#4
|
|
Group: Members Posts: 9 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: 3928 |
|
|
|
| bhs67 |
May 23 2024, 03:37 PM
Post
#5
|
|
Group: Members Posts: 9 Joined: 17-April 24 Member No.: 29,168 |
QUOTE(bhs67 @ May 20 2024, 06:52 AM) 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. |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 10th October 2024 - 03:45 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC