Skip to content

Commit e7d7ceb

Browse files
author
Luis de Dios Martín
committed
initial commit
1 parent 18cbb59 commit e7d7ceb

File tree

11 files changed

+294
-0
lines changed

11 files changed

+294
-0
lines changed

‎.editorconfig‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# EditorConfig helps developers define and maintain consistent
2+
# coding styles between different editors and IDEs
3+
# editorconfig.org
4+
5+
root = true
6+
7+
8+
[*]
9+
end_of_line = lf
10+
charset = utf-8
11+
trim_trailing_whitespace = true
12+
insert_final_newline = true
13+
indent_style = space
14+
indent_size = 2
15+
16+
[*.{diff,md}]
17+
trim_trailing_whitespace = false

‎.eslintrc.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/* global module */
2+
3+
module.exports = {
4+
root: true,
5+
parserOptions: {
6+
ecmaVersion: 7,
7+
sourceType: 'module',
8+
ecmaFeatures: {
9+
experimentalObjectRestSpread: true,
10+
},
11+
},
12+
extends: [
13+
'eslint:recommended',
14+
],
15+
env: {
16+
browser: true,
17+
es6: true,
18+
node: true,
19+
},
20+
rules: {
21+
'max-len': [2, 150],
22+
'array-bracket-spacing': [2, 'never'], // require or disallow spaces inside brackets (off by default)
23+
'arrow-parens': [2, 'always'],
24+
'block-scoped-var': 2,
25+
'comma-dangle': [2, 'always-multiline'],
26+
'comma-spacing': [2, { before: false, after: true }], // enforce spacing before and after comma
27+
'computed-property-spacing': [2, 'never'], // require or disallow spaces inside parentheses (off by default)
28+
'default-case': 2, // require default case in switch statements (off by default)
29+
'dot-notation': 2, // encourages use of dot notation whenever possible
30+
'eol-last': 2, // enforce newline at the end of file, with no multiple empty lines
31+
'eqeqeq': 2,
32+
'indent': [2, 2, { SwitchCase: 1 }],
33+
'key-spacing': [1, { beforeColon: false, afterColon: true }], // enforces spacing between keys and values in object literal properties
34+
'new-cap': [1, { newIsCap: true, capIsNew: false }], // require a capital letter for constructors
35+
'no-alert': 2, // disallow the use of alert, confirm, and prompt
36+
'no-array-constructor': 2, // disallow use of the Array constructor
37+
'no-console': 1,
38+
'no-debugger': 2, // disallow use of debugger
39+
'no-loop-func': 2, // disallow creation of functions within loops
40+
'no-multi-spaces': 2,
41+
'no-multiple-empty-lines': [2, { max: 1, maxEOF: 0, maxBOF: 0 }],
42+
'no-native-reassign': 2, // disallow reassignments of native objects
43+
'no-new': 1, // disallow use of new operator when not part of the assignment or comparison
44+
'no-new-func': 2, // disallow use of new operator for Function object
45+
'no-redeclare': 2, // disallow declaring the same variable more then once
46+
'no-shadow': 2, // disallow declaration of variables already declared in the outer scope
47+
'no-trailing-spaces': 2,
48+
'no-unreachable': 2, // disallow unreachable statements after a return, throw, continue, or break statement
49+
'no-var': 2,
50+
'object-curly-spacing': [2, 'always'], // require or disallow spaces inside brackets (off by default)
51+
'object-shorthand': [2, 'always', { avoidExplicitReturnArrows: true }],
52+
'object-shorthand': [2, 'always'],
53+
'one-var': [2, 'never'], // allow just one var statement per function (off by default)
54+
'operator-assignment': [2, 'never'], // require assignment operator shorthand where possible or prohibit it entirely (off by default)
55+
'prefer-spread': 2,
56+
'prefer-template': 2,
57+
'quotes': [2, 'single'], // specify whether double or single quotes should be used
58+
'semi': [2, 'always'],
59+
'semi-spacing': [2, { before: false, after: true }], // enforce spacing before and after semicolons
60+
'space-before-function-paren': [2, { anonymous: 'always', named: 'never' }],
61+
'space-infix-ops': 2,
62+
'spaced-comment': [2, 'always'],
63+
'template-curly-spacing': [2, 'always'],
64+
'use-isnan': 2, // disallow comparisons with the value NaN
65+
'yoda': 2, // require or disallow Yoda conditions
66+
},
67+
};

‎dist/css/bundle.min.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.title{font-size:100px}.degrees{font-size:100px}.start{font-size:100px}

‎dist/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="stylesheet" href="css/bundle.min.css">
6+
</head>
7+
<body id="body">
8+
<h1 class="title">Theremin</h1>
9+
<h1 id="hola" class="degrees"></h1>
10+
11+
<button id="start" class="start">START</button>
12+
13+
<script src="js/bundle.min.js"></script>
14+
</body>
15+
</html>

