Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 27e0b83

Browse files
Day 15 - LocalStorage
1 parent 3d4e390 commit 27e0b83

File tree

6 files changed

+202
-4
lines changed

6 files changed

+202
-4
lines changed

‎15_day/index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>15 Day</title>
7+
<link rel="stylesheet" href="main.css">
8+
</head>
9+
10+
<body>
11+
12+
<div class="wrapper">
13+
<h2>Items</h2>
14+
<p></p>
15+
<ul class="plates">
16+
<li>Loading items...</li>
17+
</ul>
18+
<form class="add-items">
19+
<input type="text" name="item" placeholder="Item Name" required>
20+
<input type="submit" value="+ Add Item" /><br/>
21+
<input type="button" value="Clear All" name="clearAll" />
22+
<input type="button" value="Check All" name="checkAll" />
23+
<input type="button" value="Un-Check All" name="uncheckAll" />
24+
</form>
25+
</div>
26+
<script type="text/javascript" src="main.js"></script>
27+
</body>
28+
</html>

‎15_day/main.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
html {
2+
box-sizing: border-box;
3+
background: url('https://picsum.photos/1500/1000/?random') center no-repeat;
4+
background-size: cover;
5+
min-height: 100vh;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
text-align: center;
10+
font-family: Futura, "Trebuchet MS", Arial, sans-serif
11+
}
12+
13+
*, *:before, *:after {
14+
box-sizing: inherit;
15+
}
16+
17+
svg {
18+
fill: white;
19+
background: rgba(0, 0, 0, 0.1);
20+
padding: 20px;
21+
border-radius: 50%;
22+
width: 200px;
23+
margin-bottom: 50px;
24+
}
25+
26+
.wrapper {
27+
padding: 20px;
28+
max-width: 350px;
29+
background: rgba(255, 255, 255, 0.95);
30+
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
31+
}
32+
33+
h2 {
34+
text-align: center;
35+
margin: 0;
36+
font-weight: 200;
37+
}
38+
39+
.plates {
40+
margin: 0;
41+
padding: 0;
42+
text-align: left;
43+
list-style: none;
44+
}
45+
46+
.plates li {
47+
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
48+
padding: 10px 0;
49+
font-weight: 100;
50+
display: flex;
51+
}
52+
53+
.plates label {
54+
flex: 1;
55+
cursor: pointer;
56+
}
57+
58+
.add-items {
59+
margin-top: 20px;
60+
}
61+
62+
.add-items input {
63+
padding: 10px;
64+
outline: 0;
65+
border: 1px solid rgba(0, 0, 0, 0.1);
66+
}

‎15_day/main.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
const addItems = document.querySelector('.add-items');
2+
const itemsList = document.querySelector('.plates');
3+
const clearAll = document.querySelector('[name=clearAll]');
4+
const checkAll = document.querySelector('[name=checkAll]');
5+
const uncheckAll = document.querySelector('[name=uncheckAll]');
6+
const items = JSON.parse(localStorage.getItem('items')) || [];
7+
8+
function addItem(e) {
9+
e.preventDefault();
10+
const text = (this.querySelector('[name=item]')).value;
11+
const item = {
12+
text,
13+
done: false
14+
};
15+
16+
items.push(item);
17+
populateList(items, itemsList);
18+
19+
localStorage.setItem('items', JSON.stringify(items));
20+
this.reset();
21+
}
22+
23+
function populateList(plates = [], platesList) {
24+
25+
platesList.innerHTML = 'Loading Tapas...';
26+
if (!plates.length) {
27+
platesList.innerHTML = 'Please add some items first';
28+
} else {
29+
30+
platesList.innerHTML = plates.map((plate, i) => {
31+
return `
32+
<li>
33+
<input type="checkbox" data-index=${i} id="item${i}" ${plate.done
34+
? 'checked'
35+
: ''} />
36+
<label for="item${i}">${plate.text}</label>
37+
</li>
38+
`;
39+
}).join('');
40+
}
41+
}
42+
43+
function toggleDone(e) {
44+
if (!e.target.matches('input'))
45+
return;
46+
const el = e.target;
47+
const index = el.dataset.index;
48+
items[index].done = !items[index].done;
49+
bindList(items);
50+
}
51+
52+
function clearAllItems() {
53+
items.length = 0;
54+
bindList(items);
55+
}
56+
57+
function toggleAllItems(status) {
58+
const checkboxes = document.querySelectorAll('.plates input[type="checkbox"]');
59+
checkboxes.forEach(checkbox => {
60+
checkbox.checked = items[checkbox.dataset.index].done = status;
61+
});
62+
bindList(items);
63+
}
64+
65+
function bindList(data) {
66+
localStorage.setItem('items', JSON.stringify(data));
67+
populateList(data, itemsList);
68+
}
69+
70+
addItems.addEventListener('submit', addItem);
71+
itemsList.addEventListener('click', toggleDone);
72+
clearAll.addEventListener('click', clearAllItems);
73+
checkAll.addEventListener('click', () => toggleAllItems(true));
74+
uncheckAll.addEventListener('click', () => toggleAllItems(false));
75+
76+
populateList(items, itemsList);

‎README.md

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# JavaScript30
2+
23
> Course created by [Wes Bos](https://github.com/wesbos). Join the challenge (for free!) here - [JavaScript30](https://javascript30.com/account)
34
45
<h1 align="center">
@@ -14,60 +15,84 @@ If you have any JavaScript/JavaScript30 course related queries, please create a
1415

1516
Thanks!
1617

17-
---
18+
* * *
1819

1920
## Roadmap
2021

2122
### Day 1: 18 Jun 2018
23+
2224
Learned about key event, transitionend event & ES6 template strings.
2325

2426
**Tool Found:** Nice tool for finding JavaScript event keycodes at [keycode.info](http://keycode.info/)
2527

2628
### Day 2: 19 Jun 2018
29+
2730
Learned about Css transition & transform, ES6 const keyword and live UI update after few seconds.
2831

2932
### Day 3: 20 Jun 2018
33+
3034
Learned about CSS variables & updating them using JavaScript
3135

3236
### Day 4: 21 Jun 2018
37+
3338
Learned more about JavaScript array methods like filter, map, sort, reduce & others.
3439

3540
![ES6 Arrow function](https://pbs.twimg.com/media/C0V10qtUcAAct4D.jpg)
3641

3742
### Day 5: 22 Jun 2018
43+
3844
Learned few tips about flexbox. Planning to learn more about flexbox at [flexbox.io](http://flexbox.io/) soon.
3945

4046
### Day 6: 23 Jun 2018
47+
4148
Learned about Fetch API, getting `.json()` from fetch response, ES6 spread operator.
4249

4350
### Day 7: 24 Jun 2018
51+
4452
Learned about new array methods like some, every, find, findIndex.
4553
![Day 7 of 30](https://pbs.twimg.com/media/C07gdtqUAAAtlyM.jpg)
4654

4755
### Day 8: 25 Jun 2018
56+
4857
Had so much fun learning today. Canvas and draw.
4958
![Canvas](https://pbs.twimg.com/media/C1QFNMYUsAA9cxC.jpg)
5059

5160
### Day 9: 26 Jun 2018
61+
5262
Learned few useful Dev tools tricks. Debugging JavaScript code is so much fun, easy and colorful now.
5363

5464
### Day 10: 27 Jun 2018
65+
5566
Learned a user-friendly feature used by popular email clients.
5667

5768
Tool Found: It's so easy now to convert our ES5 code into readable ES6 using [lebab.io](https://lebab.io/try-it)
5869

5970
### Day 11: 28 Jun 2018
71+
6072
Learned some nice tips on creating custom interface for HTML5 video player. Really liking the ES6 arrow functions from day 4 onwards.
6173

6274
![ES6 arrow functions](https://pbs.twimg.com/media/C1vYSZ7XUAEqZXS.jpg)
6375

6476
**Tool Found:** [ESLint v3.13.1](http://eslint.org/blog/2017/01/eslint-v3.13.1-released)
6577

6678
### Day 12: 29 Jun 2018
79+
6780
Learned about key sequence detection & Konami code. Also, found that [BuzzFeed site](https://www.buzzfeed.com/)'s hidden easter egg is still working. To see it in action just press ':arrow_up: :arrow_up: :arrow_down: :arrow_down: :arrow_left: :arrow_right: :arrow_left: :arrow_right: B A'.
6881

6982
### Day 13: 30 Jun 2018
83+
7084
Learned a bit more about window events & a very useful javascript debounce function. Today's project helped me to fix an issue related to resize events which was slowing down our site. The goal behind debounce implementation is to reduce overhead by preventing a function from being called several times in succession.
7185

7286
### Day 14: 1 Jul 2018
87+
7388
Learned more about array & object reference vs actual copy. Found that primitive types are manipulated by value & reference types are manipulated by reference. Numbers and booleans are primitive types in JavaScript -- primitive because they consist of nothing more than a small, fixed number of bytes that are easily manipulated at the low (primitive) levels of the JavaScript interpreter. Objects, on the other hand, are reference types. Arrays and functions, which are specialized types of objects, are therefore also reference types. These data types can contain arbitrary numbers of properties or elements, so they cannot be manipulated as easily as fixed-size primitive values can. Since object and array values can become quite large, it doesn't make sense to manipulate these types by value, as this could involve the inefficient copying and comparing of large amounts of memory.
89+
90+
### Day 15: 2 Jul 2018
91+
92+
Learned some useful stuff on local Storage & event delegation.
93+
94+
Completed all of the project goals for today:-
95+
![Day 15](https://pbs.twimg.com/media/C2EWpE7XgAAG3sp.jpg)
96+
97+
Tested all new buttons. Data is also persisting on page reload:-
98+
![Day 15 new taks](https://pbs.twimg.com/media/C2EYda5XUAAdUdh.jpg)

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<a class="active" href="./12_day/index.html">12 Day</a>
2424
<a class="active" href="./13_day/index.html">13 Day</a>
2525
<a class="active" href="./14_day/index.html">14 Day</a>
26+
<a class="active" href="./15_day/index.html">15 Day</a>
2627
</div>
2728
</body>
2829

‎main.css

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
html {
2-
font-size:10px;
3-
background: url(https://images.unsplash.com/photo-1515343480029-43cdfe6b6aae?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=250fd87139bfce9117534e300a5bf25b&auto=format&fit=crop&w=800&q=80) bottom center;
2+
box-sizing: border-box;
3+
background: url('https://picsum.photos/1500/1000/?random') center no-repeat;
44
background-size: cover;
5+
min-height: 100vh;
6+
font-size: 12px;
57
}
68

79
body, html {
@@ -20,7 +22,7 @@ body, html {
2022
text-align: center;
2123
padding: 14px 16px;
2224
text-decoration: none;
23-
font-size: 17px;
25+
font-size: 16px;
2426
}
2527

2628
.topnav a:hover {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /