The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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: 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies(1 - 2)
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,665
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
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

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

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th May 2024 - 10:57 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC