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 02b4d4e

Browse files
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)

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