Skip to content

Commit 02b4d4e

Browse files
fullstackNRJfullstackNRJ
committed
day 22
1 parent 9e2b9d1 commit 02b4d4e

File tree

5 files changed

+159
-1
lines changed

5 files changed

+159
-1
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,5 @@ Motivate yourself to code daily till 30 days, and see the magic!
3737
| [Day 18](./each%20day%20build%20day!/Day%2018/) | [Custom sorting names](./each%20day%20build%20day!/Day%2018/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2018/README.md/) |
3838
| [Day 19](./each%20day%20build%20day!/Day%2019/) | [Reducing time](./each%20day%20build%20day!/Day%2019/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2019/README.md/) |
3939
| [Day 20](./each%20day%20build%20day!/Day%2020/) | [Sticky Nav](./each%20day%20build%20day!/Day%2020/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2020/README.md/) |
40-
| [Day 21](./each%20day%20build%20day!/Day%2021/) | [Speech Recognition](./each%20day%20build%20day!/Day%2021/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2021/README.md/) |
40+
| [Day 21](./each%20day%20build%20day!/Day%2021/) | [Speech Recognition](./each%20day%20build%20day!/Day%2021/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2021/README.md/) |
41+
| [Day 22](./each%20day%20build%20day!/Day%2022/) | [Not to do list](./each%20day%20build%20day!/Day%2022/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2022/README.md/) |

‎each day build day!/Day 22/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Food list
2+
3+
A simple list to store food items built with only html,css and javascript.
4+
5+
6+
# Challenges
7+
- localstorage api
8+
- event bubbling
9+
- css3 effects

‎each day build day!/Day 22/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Not Todo List 📜 </title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<h1>TO EAT LIST 🥣 </h1>
11+
12+
<div class="wrapper">
13+
<h2>Local Delicacies</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">
21+
</form>
22+
</div>
23+
<script src="main.js"></script>
24+
</body>
25+
</html>

‎each day build day!/Day 22/main.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const addItems = document.querySelector('.add-items');
2+
const itemsList = document.querySelector('.plates');
3+
const items = JSON.parse(localStorage.getItem('items')) || [];
4+
5+
//add item
6+
function addItem(e) {
7+
e.preventDefault();
8+
//get the item
9+
const text = (this.querySelector('[name=item]')).value;
10+
//object
11+
const item = {
12+
text,
13+
done: false
14+
};
15+
16+
items.push(item);
17+
populateList(items, itemsList);
18+
localStorage.setItem('items', JSON.stringify(items));
19+
this.reset();
20+
}
21+
22+
function populateList(plates = [], platesList) {
23+
platesList.innerHTML = plates.map((plate, i) => {
24+
return `
25+
<li>
26+
<input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
27+
<label for="item${i}">${plate.text}</label>
28+
</li>
29+
`;
30+
}).join('');
31+
}
32+
33+
function toggleDone(e) {
34+
if (!e.target.matches('input')) return; // skip this unless it's an input
35+
const el = e.target;
36+
const index = el.dataset.index;
37+
items[index].done = !items[index].done;
38+
localStorage.setItem('items', JSON.stringify(items));
39+
populateList(items, itemsList);
40+
}
41+
42+
addItems.addEventListener('submit', addItem);
43+
itemsList.addEventListener('click', toggleDone);
44+
45+
populateList(items, itemsList);

‎each day build day!/Day 22/style.css

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

0 commit comments

Comments
 (0)