javascript-basic-projects/14-todo/final/app.js at master · MaxCodeXTC/javascript-basic-projects · GitHub

Repository navigation

History

218 lines (192 loc) · 5.9 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

// ****** select items **********

const form = document.querySelector(".grocery-form");

const alert = document.querySelector(".alert");

const grocery = document.getElementById("grocery");

const submitBtn = document.querySelector(".submit-btn");

const container = document.querySelector(".grocery-container");

const list = document.querySelector(".grocery-list");

const clearBtn = document.querySelector(".clear-btn");

// edit option

let editElement;

let editFlag = false;

let editID = "";

// ****** event listeners **********

// submit form

form.addEventListener("submit", addItem);

// clear list

clearBtn.addEventListener("click", clearItems);

// display items onload

window.addEventListener("DOMContentLoaded", setupItems);

// ****** functions **********

// add item

function addItem(e) {

e.preventDefault();

const value = grocery.value;

const id = new Date().getTime().toString();

if (value !== "" && !editFlag) {

const element = document.createElement("article");

let attr = document.createAttribute("data-id");

attr.value = id;

element.setAttributeNode(attr);

element.classList.add("grocery-item");

element.innerHTML = `<p class="title">${value}</p>

</button>

</button>

</div>

// add event listeners to both buttons;

const deleteBtn = element.querySelector(".delete-btn");

deleteBtn.addEventListener("click", deleteItem);

const editBtn = element.querySelector(".edit-btn");

editBtn.addEventListener("click", editItem);

// append child

list.appendChild(element);

// display alert

displayAlert("item added to the list", "success");

// show container

container.classList.add("show-container");

// set local storage

addToLocalStorage(id, value);

// set back to default

setBackToDefault();

} else if (value !== "" && editFlag) {

editElement.innerHTML = value;

displayAlert("value changed", "success");

// edit local storage

editLocalStorage(editID, value);

setBackToDefault();

} else {

displayAlert("please enter value", "danger");

}

// display alert

function displayAlert(text, action) {

alert.textContent = text;

alert.classList.add(`alert-${action}`);

// remove alert

setTimeout(function () {

alert.textContent = "";

alert.classList.remove(`alert-${action}`);

}, 1000);

}

// clear items

function clearItems() {

const items = document.querySelectorAll(".grocery-item");

if (items.length > 0) {

items.forEach(function (item) {

list.removeChild(item);

});

}

container.classList.remove("show-container");

displayAlert("empty list", "danger");

setBackToDefault();

localStorage.removeItem("list");

}

// delete item

function deleteItem(e) {

const element = e.currentTarget.parentElement.parentElement;

const id = element.dataset.id;

list.removeChild(element);

if (list.children.length === 0) {

container.classList.remove("show-container");

}

displayAlert("item removed", "danger");

setBackToDefault();

// remove from local storage

removeFromLocalStorage(id);

}

// edit item

function editItem(e) {

const element = e.currentTarget.parentElement.parentElement;

// set edit item

editElement = e.currentTarget.parentElement.previousElementSibling;

// set form value

grocery.value = editElement.innerHTML;

editFlag = true;

editID = element.dataset.id;

submitBtn.textContent = "edit";

}

// set backt to defaults

function setBackToDefault() {

grocery.value = "";

editFlag = false;

editID = "";

submitBtn.textContent = "submit";

}

// ****** local storage **********

// add to local storage

function addToLocalStorage(id, value) {

const grocery = { id, value };

let items = getLocalStorage();

items.push(grocery);

localStorage.setItem("list", JSON.stringify(items));

}

function getLocalStorage() {

return localStorage.getItem("list")

? JSON.parse(localStorage.getItem("list"))

: [];

}

function removeFromLocalStorage(id) {

let items = getLocalStorage();

items = items.filter(function (item) {

if (item.id !== id) {

return item;

}

});

localStorage.setItem("list", JSON.stringify(items));

}

function editLocalStorage(id, value) {

let items = getLocalStorage();

items = items.map(function (item) {

if (item.id === id) {

item.value = value;

}

return item;

});

localStorage.setItem("list", JSON.stringify(items));

}

// SETUP LOCALSTORAGE.REMOVEITEM('LIST');

// ****** setup items **********

function setupItems() {

let items = getLocalStorage();

if (items.length > 0) {

items.forEach(function (item) {

createListItem(item.id, item.value);

});

container.classList.add("show-container");

}

function createListItem(id, value) {

const element = document.createElement("article");

let attr = document.createAttribute("data-id");

attr.value = id;

element.setAttributeNode(attr);

element.classList.add("grocery-item");

element.innerHTML = `<p class="title">${value}</p>

</button>

</button>

</div>

// add event listeners to both buttons;

const deleteBtn = element.querySelector(".delete-btn");

deleteBtn.addEventListener("click", deleteItem);

const editBtn = element.querySelector(".edit-btn");

editBtn.addEventListener("click", editItem);

// append child

list.appendChild(element);

}

javascript-basic-projects/14-todo/final/app.js at master · MaxCodeXTC/javascript-basic-projects · GitHub

Repository navigation

Expand file tree

Breadcrumbs

app.js

Latest commit

History

Breadcrumbs

app.js

File metadata and controls