DOM 1 code

My version

Questions

“I am curious how exactly the tagged function works.”

“What are content and tag?”

Code

const tagged = (tag, content) => {
  const e = document.createElement(tag);
  if (content !== undefined) {
    if (typeof content === 'string') {
      e.append(text(content));
    } else {
      content.forEach(c => {
        e.append(typeof c === 'string' ? text(c) : c);
      });
    }
  }
  return e;
};

Some other code

A bunch of you had questions about this code:

const code = (content) => tagged('code', content);
const div = (content) => tagged('div', content);
const h1 = (content) => tagged('h1', content);
const ol = (content) => tagged('ol', content);
const p = (content) => tagged('p', content);

Question 1

“Why did you add all the specific instances of the types?”

Question 2

“Isn’t it faster to just use tagged?”

Question 3

“Is there a reason other than, ‘because I said so’, for creating the tagged function at all if you were just going to use the individual functions for types?”

Question 4

“This confuses me because I thought that this had to be before each part, I didn't know you could do it all in one place.”

Questions about lists

“I don't understand how you made the lists work properly.”

“How you put all of the lis into the ol?”

The ol fuction relies on the fact that tagged can handle a list of children

ol([ // <--- notice that open bracket
  li([
    '<html>',
    `: This is the root element of an HTML document ...`
  ]),
  // more li's elided

]), // <--- closing bracket

Question

“What are .map and .forEach?”

These are methods on arrays. We’ll talk about them in detail in a couple weeks.

Question

“I wonder if we can use some of the important functions from this code for our own?”

Yes, you may. But credit any code you didn’t write yourself. And don’t assume you can use any code you find on the Internet.

ChatGPT’s version

Question

“What does appendChild do?”

It’s funny that ChatGPT used it when the original prompt specifically asked it to use append.

appendChild is like append but a bit more picky—it only accepts one argument and does not automatically convert strings to text nodes.

Thoughts on ChatGPT’s code

“It uses a very orderly naming system and does the code the way the teacher teaches when they are tired and just want to go to sleep. It has a very simple and straight forward approach.”

More thoughts

“ChatGPT really confuses me and it’s hard to read.”

“I think the chat GPT looks more confusing.”

Basic structure

// h1 element
const h1_1 = document.createElement("h1");
const h1_1_text = document.createTextNode("Can you ...?");
h1_1.appendChild(h1_1_text);
body.appendChild(h1_1);

Slightly more complicated

// ol element
const ol_1 = document.createElement("ol");

// li elements
const li_1 = document.createElement("li");
const li_1_code = document.createElement("code");
const li_1_code_text = document.createTextNode("<html>");
li_1_code_text.appendChild(li_1_code);
const li_1_text = document.createTextNode("This is ...");
li_1.appendChild(li_1_text);
ol_1.appendChild(li_1);

Optional

Come to the front of the room if you want an explanation of the rather cryptic alternating function.

`alternating`

const alternating = (a, b, items) => {
  return items.map((item, i) => [a, b][i % 2](item));
}

Used like:

tagged('li', alternating(code, text, children));