Skip to content

Instantly share code, notes, and snippets.

View thanapongp's full-sized avatar

Thanapong Prathumchat thanapongp

8 followers · 0 following
View GitHub Profile
@thanapongp
thanapongp / app.js
Created September 8, 2019 08:17
app.js with updated constructor
import { htmlToElement } from './utils';
export default class App {
constructor() {
this.input = document.getElementById('input');
this.listRoot = document.getElementById('list-root');
// Clone node and its decendants into class property.
this.emptyState = document.getElementById('empty-state').cloneNode(true);
@thanapongp
thanapongp / index.html
Created September 8, 2019 08:16
index.html with uncommented empty state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ES6 Todo List</title>
</head>
<body class="bg-gray-700">
<div class="w-full max-w-lg mt-16 mx-auto">
@thanapongp
thanapongp / app.js
Last active September 8, 2019 08:01
app.js with deleteItem method added
import { htmlToElement } from './utils';
export default class App {
//...
addNewItem(itemName) {
//...
const item = htmlToElement(`
//...
@thanapongp
thanapongp / app.js
Created September 8, 2019 07:01
app.js with updated class name on delete button
import { htmlToElement } from './utils';
export default class App {
//...
addNewItem(itemName) {
//...
const item = htmlToElement(`
<li class="flex py-4 border-b border-gray-900">
<-- ... -->
@thanapongp
thanapongp / main.js
Created September 7, 2019 08:43
main.js with main.css imported
import '../main.css';
import App from './app';
document.addEventListener('DOMContentLoaded', () => {
const app = new App();
});
@thanapongp
thanapongp / webpack.config.js
Created September 7, 2019 08:34
wepack.config.js with MiniCssExtractPlugin
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/js/main.js',
mode: 'development',
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
@thanapongp
thanapongp / webpack.config.js
Created September 7, 2019 07:43
webpack.config.js with HtmlWebpackPlugin
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/main.js',
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
@thanapongp
thanapongp / index.html
Created September 7, 2019 07:31
Complied index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ES6 Todo List</title>
</head>
<body class="bg-gray-700">
<div class="w-full max-w-lg mt-16 mx-auto">
@thanapongp
thanapongp / webpack.config.js
Created September 7, 2019 07:21
webpack.config.js with updated output
const path = require('path');
module.exports = {
entry: './src/js/main.js',
mode: 'development',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
}
};
@thanapongp
thanapongp / webpack.config.js
Last active September 7, 2019 03:43
Personal's website webpack.config.js
module.exports = {
entry: './src/styles.css',
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [
{ loader: 'css-loader', options: { importLoader: 1 } },
'postcss-loader'