Skip to content

Commit db469d2

Browse files
author
Axel
committed
Add exercise 14, 15 and Update showcase
1 parent d9e4dd2 commit db469d2

File tree

13 files changed

+392
-2
lines changed

13 files changed

+392
-2
lines changed

‎13 - Slide in on Scroll/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>JS30</title>
4+
<title>Slide in on Scroll</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
77
<link href="dist/main.css" type="text/css" rel="stylesheet">

‎14 - JavaScript References VS Copying/gulpfile.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var gulp = require('gulp'),
2+
browserSync = require('browser-sync').create();
3+
4+
gulp.task('server', function() {
5+
6+
browserSync.init({
7+
server: "./",
8+
open: false
9+
});
10+
11+
gulp.watch("./*.html").on('change', browserSync.reload);
12+
});
13+
14+
gulp.task('default', ['server']);

‎14 - JavaScript References VS Copying/index.html

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>JavaScript References vs Copying</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7+
</head>
8+
<body>
9+
10+
<script>
11+
12+
// Strings, numbers and booleans
13+
let age = 100;
14+
let age2 = age;
15+
console.log(age, age2);
16+
age = 200;
17+
console.log(age, age2);
18+
19+
let name = 'Wes';
20+
let name2 = name;
21+
console.log(name, name2);
22+
name = 'wesley';
23+
console.log(name, name2);
24+
25+
// =========================
26+
27+
28+
// Let's say we have an array
29+
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
30+
31+
// and we want to make a copy of it.
32+
const team = players;
33+
console.log(players, team);
34+
35+
// You might think we can just do something like this:
36+
team[3] = "Pita";
37+
38+
// however what happens when we update that array?
39+
// now here is the problem!
40+
// oh no - we have edited the original array too!
41+
// Why? It's because that is an array reference, not an array copy. They both point to the same array!
42+
43+
// So, how do we fix this? We take a copy instead!
44+
// with slice()
45+
const team2 = players.slice();
46+
47+
// or create a new array and concat the old one in
48+
const team3 = [].concat(players);
49+
50+
// or use the new ES6 Spread
51+
const team4 = [...players];
52+
53+
//or Array.from()
54+
const team5 = Array.from(players);
55+
56+
// =============================
57+
58+
59+
// The same thing goes for objects, let's say we have a person object
60+
const person = {
61+
name: 'Wes Bos',
62+
age: 80
63+
};
64+
65+
// and think we make a copy:
66+
// const cap = person;
67+
// cap.number = 99;
68+
69+
// how do we take a copy instead?
70+
const cap2 = Object.assign({}, person, {number: 99, age: 20});
71+
72+
// We will hopefully soon see the object ...spread
73+
// const cap3 = {...person};
74+
75+
// Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
76+
const wes = {
77+
name: 'Wes',
78+
age: 100,
79+
social: {
80+
twitter: '@wesbos',
81+
facebook: 'wesbos.developer'
82+
}
83+
};
84+
85+
console.log(wes);
86+
87+
//Copia solo un nivel de profundidad
88+
const dev = Object.assign({}, wes);
89+
90+
//Pasa el objeto a string e inmediatamente lo convierte en obj. No usar esto.
91+
const dev2 = JSON.parse(JSON.stringify(wes));
92+
93+
</script>
94+
95+
96+
</body>
97+
</html>

‎15 - LocalStorage/dist/main.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎15 - LocalStorage/dist/main.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎15 - LocalStorage/gulpfile.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
var gulp = require('gulp'),
2+
browserSync = require('browser-sync').create(),
3+
sass = require('gulp-sass'),
4+
autoprefixer = require('gulp-autoprefixer'),
5+
babel = require("gulp-babel"),
6+
uglify = require('gulp-uglify'),
7+
plumber = require("gulp-plumber"),
8+
cleanCSS = require('gulp-clean-css');
9+
10+
gulp.task('server', ['sass', 'babel'], function() {
11+
12+
browserSync.init({
13+
server: "./",
14+
open: false
15+
});
16+
17+
gulp.watch("./*.html").on('change', browserSync.reload);
18+
gulp.watch("./*.s+(a|c)ss", ['sass']);
19+
gulp.watch("./*.js", ['babel']);
20+
});
21+
22+
gulp.task('sass', function() {
23+
return gulp.src("./main.sass")
24+
.pipe(sass({
25+
errLogToConsole: true,
26+
outputStyle: 'nested',
27+
includePaths: require('node-normalize-scss').includePaths
28+
}).on('error', sass.logError))
29+
.pipe(autoprefixer())
30+
.pipe(gulp.dest("./dist"))
31+
.pipe(browserSync.stream());
32+
});
33+
34+
gulp.task('babel', function () {
35+
return gulp.src("./main.js")
36+
.pipe(plumber())
37+
.pipe(babel({
38+
"presets": ["babel-preset-es2015"].map(require.resolve)
39+
}))
40+
.pipe(gulp.dest("./dist"))
41+
.pipe(browserSync.stream());
42+
});
43+
44+
gulp.task('miniJS', function () {
45+
return gulp.src("dist/main.js")
46+
.pipe(uglify())
47+
.pipe(gulp.dest("./dist"));
48+
});
49+
50+
gulp.task('miniCSS', function () {
51+
return gulp.src("dist/main.css")
52+
.pipe(cleanCSS())
53+
.pipe(gulp.dest('dist'));
54+
});
55+
56+
57+
gulp.task('mini', ['miniJS', "miniCSS"]);
58+
gulp.task('default', ['server']);

‎15 - LocalStorage/image/14_port.jpg

82.5 KB
Loading

‎15 - LocalStorage/image/back.jpg

248 KB
Loading

‎15 - LocalStorage/index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Local Storage</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet prefetch">
8+
<link href="dist/main.css" type="text/css" rel="stylesheet">
9+
</head>
10+
<body>
11+
<div class="wrapper">
12+
<h2>BREAKFAST</h2>
13+
<p></p>
14+
<ul class="plates">
15+
<li>Loading...</li>
16+
</ul>
17+
<form class="add-items">
18+
<input type="text" name="item" placeholder="Item Name" required>
19+
<input type="submit" value="+ Add Item">
20+
</form>
21+
<div class="menu">
22+
<button class="buttons" type="button" name="check"><i class="fa fa-plus" aria-hidden="true"></i><span>check all</span></button>
23+
<button class="buttons" type="button" name="uncheck"><i class="fa fa-minus" aria-hidden="true"></i><span>uncheck all</span></button>
24+
<button class="buttons" type="button" name="clear"><i class="fa fa-times" aria-hidden="true"></i><span>clear all</span></button>
25+
</div>
26+
</div>
27+
28+
<script src="dist/main.js"></script>
29+
</body>
30+
</html>

‎15 - LocalStorage/main.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/* jshint -W138 */
2+
const wrapper = document.querySelector('.wrapper'),
3+
addItems = wrapper.querySelector('.add-items'),
4+
itemsList = wrapper.querySelector('.plates'),
5+
check = wrapper.querySelector('[name=check]'),
6+
uncheck = wrapper.querySelector('[name=uncheck]'),
7+
clear = wrapper.querySelector('[name=clear]');
8+
9+
let items = JSON.parse(localStorage.getItem('items')) || [];
10+
11+
function addItem(e){
12+
e.preventDefault();
13+
14+
const text = (this.querySelector('[name=item]')).value;
15+
const item = {
16+
text, //ES6 shorthand for text: text;
17+
done: false
18+
};
19+
20+
items.push(item);
21+
populateList(items, itemsList);
22+
localStorage.setItem('items', JSON.stringify(items));
23+
this.reset();
24+
}
25+
26+
function populateList(plates = [], platesList) {
27+
platesList.innerHTML = plates.map((plate, i) => {
28+
return `
29+
<li>
30+
<input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked': ''} />
31+
<label for="item${i}">${plate.text}</label>
32+
</li>
33+
`;
34+
}).join("");
35+
}
36+
37+
function toggleDone(e){
38+
if(!e.target.matches('input')) return; //skip this unless it's an input
39+
const el = e.target;
40+
const index = el.dataset.index;
41+
items[index].done = !items[index].done;
42+
43+
localStorage.setItem('items', JSON.stringify(items));
44+
populateList(items, itemsList);
45+
}
46+
47+
function checkAll(){
48+
items.map(item => item.done = true);
49+
localStorage.setItem('items', JSON.stringify(items));
50+
populateList(items, itemsList);
51+
}
52+
53+
function uncheckAll(){
54+
items.map(item => item.done = false);
55+
localStorage.setItem('items', JSON.stringify(items));
56+
populateList(items, itemsList);
57+
}
58+
59+
function clearAll(){
60+
localStorage.removeItem('items');
61+
items = JSON.parse(localStorage.getItem('items')) || [];
62+
populateList(items, itemsList);
63+
}
64+
65+
addItems.addEventListener('submit', addItem);
66+
itemsList.addEventListener('click', toggleDone);
67+
check.addEventListener('click', checkAll);
68+
uncheck.addEventListener('click', uncheckAll);
69+
clear.addEventListener('click', clearAll);
70+
71+
populateList(items, itemsList);

0 commit comments

Comments
 (0)