‎dist/js/bundle.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.babel.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import gulp from 'gulp';
2+
3+
import rename from 'gulp-rename';
4+
import uglify from 'gulp-uglify';
5+
import cleanCSS from 'gulp-clean-css';
6+
import htmlReplace from 'gulp-html-replace';
7+
import babel from 'gulp-babel';
8+
import gulpWebpack from 'gulp-webpack';
9+
import postCSS from 'gulp-postcss';
10+
11+
import webpack from 'webpack';
12+
import postCSSImport from 'postcss-import';
13+
import del from 'del';
14+
import eslint from 'eslint';
15+
import browserSync from 'browser-sync';
16+
17+
gulp.task('es6', () =>
18+
gulp.src('src/js/app.js')
19+
.pipe(gulpWebpack({
20+
output: {
21+
filename: 'bundle.min.js',
22+
},
23+
}, webpack))
24+
.pipe(babel({ presets: ['es2015'] })) // Transpile ES6+ into ES5
25+
.pipe(uglify())
26+
.pipe(gulp.dest('dist/js')) // Copy to dist
27+
);
28+
29+
gulp.task('html', () =>
30+
gulp.src('src/index.html') // Take index.html
31+
.pipe(htmlReplace({
32+
css: 'css/bundle.min.css', // Replace the stylesheet links section with the link to the new styleshet
33+
js: 'js/bundle.min.js', // Replace the script links section with the link to the new script
34+
}))
35+
.pipe(gulp.dest('dist')) // Copy to dist
36+
);
37+
38+
gulp.task('css', () =>
39+
gulp.src('src/css/styles.css') // Take CSS files
40+
.pipe(rename('bundle.min.css')) // Concat
41+
.pipe(postCSS([postCSSImport]))
42+
.pipe(cleanCSS()) // Minify
43+
.pipe(gulp.dest('dist/css')) // Copy to dist
44+
);
45+
46+
gulp.task('eslint', () =>
47+
eslint('src/js/**/*.js')
48+
);
49+
50+
gulp.task('clean', () =>
51+
del(['dist/**'])
52+
);
53+
54+
gulp.task('browser-sync', () => {
55+
browserSync.init(['dist/css/**.css', 'dist/js/**.js', 'dist/**.html'], { // Look for changes in dist directories
56+
server: 'dist', // Reload browser when any JS is modified or inject CSS when any stylesheet is modified
57+
});
58+
});
59+
60+
gulp.task('default', ['html', 'css', 'es6', 'browser-sync'], () => {
61+
gulp.watch('src/css/*.css', ['css']);
62+
gulp.watch('src/js/*.js', ['es6']);
63+
gulp.watch('src/*.html', ['html']);
64+
});
65+
66+
gulp.task('build', ['html', 'css', 'es6', 'size']);

‎package.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "vanilla-js-example-project",
3+
"version": "1.0.0",
4+
"description": "A code example without using any framework",
5+
"main": "index.js",
6+
"scripts": {
7+
"front": "gulp",
8+
"lint": "eslint src/js/.",
9+
"clean": "rm -rf dist node_modules"
10+
},
11+
"repository": {
12+
"type": "git",
13+
"url": "git+https://github.com/luisddm/vanilla-js-example-project.git"
14+
},
15+
"author": "Luis",
16+
"license": "MIT",
17+
"bugs": {
18+
"url": "https://github.com/luisddm/vanilla-js-example-project/issues"
19+
},
20+
"homepage": "https://github.com/luisddm/vanilla-js-example-project#readme",
21+
"devDependencies": {
22+
"babel-preset-es2015": "^6.24.0",
23+
"browser-sync": "^2.18.8",
24+
"del": "^2.2.2",
25+
"eslint": "^3.18.0",
26+
"gulp": "^3.9.1",
27+
"gulp-babel": "^6.1.2",
28+
"gulp-clean-css": "^3.0.3",
29+
"gulp-html-replace": "^1.6.2",
30+
"gulp-postcss": "^6.3.0",
31+
"gulp-rename": "^1.2.2",
32+
"gulp-uglify": "^2.1.0",
33+
"gulp-webpack": "^1.5.0",
34+
"postcss-import": "^9.1.0",
35+
"webpack": "^2.2.1"
36+
},
37+
"babel": {
38+
"presets": [
39+
"es2015"
40+
]
41+
}
42+
}

‎src/css/styles.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.title {
2+
font-size: 100px;
3+
}
4+
5+
.degrees {
6+
font-size: 100px;
7+
}
8+
9+
.start {
10+
font-size: 100px;
11+
}

‎src/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="utf-8">
5+
<!-- build:css -->
6+
<!-- endbuild -->
7+
</head>
8+
<body id="body">
9+
<h1 class="title">Theremin</h1>
10+
<h1 id="hola" class="degrees"></h1>
11+
12+
<button id="start" class="start">START</button>
13+
14+
<!-- build:js -->
15+
<!-- endbuild -->
16+
</body>
17+
</html>

‎src/js/app.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import $ from './dom';
2+
3+
window.addEventListener('deviceorientation', handleOrientation, true);
4+
5+
$.id('start').addEventListener('click', start);
6+
7+
const context = new window.AudioContext();
8+
9+
const osc = context.createOscillator();
10+
osc.connect(context.destination);
11+
12+
osc.frequency.value = 0;
13+
14+
function handleOrientation({ absolute, alpha, beta, gamma }) {
15+
16+
const value = Math.round(gamma);
17+
18+
$.id('hola').innerHTML = value;
19+
osc.frequency.value = Math.abs(value * 10);
20+
$.id('body').style.backgroundColor = value > 10 ? 'lightpink' : 'lightblue';
21+
}
22+
23+
function start(event) {
24+
osc.start();
25+
}

0 commit comments

Comments
 (0)