Skip to content

Commit 2b58f90

Browse files
naseelemaknaseelemak
committed
Update app.js and index.html
1 parent f24117e commit 2b58f90

2 files changed

Lines changed: 65 additions & 1 deletion

File tree

‎14-grocery-bud/setup/app.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,46 @@
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+
// submit form
17+
form.addEventListener("submit", addItem);
618

719
// ****** FUNCTIONS **********
20+
function addItem(e) {
21+
e.preventDefault();
22+
const value = grocery.value;
23+
const id = new Date().getTime().toString();
24+
if (value && !editFlag) {
25+
console.log("add item to the list");
26+
} else if (value && editFlag) {
27+
console.log("editing");
28+
} else {
29+
displayAlert("please enter value", "danger");
30+
}
31+
}
32+
33+
// display alert
34+
function displayAlert(text, action) {
35+
alert.textContent = text;
36+
alert.classList.add(`alert-${action}`);
37+
38+
// remove alert
39+
setTimeout(function () {
40+
alert.textContent = "";
41+
alert.classList.remove(`alert-${action}`);
42+
}, 1000);
43+
}
844

945
// ****** LOCAL STORAGE **********
1046

‎14-grocery-bud/setup/index.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,35 @@
1313
<link rel="stylesheet" href="styles.css" />
1414
</head>
1515
<body>
16-
<h1>grocery bud project</h1>
16+
<section class="section-center">
17+
<!-- form -->
18+
<form class="grocery-form">
19+
<p class="alert"></p>
20+
<h3>grocery bud</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+
<!-- list -->
27+
<div class="grocery-container">
28+
<div class="grocery-list">
29+
<article class="grocery-item">
30+
<p class="title">item</p>
31+
<div class="btn-container">
32+
<button type="button" class="edit-btn">
33+
<i class="fas fa-edit"></i>
34+
</button>
35+
<button type="button" class="delete-btn">
36+
<i class="fas fa-trash"></i>
37+
</button>
38+
</div>
39+
</article>
40+
</div>
41+
<!-- button -->
42+
<button type="button" class="clear-btn">clear items</button>
43+
</div>
44+
</section>
1745
<!-- javascript -->
1846
<script src="app.js"></script>
1947
</body>

0 commit comments

Comments
 (0)