- Use basic JavaScript - functions, control structures, scope
- Build a pure JavaScript application
- Build a pure JavaScript class
- Write OO JavaScript
- Write modular views in JS
Let's create a markdown preview widget. It should work like this:
<markdown-preview for="src"></markdown-preview>
<textarea id="src"></textarea>
When we're done, the <markdown-preview> element will show a live preview
of the source in the element identifed by its for attribute (the
textarea, in this case).
When we change the content of the text area, the preview element will update.
Custom elements are still a bit new, so there isn't a great deal of documentation. Fortunately, the API is relatively straightforward.
Here is a thorough, if rather breathless, description of custom elements.
A brief overview:
// Your prototype's prototype will be the element you
// want to extend. The simplest case is to extend HTMLElement.
var myElementProto = Object.create(HTMLElement.prototype);
// You get these lifecycle callbacks:
// createdCallback()
// attachedCallback()
// attributeChangedCallback(attrName, oldVal, newVal)
// detachedCallback()
//
// If they are defined, the browser will call these functions
// when your element is created, attached to the page, detached
// from the page, or has an attribute modified.
//
// You define them on the prototype like so:
myElementProto.attachedCallback = function() {
this.textContent = "I'm on the page! Wheeee!";
};
// You can define whatever other functions you want on your
// element's prototype.
myElementProto.fuchsiafy = function() {
this.style.backgroundColor = 'fuchsia';
};
// document.registerElement returns a constructor, though
// you probably won't need to call it directly in this challenge.
var MyElement = document.registerElement('my-element', {prototype: myElementProto});
Define a <markdown-preview> element with
document.registerElement.
When your element is attached to the page, have it find the element selected by
its for attribute and copy that element's content into itself. Don't worry about
parsing the markdown just yet.
Parsing Markdown is a fairly substantial task on its own. Grab a markdown library. (I don't know if that's the best one, but it looks like it has a nice interface and supports GitHub flavored markdown).
Using the markdown library, convert the content of the markdown element to HTML before displaying it.
Have your widget set up the appropriate event listeners to update itself when the contents of its source element change.
It's good practice to remove (or switch off) any event listeners you attach once you no longer need them. The element's lifecycle callbacks provide a convenient place to do this.
Not doing so can create memory leaks.
Add support for an src attribute on your custom element. This attribute should
take a URL with markdown content and display it. Your Javascript code will need to issue an HTTP request for the src URL.
It's often helpful to focus on the flow of data through your program before you work out precisely how you want to transform it. In this case, we first set up a widget that used identity transform to confirm that we could read something—anything—from one part of the page and insert it into another.