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: 5
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
bhs67
post Today, 06:52 AM
Post #2





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

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
bhs67   I am working with FTC (First Tech Challenge) teams...   Today, 06:52 AM

« 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: 20th May 2024 - 05:21 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC