Skip to content

Commit 5bfe3bd

Browse files
committed
feat: local storage
challenge wesbos#15 Local Storage
1 parent 2e32e65 commit 5bfe3bd

2 files changed

Lines changed: 123 additions & 51 deletions

File tree

Lines changed: 76 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,103 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>JS Reference VS Copy</title>
5+
<meta charset="UTF-8">
6+
<title>JS Reference VS Copy</title>
67
</head>
8+
79
<body>
810

9-
<script>
10-
// start with strings, numbers and booleans
11+
<script>
12+
// start with 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+
// Let's say we have an array
26+
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
1127

12-
// Let's say we have an array
13-
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
28+
// and we want to make a copy of it.
29+
const team = players;
1430

15-
// and we want to make a copy of it.
31+
console.log(players, team);
32+
// You might think we can just do something like this:
33+
// team[3] = 'Lux';
1634

17-
// You might think we can just do something like this:
35+
// however what happens when we update that array?
1836

19-
// however what happens when we update that array?
37+
// now here is the problem!
2038

21-
// now here is the problem!
39+
// oh no - we have edited the original array too!
2240

23-
// 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!
2442

25-
// Why? It's because that is an array reference, not an array copy. They both point to the same array!
43+
// So, how do we fix this? We take a copy instead!
44+
const team2 = players.slice();
2645

27-
// So, how do we fix this? We take a copy instead!
46+
// one way
2847

29-
// one way
48+
// or create a new array and concat the old one in
49+
const team3 = [].concat(players);
3050

31-
// or create a new array and concat the old one in
51+
// or use the new ES6 Spread
52+
const team4 = [...players];
53+
team4[3] = 'heeee hawww';
54+
console.log(team4);
3255

33-
// or use the new ES6 Spread
56+
const team5 = Array.from(players);
3457

35-
// now when we update it, the original one isn't changed
58+
// now when we update it, the original one isn't changed
3659

37-
// The same thing goes for objects, let's say we have a person object
60+
// The same thing goes for objects, let's say we have a person object
3861

39-
// with Objects
40-
const person = {
41-
name: 'Wes Bos',
42-
age: 80
43-
};
62+
// with Objects
63+
const person = {
64+
name: 'Wes Bos',
65+
age: 80
66+
};
4467

45-
// and think we make a copy:
68+
// and think we make a copy:
69+
// const captain = person;
70+
// captain.number = 99;
4671

47-
// how do we take a copy instead?
72+
// how do we take a copy instead?
73+
const cap2 = Object.assign({}, person, {
74+
number: 99,
75+
age: 12
76+
});
77+
console.log(cap2);
4878

49-
// We will hopefully soon see the object ...spread
79+
// We will hopefully soon see the object ...spread
80+
// const cap3 = {...person};
5081

51-
// 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.
82+
// 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.
5283

53-
</script>
84+
const wes = {
85+
name: 'Wes',
86+
age: 100,
87+
social: {
88+
twitter: '@wesbos',
89+
facebook: 'wesbos.developer'
90+
}
91+
};
92+
93+
console.clear();
94+
console.log(wes);
95+
96+
const dev = Object.assign({}, wes);
97+
98+
const dev2 = JSON.parse(JSON.stringify(wes));
99+
</script>
54100

55101
</body>
56-
</html>
102+
103+
</html>

15 - LocalStorage/index-START.html

Lines changed: 47 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,63 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>LocalStorage</title>
6-
<link rel="stylesheet" href="style.css">
5+
<meta charset="UTF-8">
6+
<title>LocalStorage</title>
7+
<link rel="stylesheet" href="style.css">
78
</head>
9+
810
<body>
9-
<!--
11+
<!--
1012
Fish SVG Cred:
1113
https://thenounproject.com/search/?q=fish&i=589236
1214
-->
1315

14-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path d="M495.9,425.3H16.1c-5.2,0-10.1,2.9-12.5,7.6c-2.4,4.7-2.1,10.3,0.9,14.6l39,56.4c2.6,3.8,7,6.1,11.6,6.1h401.7 c4.6,0,9-2.3,11.6-6.1l39-56.4c3-4.3,3.3-9.9,0.9-14.6C506,428.2,501.1,425.3,495.9,425.3z M449.4,481.8H62.6L43,453.6H469 L449.4,481.8z"/><path d="M158.3,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1c-7.8,0-14.1,6.3-14.1,14.1v64.5 C144.2,115.7,150.5,122,158.3,122z"/><path d="M245.1,94.7c7.8,0,14.1-6.3,14.1-14.1V16.1c0-7.8-6.3-14.1-14.1-14.1C237.3,2,231,8.3,231,16.1v64.5 C231,88.4,237.3,94.7,245.1,94.7z"/><path d="M331.9,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1s-14.1,6.3-14.1,14.1v64.5 C317.8,115.7,324.1,122,331.9,122z"/><path d="M9.6,385.2c5.3,2.8,11.8,1.9,16.2-2.2l50.6-47.7c56.7,46.5,126.6,71.9,198.3,71.9c0,0,0,0,0,0 c87.5,0,169.7-36.6,231.4-103.2c5-5.4,5-13.8,0-19.2c-61.8-66.5-144-103.2-231.4-103.2c-72,0-142.2,25.6-199,72.5l-50-47.1 c-4.4-4.1-10.9-5-16.2-2.2c-5.3,2.8-8.3,8.7-7.4,14.6l11.6,75L2.2,370.6C1.3,376.5,4.2,382.4,9.6,385.2z M380.9,230.8 c34.9,14.3,67.2,35.7,95.3,63.6c-10.1,10-20.8,19.2-31.9,27.5c-22.4-3.3-29.6-8.8-30.7-9.7c-4-5.7-11.8-7.7-18.1-4.4 c-6.9,3.6-9.5,12.2-5.9,19.1c1.9,3.5,7.3,10.3,22.4,16c-10.1,5.7-20.5,10.7-31.1,15.1C352.4,320.2,352.4,268.6,380.9,230.8z M36.3,255.6l29.4,27.7c5.3,5,13.6,5.1,19.1,0.3c53.2-47.6,120.7-73.7,190-73.7c26.9,0,53.2,3.9,78.5,11.3 c-29.3,44.6-29.3,102,0,146.6c-25.3,7.4-51.6,11.3-78.5,11.3c-69,0-136.3-26-189.4-73.2c-2.7-2.4-13.4-6.3-19.1,0.3l-30.1,28.3 l5.7-40C42.2,293,36.3,255.6,36.3,255.6z"/><circle cx="398.8" cy="273.8" r="14.1"/></g></svg>
16+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path d="M495.9,425.3H16.1c-5.2,0-10.1,2.9-12.5,7.6c-2.4,4.7-2.1,10.3,0.9,14.6l39,56.4c2.6,3.8,7,6.1,11.6,6.1h401.7 c4.6,0,9-2.3,11.6-6.1l39-56.4c3-4.3,3.3-9.9,0.9-14.6C506,428.2,501.1,425.3,495.9,425.3z M449.4,481.8H62.6L43,453.6H469 L449.4,481.8z"/><path d="M158.3,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1c-7.8,0-14.1,6.3-14.1,14.1v64.5 C144.2,115.7,150.5,122,158.3,122z"/><path d="M245.1,94.7c7.8,0,14.1-6.3,14.1-14.1V16.1c0-7.8-6.3-14.1-14.1-14.1C237.3,2,231,8.3,231,16.1v64.5 C231,88.4,237.3,94.7,245.1,94.7z"/><path d="M331.9,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1s-14.1,6.3-14.1,14.1v64.5 C317.8,115.7,324.1,122,331.9,122z"/><path d="M9.6,385.2c5.3,2.8,11.8,1.9,16.2-2.2l50.6-47.7c56.7,46.5,126.6,71.9,198.3,71.9c0,0,0,0,0,0 c87.5,0,169.7-36.6,231.4-103.2c5-5.4,5-13.8,0-19.2c-61.8-66.5-144-103.2-231.4-103.2c-72,0-142.2,25.6-199,72.5l-50-47.1 c-4.4-4.1-10.9-5-16.2-2.2c-5.3,2.8-8.3,8.7-7.4,14.6l11.6,75L2.2,370.6C1.3,376.5,4.2,382.4,9.6,385.2z M380.9,230.8 c34.9,14.3,67.2,35.7,95.3,63.6c-10.1,10-20.8,19.2-31.9,27.5c-22.4-3.3-29.6-8.8-30.7-9.7c-4-5.7-11.8-7.7-18.1-4.4 c-6.9,3.6-9.5,12.2-5.9,19.1c1.9,3.5,7.3,10.3,22.4,16c-10.1,5.7-20.5,10.7-31.1,15.1C352.4,320.2,352.4,268.6,380.9,230.8z M36.3,255.6l29.4,27.7c5.3,5,13.6,5.1,19.1,0.3c53.2-47.6,120.7-73.7,190-73.7c26.9,0,53.2,3.9,78.5,11.3 c-29.3,44.6-29.3,102,0,146.6c-25.3,7.4-51.6,11.3-78.5,11.3c-69,0-136.3-26-189.4-73.2c-2.7-2.4-13.4-6.3-19.1,0.3l-30.1,28.3 l5.7-40C42.2,293,36.3,255.6,36.3,255.6z"/><circle cx="398.8" cy="273.8" r="14.1"/></g></svg>
17+
18+
<div class="wrapper">
19+
<h2>LOCAL TAPAS</h2>
20+
<p></p>
21+
<ul class="plates">
22+
<li>Loading Tapas...</li>
23+
</ul>
24+
<form class="add-items">
25+
<input type="text" name="item" placeholder="Item Name" required>
26+
<input type="submit" value="+ Add Item">
27+
</form>
28+
</div>
29+
30+
<script>
31+
const addItems = document.querySelector('.add-items');
32+
const itemsList = document.querySelector('.plates');
33+
const items = [];
1534

16-
<div class="wrapper">
17-
<h2>LOCAL TAPAS</h2>
18-
<p></p>
19-
<ul class="plates">
20-
<li>Loading Tapas...</li>
21-
</ul>
22-
<form class="add-items">
23-
<input type="text" name="item" placeholder="Item Name" required>
24-
<input type="submit" value="+ Add Item">
25-
</form>
26-
</div>
35+
function addItem(e) {
36+
e.preventDefault();
37+
const text = (this.querySelector('[name=item]')).value;
38+
const item = {
39+
text,
40+
done: false
41+
}
42+
console.log(item);
43+
items.push(item);
44+
populateList(items, itemsList)
45+
this.reset();
46+
}
2747

28-
<script>
29-
const addItems = document.querySelector('.add-items');
30-
const itemsList = document.querySelector('.plates');
31-
const items = [];
48+
function populateList(plates = [], platesList) {
49+
platesList.innerHTML = plates.map((plate, i) => {
50+
return `
51+
<li>
52+
<label for="">${plate.text}</label>
53+
</li>`;
54+
}).join('');
55+
}
3256

33-
</script>
57+
addItems.addEventListener('submit', addItem);
58+
</script>
3459

3560

3661
</body>
37-
</html>
3862

63+
</html>

0 commit comments

Comments
 (0)