Skip to content

Commit c8114b3

Browse files
tomclarkeworktomclarkework
committed
lorem and todo done
1 parent 5f19480 commit c8114b3

7 files changed

Lines changed: 271 additions & 5 deletions

File tree

‎13-lorem-ipsum/setup/.prettierrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"semi": false,
3+
"trailingComma": "all",
4+
"singleQuote": true,
5+
"printWidth": 90
6+
}

‎13-lorem-ipsum/setup/app.js‎

Lines changed: 33 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎13-lorem-ipsum/setup/index.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,18 @@
99
<link rel="stylesheet" href="styles.css" />
1010
</head>
1111
<body>
12-
<h1>lorem ipsum project</h1>
12+
13+
<section class="section-center">
14+
<h3>Lorem Ipsum</h2>
15+
<form class="lorem-form">
16+
<label for="amount">paragraphs:</label>
17+
<input type="number" name="amount" id="amount" placeholder="5" min="1" />
18+
<button type="submit" class="btn">generate</button>
19+
</form>
20+
<article class="lorem-text"></article>
21+
</section>
22+
23+
1324
<!-- javascript -->
1425
<script src="app.js"></script>
1526
</body>

‎13-lorem-ipsum/setup/styles.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,3 +215,15 @@ button {
215215
.result {
216216
margin-bottom: 2rem;
217217
}
218+
219+
/* Chrome, Safari, Edge, Opera */
220+
input::-webkit-outer-spin-button,
221+
input::-webkit-inner-spin-button {
222+
-webkit-appearance: none;
223+
margin: 0;
224+
}
225+
226+
/* Firefox */
227+
input[type=number] {
228+
-moz-appearance: textfield;
229+
}

‎14-todo/setup/.prettierrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"semi": false,
3+
"trailingComma": "all",
4+
"singleQuote": true,
5+
"printWidth": 90,
6+
"tabWidth": 4
7+
}

‎14-todo/setup/app.js‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,192 @@
11
// ****** SELECT ITEMS **********
2+
const alert = document.querySelector('.alert')
3+
const form = document.querySelector('.grocery-form')
4+
const grocery = document.getElementById('grocery')
5+
const submitBtn = document.querySelector('.submit-btn')
6+
const container = document.querySelector('.grocery-container')
7+
const list = document.querySelector('.grocery-list')
8+
const clearBtn = document.querySelector('.clear-btn')
29

310
// edit option
11+
let editElement
12+
let editFlag = false
13+
let editID = ''
414

515
// ****** EVENT LISTENERS **********
16+
form.addEventListener('submit', addItem)
17+
clearBtn.addEventListener('click', clearItems)
18+
window.addEventListener('DOMContentLoaded', setupItems)
619

720
// ****** FUNCTIONS **********
21+
function addItem(e) {
22+
e.preventDefault()
23+
24+
const value = grocery.value
25+
const id = new Date().getTime().toString()
26+
27+
if (value && !editFlag) {
28+
createListItem(id, value)
29+
30+
displayAlert('item added to list', 'success')
31+
32+
container.classList.add('show-container')
33+
34+
addToLocalStorage(id, value)
35+
36+
setBackToDefault()
37+
} else if (value && editFlag) {
38+
editElement.innerHTML = value
39+
displayAlert('value changed', 'success')
40+
editLocalStorage(editID, value)
41+
setBackToDefault()
42+
} else {
43+
displayAlert('please enter a value', 'danger')
44+
}
45+
}
46+
47+
function displayAlert(text, action) {
48+
alert.textContent = text
49+
alert.classList.add(`alert-${action}`)
50+
51+
setTimeout(function () {
52+
alert.textContent = ''
53+
alert.classList.remove(`alert-${action}`)
54+
}, 3000)
55+
}
56+
57+
function setBackToDefault() {
58+
grocery.value = ''
59+
editFlag = false
60+
editID = ''
61+
submitBtn.textContent = 'submit'
62+
}
63+
64+
function clearItems() {
65+
const items = document.querySelectorAll('.grocery-item')
66+
67+
if (items.length > 0) {
68+
items.forEach(function (item) {
69+
list.removeChild(item)
70+
})
71+
}
72+
73+
container.classList.remove('show-container')
74+
75+
setBackToDefault()
76+
77+
localStorage.removeItem('list')
78+
}
79+
80+
function deleteItem(e) {
81+
const element = e.currentTarget.parentElement.parentElement
82+
const id = element.dataset.id
83+
84+
list.removeChild(element)
85+
86+
if (list.children.length === 0) {
87+
container.classList.remove('show-container')
88+
}
89+
90+
setBackToDefault()
91+
92+
removeFromLocalStorage(id)
93+
}
94+
95+
function editItem(e) {
96+
const element = e.currentTarget.parentElement.parentElement
97+
98+
editElement = e.currentTarget.parentElement.previousElementSibling
99+
grocery.value = editElement.innerHTML
100+
101+
editFlag = true
102+
103+
editID = element.dataset.id
104+
105+
submitBtn.textContent = 'Edit'
106+
}
8107

9108
// ****** LOCAL STORAGE **********
109+
function addToLocalStorage(id, value) {
110+
const grocery = {
111+
id,
112+
value,
113+
}
114+
115+
let items = getLocalStorage()
116+
117+
items.push(grocery)
118+
119+
localStorage.setItem('list', JSON.stringify(items))
120+
}
121+
122+
function removeFromLocalStorage(id) {
123+
let items = getLocalStorage()
124+
125+
items = items.filter(function (item) {
126+
if (item.id !== id) {
127+
return item
128+
}
129+
})
130+
131+
localStorage.setItem('list', JSON.stringify(items))
132+
}
133+
134+
function editLocalStorage(id, value) {
135+
let items = getLocalStorage()
136+
137+
items = items.map(function (item) {
138+
if (item.id === id) {
139+
item.value = value
140+
}
141+
return item
142+
})
143+
144+
localStorage.setItem('list', JSON.stringify(items))
145+
}
146+
147+
function getLocalStorage() {
148+
return localStorage.getItem('list') ? JSON.parse(localStorage.getItem('list')) : []
149+
}
10150

11151
// ****** SETUP ITEMS **********
152+
function setupItems() {
153+
let items = getLocalStorage()
154+
155+
if (items.length > 0) {
156+
items.forEach(function (item) {
157+
createListItem(item.id, item.value)
158+
})
159+
160+
container.classList.add('show-container')
161+
}
162+
}
163+
164+
function createListItem(id, value) {
165+
const element = document.createElement('article')
166+
167+
element.classList.add('grocery-item')
168+
169+
const attr = document.createAttribute('data-id')
170+
attr.value = id
171+
172+
element.setAttributeNode(attr)
173+
174+
element.innerHTML = `<p class="title">${value}</p>
175+
<div class="btn-container">
176+
<button type="button" class="edit-btn">
177+
<i class="fas fa-edit"></i>
178+
</button>
179+
180+
<button type="button" class="delete-btn">
181+
<i class="fas fa-trash"></i>
182+
</button>
183+
</div>`
184+
185+
const deleteBtn = element.querySelector('.delete-btn')
186+
const editBtn = element.querySelector('.edit-btn')
187+
188+
deleteBtn.addEventListener('click', deleteItem)
189+
editBtn.addEventListener('click', editItem)
190+
191+
list.appendChild(element)
192+
}

‎14-todo/setup/index.html‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,26 @@
1313
<link rel="stylesheet" href="styles.css" />
1414
</head>
1515
<body>
16-
<h1>grocery bud project</h1>
16+
17+
<section class="section-center">
18+
<form class="grocery-form">
19+
<p class="alert"></p>
20+
<h3>grocery list</h3>
21+
<div class="form-control">
22+
<input type="text" id="grocery" placeholder="e.g. eggs"/>
23+
<button type="submit" class="submit-btn">submit</button>
24+
</div>
25+
</form>
26+
27+
<div class="grocery-container">
28+
<div class="grocery-list">
29+
30+
</div>
31+
<button type="button" class="clear-btn">clear items</button>
32+
</div>
33+
</section>
34+
35+
1736
<!-- javascript -->
1837
<script src="app.js"></script>
1938
</body>

0 commit comments

Comments
 (0)