browserify-adventure/problems/widget_with_assets/solution.txt

learn browserify with this educational adventure

Here's the reference solution:

  var fs = require('fs');
  var domify = require('domify');
  var insertCss = require('insert-css');
  var inherits = require('inherits');
  var EventEmitter = require('events').EventEmitter;
  
  var html = fs.readFileSync(__dirname + '/widget.html', 'utf8');
  var css = fs.readFileSync(__dirname + '/widget.css', 'utf8');
  insertCss(css);
  
  module.exports = Widget;
  inherits(Widget, EventEmitter);
  
  function Widget () {
    var self = this;
    if (!(this instanceof Widget)) return new Widget;
    var form = this.element = domify(html);
    
    form.addEventListener('submit', function (ev) {
      ev.preventDefault();
      var msg = form.querySelector('textarea[name="msg"]').value;
      self.emit('message', msg);
    });
  }
  
  Widget.prototype.appendTo = function (target) {
    target.appendChild(this.element);
  };

There are lots of ways to complete this level, so your solution might look
quite different!

In this solution, we create a `Widget` constructor with an `.appendTo()`
method. We use `brfs` to load html and css files. We use `domify` to turn
those html strings into html elements and `insert-css` to insert the css
file into the dom in a `<style>` tag.

Once the element is constructed, we register a `"submit"` listener and emit
a "message" event with the textarea content. We can emit these events
because we inherited from the core EventEmitter with the `inherits`
package.