The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> What happens with "mode-edit" and "mode-blockly" assigned to the same class?, HTML, CSS, JS
bhs67
post 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?



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post 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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 7 2024, 06:06 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,676
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. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bhs67
post May 20 2024, 06:52 AM
Post #4





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.

Attached File  getting_started_codelab.zip ( 51.83k ) Number of downloads: 0
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bhs67
post May 23 2024, 03:37 PM
Post #5





Group: Members
Posts: 6
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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th May 2024 - 03:50 PM