Help with the HTML code?

JavaScript
1

I don’t understand…the test passes on this code, yet, put into an editor and it doesn’t show the html code (I’m using fiddle)
Can someone help me understand or link me to some info regarding how to use html within javascript please, I’d like to learn how that works?
(yeah, and once again FCC didn’t come to the table to properly explain a COMPLETELY new concept…“how to embed html code within javasript”)

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
  "use strict";
  // change code below this line
  const failureItems = [];
  for (let i = 0; i < arr.length; i++) {
    failureItems.push(`<li class="text-warning">${arr[i]}</li>`);
  }
  // change code above this line
  return failureItems;
}

const failuresList = makeList(result.failure);
2

What I am trying to get at is…how would one actually see a list of our object within html page, in my editor it shows other characters instead of the html code, is there a way to actually see the “li with tags” within the editor instead of seeing more characters explaining the “li with tags”

3

You aren’t generating HTML, this is just JavaScript, those are just strings. JavaScript doesn’t know anything about HTML.

Browsers include a library of functions and objects that let you programmatically manipulate the browser (script it), and that library is written in JavaScript. Some of those objects represent HTML structures, and some of those functions let you work with HTML.

This library, the web platform API, is the reason for Javascript being created (and browsers do a very large amount things that can be programmed) so naturally it’s quite big, there are a very large number of objects and functions it provides you with: Web APIs | MDN

The part of the library that deals with translating to and from HTML and JavaScript is the DOM: Document Object Model (DOM) - Web APIs | MDN

You would need an HTML page, then your script attached to that HTML page, so at probably the simplest level (there are better ways of doing this, but anyway), in your HTML:

<ul id="failures list"></ul>

<script>
// Your code here

document.querySelector("#failuresList").innerHTML = failuresList.join("");
</script>

document is an object representing a web page.

One of the many functions attached to it is querySelector, which takes a string that’s the same as any CSS selector. That finds the element with the ID “failuresList”.

That element also has an object that represents it. That has a property called innerHTML, which is a string version of the html contained in that element. You assign properties with =, so the last bit is just turning your array of things into a string and assigning it.

If you haven’t seen how objects can be constructed in JS, or got to the class section of the ES6 not your on, the following might not make total sense, but as a gross simplification (the actual code used to do this in browsers is optimised and a lot more gnarly, as it’s has to do a lot more than what I’m describing):

class Element() {
  _innerhtml = "";

  set innerHTML(str) {
    this._innerhtml = str;
    doSomethingToUpdateTheWebPage();
  }
}

class Document() {
  querySelector(selector) {
    const el = figureOutStuffBasedOnTheSelector(selector);
    return new Element(el);
  }
}

You open the web page, and the browser does something like document = new Document(). Then you can do document.querySelector. That returns an object of type Element, and that has the property innerHTML, so you can do document.querySelector("some-selector").innerHTML = "<p>Some HTML<p>"

const element = document.querySelector("some-selector");
element.innerHTML = "<p>Some HTML<p>";
4

oh, so with this assignment…what you’re in essence saying is that…without creating a whole new webpage , we’ll get a list on the webpage (using innerHTML) and then within that webpage the list will appear as shown in the assignment (I have done a little bit of DOM and innerHTML, I have an idea of what’s going on there)

This…would make sense, I was just wondering how the list would actually feature. you see, FCC doesn’t explain what you just did…properly, there is much they can improve on actually, not that I’m not grateful for their efforts…they CAN do better…

5

The section you’re on is JavaScript though:

With this assignment, you are just creating an array of strings. The fact that those strings are like <li>Some error code</li> is just to make it closer to how it might be used in some specific context. The assignment does not have anything to do with HTML. You are not creating HTML, you are just using JS to generate strings of text.

In fact the entire certificate you’re doing doesn’t have anything really to do with HTML, so you aren’t going to find any explanation of the DOM libraries there.

What I’ve written above applies if you used JavaScript to interact with the HTML on a browser web page: it doesn’t have anything to do with the JS part of the curriculum, which is why you can’t find mention of it (yes, the key parts of the browser’s web platform API should be a section in the overall curriculum, and that is a gaping miss: what is there instead is jQuery, in the frontend frameworks section, which reflects when that part of the overall curriculum was written but is not a substitute)

To make an analogy: road signs in England are written in English. This does not mean you learn road signs to learn English. Instead, what it means is that once you know English, you can read road signs.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.