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
Christian J
post May 7 2024, 06:06 PM
Post #2


.
********

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

Posts in this topic
bhs67   What happens with "mode-edit" and "mode-blockly" assigned to the same class?   May 7 2024, 10:20 AM
Jason Knight   There's a lot of stuff in there that makes no ...   May 7 2024, 04:23 PM
Christian J   1) It appears that [mode="maker"] is as...   May 7 2024, 06:06 PM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

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

 

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

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

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