thanapongp

import App from './app';

document.addEventListener('DOMContentLoaded', () => {
  const app = new App();
});

thanapongp

const path = require('path');

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'src', 'js')
  }
};

thanapongp

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);class r{constructor(){console.log("hello todo!")}}document.addEventListener(

thanapongp

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;

thanapongp

export default class App {
  constructor() {
    this.input = document.getElementById('input');

    this.initInput();
  }

  initInput() {
    this.input.addEventListener('keyup', e => {
      if (e.keyCode === 13) {

thanapongp

export function htmlToElement(html) {
  const template = document.createElement('template');
  template.innerHTML = html.trim();
  return template.content.firstChild;
}

thanapongp

import { htmlToElement } from './utils';

export default class App {
  //...
  
  addNewItem(itemName) {
    itemName = itemName.trim();
    const addedTime = new Date().toLocaleString();

    const item = htmlToElement(`

thanapongp

import { htmlToElement } from './utils';

export default class App {
  constructor() {
    this.input = document.getElementById('input');
    this.listRoot =  document.getElementById('list-root');

    this.initInput();
  }

thanapongp

{
  "name": "es6-todo-list",
  "version": "1.0.0",
  "description": "ES6 Todo List",
  "main": "main.js",
  "author": "",
  "license": "MIT",
  "scripts": {
    "start:dev": "webpack-dev-server"
  },

thanapongp

module.exports = {
  entry: './src/styles.css',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            { loader: 'css-loader', options: { importLoader: 1 } },
            'postcss-loader'